As part of my WPF study, I have written a post (Image viewer in WPF – Part I). As the second part I am explaing the XAML (UI) code for the application.
In WPF Microsoft, introduced a new container control, ScrollViewer. I am using Scrollviewer as my host for displaying Images.
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<Image Stretch="Fill" Name="MainImage" />
</StackPanel>
</ScrollViewer>
This control will display scrollbars automatically, if the Image size is greater than the scroll viewer size. And in the codebehind I am displaying the Images using a Collection
Private Sub DisplayImages()
If m_FilesUpdated.Count <= m_FileIndex Or m_FileIndex < 0 Then
MessageBox.Show("No more images to display", Me.Title, MessageBoxButton.OK, MessageBoxImage.Warning)
If m_FilesUpdated.Count <= m_FileIndex Then
m_FileIndex -= 1
Else
m_FileIndex += 1
End If
Return
End If
If m_FilesUpdated IsNot Nothing Then
MainImage.Source = m_FilesUpdated(m_FileIndex)
End If
End Sub
And the Next and Previous menu items, to navigate to Next and Previous images, I am updating the index and calling the DisplayImages() method.
Private Sub NextImageMenu_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
m_FileIndex += 1
DisplayImages()
End Sub
You can download the full source code from Image viewer source. Change the extension from .zipx to .zip
