You learn the StackPanel in
previous article. this article explain you the next category of Layout Panels:
Any single layout container is not
enough to assemble a complete window you need to work with all layout container
together. So, the next layout containers are WrapPanel and DockPanel which you
have to use with the StackPanel.
WrapPanel: The WrapPanal
wrap all the child elements to new lines or column at a time if no space is
left, "wrapping" it similar to the way text may be wrapeed. WrapPanel has an
orientation property that can be set to Horizontal(default) or Vertical.
Example: Create a window, which contain
five horizontal child buttons(the default).
The code you need to write is:
<Window
x:Class="Layout.SimpleStack"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Layout"
Height="223"
Width="354"
>
<WrapPanel>
<Button
Content="MANISHu" />
<Button
Content="RAHUL" />
<Button
Content="RAJ" />
<Button
Content="RAVI" />
<Button
Content="SANJAY" />
<Button
Content="GOPAL" />
<Button
Content="KARAN" />
<Button
Content="JASSI" />
</WrapPanel>
</Window>
Output window
Example: By switching the orientation
property to vertical see the output of above code.
The code you need to write is:
<Window
x:Class="Layout.SimpleStack"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Layout"
Height="223"
Width="354"
>
<WrapPanel
Orientation="Vertical">
<Button
Content="MANISHu" />
<Button
Content="RAHUL" />
<Button
Content="RAJ" />
<Button
Content="RAVI" />
<Button
Content="SANJAY" />
<Button
Content="GOPAL" />
<Button
Content="KARAN" />
<Button
Content="JASSI" />
</WrapPanel>
</Window>
Output window
DockPanel: DockPanel is the
third layout panel by using them you can easily dock the elements to the left,
right, top, bottom or center of the panel. You have to define the side for the
element which you want to dock according to the requirement and for this purpose
WPF provides a attached property "DockPanel.Dock". For example, if you dock a
button to the top of a DockPanel, it's stretched across the entire width of the
DockPanel but given whatever height it requires (based on the content and the
MinHeight property). On the other hand, if you dock a button to the left side of
a container, its height is stretched to fit the container, but its width is free
to grow as needed.
Example: Create a window,
which contain one button on every side of a DockPanel.
The code you need to write is:
<Window
x:Class="Layout.SimpleStack"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Layout"
Height="223"
Width="354"
>
<DockPanel
LastChildFill="True">
<Button
DockPanel.Dock="Top">Top</Button>
<Button
DockPanel.Dock="Bottom">Bottom</Button>
<Button
DockPanel.Dock="Left">Left</Button>
<Button
DockPanel.Dock="Right">Right</Button>
<Button>Center</Button>
</DockPanel>
</Window>
Output window
Conclusion
I hope this part of my article
helps you to clearing WrapPanel and DockPanel concept. Next part is about the
Grid.