A GridSplitter is a divider which divides a Grid into two Section. GridSplitter allows us to resize rows or columns in a Grid by dragging the GridSplitter Bar. One of the example of GridSplitter you have seen in Windows Explorer.
Let's Begin:
Adding a Vertical GridSplitter in a Grid:
In this Example, I have added three columns. Out of three Columns, I have added GridSplitter in 2nd Column. I set width of 2nd column as auto so that 2nd columns is sized automatically to fit the GridSplitter. I am using the entire column for placing the GridSplitter which is the best way for placing the Splitter in a Grid. We can also place the Splitter within the column containig some content. For creating a vertical Splitter, set VerticalAlignment property to stretch and HorizontalAlignment property of GridSplitter to Center (for creating Horizontal Splitter set VerticalAlignment property to Center and HorizontalAlignment property of GridSplitter to stretch). Set width and background color property of GridSplitter.
Adding a Vertical GridSplitter in a Grid:
In this Example, I have added three columns. Out of three Columns, I have added GridSplitter in 2nd Column. I set width of 2nd column as auto so that 2nd columns is sized automatically to fit the GridSplitter. I am using the entire column for placing the GridSplitter which is the best way for placing the Splitter in a Grid. We can also place the Splitter within the column containig some content. For creating a vertical Splitter, set VerticalAlignment property to stretch and HorizontalAlignment property of GridSplitter to Center (for creating Horizontal Splitter set VerticalAlignment property to Center and HorizontalAlignment property of GridSplitter to stretch). Set width and background color property of GridSplitter.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Some Text
here" FontSize="16" Margin="10"
TextWrapping="Wrap"></TextBlock>
<TextBlock Text="Some Text
here" FontSize="16" Margin="10"
TextWrapping="Wrap"></TextBlock>
<TextBlock Text="Some Text
here" FontSize="16" Margin="10"
TextWrapping="Wrap"></TextBlock>
<TextBlock Text="Some Text
here" FontSize="16" Margin="10"
TextWrapping="Wrap"></TextBlock>
</StackPanel>
<TextBlock Text="Some Text
here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text
here.Some Text here.Some Text here.Some Text here" Grid.Column="2" TextWrapping="Wrap" FontSize="16" Margin="10"></TextBlock>
<GridSplitter HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Grid.Column="1"
Width="5" Background="Silver">
</GridSplitter>
</Grid>
|
Preview:
GridSplitters in Nested Grid:
For showing this, I have added 3 columns in Grid and place GridSplitter in the 2nd Column. In 1st column, I have added Grid with three Rows and place GridSplitter in the 2nd row.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--Creating Sub-Grid in Column 0-->
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Content="Button1" Grid.Row="0"></Button>
<Button Content="Button2" Grid.Row="2"></Button>
<GridSplitter HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Grid.Row="1" Height="4" Background="Green">
</GridSplitter>
</Grid>
<!--Creating Sub-Grid in Column 2-->
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Content="Button3" Grid.Row="0"></Button>
<Button Content="Button4" Grid.Row="1"></Button>
</Grid>
<GridSplitter HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Grid.Column="1" Grid.Row="0"
Grid.RowSpan="3" Width="4" Background="Black">
</GridSplitter>
</Grid>
|
Preview:
ShowsPreview property of GridSplitter:
When we set Show Preview property to true, a preview of change in row or column size is shown and size of row or column changes when the GridSplitter is released. On setting ShowPreview property as false, Size of row and column updates in real time on dragging the GridSplitter.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Some Text
Here.Some Text Here.Some Text Here.Some Text Here." FontSize="16" TextWrapping="Wrap" Grid.Column="0" Margin="10"></TextBlock>
<TextBlock Text="Some Text
Here.Some Text Here.Some Text Here.Some Text Here." FontSize="16" TextWrapping="Wrap" Grid.Column="2" Margin="10"></TextBlock>
<GridSplitter HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="4" Background="Gray" Grid.Column="1" ShowsPreview="True"></GridSplitter>
</Grid>
|
Preview:
Hope you like it. Thanks.
[Download Source Code via Google Drive]
Other Related Articles:
0 comments:
Post a Comment