This is a part of the WPF image viewer tutorial: Introduction, Part 1, Part2, Part 3 and Part 4.
In this part where going to organize our application layout, currently our entire application window just contains a list box full of images, it was easier to do then with WinForms but that doesn't make it very useful.
The WPF controls that can contain multiple children and arrange them are called panels, WPF has several useful panels we can use, in this post we'll use the StackPanel and DockPanel panels.
StackPanel
The StackPanel is probably the simplest panel in WPF, it just arranges all its children one after the other, let's use it to add the file name below each image in our application.
Find the data template we use for the list box:
<DataTemplate x:Key="MyImageTemplate">
<Image Source="{Binding Image}" Width="100" Height="100"/>
</DataTemplate>
And replace it with:
<DataTemplate x:Key="MyImageTemplate">
<StackPanel>
<Image
Source="{Binding Image}" Width="100" Height="100"/>
<TextBlock Text="{Binding Name}" Width="100"/>
</StackPanel>
</DataTemplate>
It's obvious what we did, we moved out image control inside a StackPanel and add a TextBlock with the file name below it.
By default StackPanel arranges all children in a column, if we want to arrange them in a row we can add Orientation="Horizontal" to the StackPanel element.
DockPanel
DockPanel "docks" it's children to the sides, let's use it, Find the grid visual studio added for use and the list box we placed inside it:
<Grid>
<ListBox ItemsSource="{Binding AllImages}" ItemTemplate="{StaticResource MyImageTemplate}" />
</Grid>
And replace it with:
<DockPanel>
<ListBox
DockPanel.Dock="Left"
ItemsSource="{Binding AllImages}"
ItemTemplate="{StaticResource MyImageTemplate}" />
<Rectangle Fill="Red" DockPanel.Dock="Bottom" Height="20"/>
<Rectangle Fill="Blue"/>
</DockPanel>
We changed the Grid to a DockPanel and added two rectangles, those rectangles are placeholders, we're going to replace them with more interesting controls later.
You can see we did something very strange, we set a property of DockPanel on its children, this is called "Attached Properties" and it translates to a call to the static DockPanel.SetDock method.
If you run the program you will see our list box now fills only the left side of the window with a thin red rectangle at the bottom and a blue rectangle filling the remaining space (the last child of a DockPanel fills all the remaining space, unless you change the LastChildFill property)
In the next post we'll replace the blue rectangle with a large version of the current image from the list box.
posted @ Sunday, September 16, 2007 4:39 PM