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.
|