The following XAML creates two GridSplitter controls, one vertical and one horizontal. The horizontal control shows a preview, whereas the vertical one does not.
|
<UserControl x:Class="GridSplitterExample.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:swc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="450"
Height="500"
>
<Canvas x:Name="LayoutRoot" Background="White" >
<TextBlock Text="GridSplitter Demonstration" Margin="0,20,10,20"
FontFamily="Verdana" FontSize="18" FontWeight="Bold"
Foreground="#FF5C9AC9" Canvas.Top="0" Canvas.Left="20"/>
<Grid ShowGridLines="True" Canvas.Top="60" Canvas.Left="20" Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="One!" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Two!" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Three!" Grid.Row="2" Grid.Column="2" />
<TextBlock Text="Four!" Grid.Row="3" Grid.Column="3" />
<swc:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"
ShowsPreview="True"
/>
<swc:GridSplitter Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"
Width="5" HorizontalAlignment="Left" VerticalAlignment="Stretch"
/>
</Grid>
</Canvas>
</UserControl>
|
Run this sample
The previous example produces output that is similar to the following illustration. A grid is shown before and after a GridSplitter is used to redistribute space.