|
In this articel I will talk about horizontal scroll menu in Windows Phone. This is simple but tricky and very usefule.
Let's write code.
Step 1: Create a Silverlight for Windows Phone project.
Step 2: Create a folder Images and add images in the folder as shown below. Change the Build Action type to Content of each folder.
Step 3: Add below code inside ContentPanel of MainPage.Xaml. VerticalScrollBarVisibility should be Disabled and HorizontalScrollBarVisibility should be Hidden.
Add MouseEnter event to image to take respective action on click of image.
<TextBlock Height="104" HorizontalAlignment="Left" Margin="100,200,0,0" FontSize="50" Foreground="YellowGreen" TextAlignment="Center" Name="testGesture" Text="" VerticalAlignment="Top"/>
<StackPanel Margin="12,0,12,0">
<ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility="Hidden">
<Grid Margin="0,300,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image Name="image1" Source="/Images/SV1.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,130,102" MouseEnter="image1_MouseEnter" />
<Image Name="image2" Source="/Images/SV2.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="130,0,0,102" MouseEnter="image2_MouseEnter" />
<Image Name="image3" Source="/Images/SV3.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="260,0,0,102" MouseEnter="image3_MouseEnter" />
<Image Name="image4" Source="/Images/SV4.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="390,0,0,102" MouseEnter="image4_MouseEnter" />
<Image Name="image5" Source="/Images/SV5.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="520,0,0,102" MouseEnter="image5_MouseEnter" />
<Image Name="image6" Source="/Images/SV6.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="650,0,0,102" MouseEnter="image6_MouseEnter" />
<Image Name="image7" Source="/Images/SV7.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="780,0,0,102" MouseEnter="image7_MouseEnter" />
<Image Name="image8" Source="/Images/SV8.jpg" Height="100" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="910,0,0,102" MouseEnter="image8_MouseEnter" />
</Grid>
</ScrollViewer>
</StackPanel>
Step 4: Add event handler of images in codebehind of MainPage.xaml.cs
private void image1_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 1";
}
private void image2_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 2";
}
private void image3_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 3";
}
private void image4_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 4";
}
private void image5_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 5";
}
private void image6_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 6";
}
private void image7_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 7";
}
private void image8_MouseEnter(object sender, MouseEventArgs e)
{
testGesture.Text = "Image 8";
}
Step 5: Now run the application to see the horizontal scroll viewer in action.
This ends the article of horizontal scroll viewer in Windows Phone.
|