[WPF] layout using grid and gridsplitter

Preface

 

When developing applications, a very important task is to design the layout of the user interface. The Grid Control Plane provided in WPF allows developers to split the layout into two columns and submit them to the table region. After developers use grid to control the layout, they can also add gridsplitter to control the layout, it is used to provide the user's ability to dynamically adjust the entire table region size during the processing time.

 

This article describes how to use grid to control layout and gridsplitter to design a common layout, I also hope to help developers who need it.

 

Local Communications Administration

 

 

The upstream architecture is similar to the upstream architecture. The msdn website uses this architecture to provide various types of information content.

 

 

<!--Definition--><Grid.RowDefinitions >    <RowDefinition Height="192" />    <RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions >    <ColumnDefinition Width="256" />    <ColumnDefinition /></Grid.ColumnDefinitions><!--Panel--><Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.ColumnSpan="2" /><!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon"   />--><Border Grid.Row="1" Grid.Column="0" Background="LightYellow" /><Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

 

The layout can be divided into 2 rows and 2 columns Based on Grid Control, and two rows in the 0th column are merged.

 

 

<!--Splitter--><GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" /><GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent"                     HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />

 

Add the gridsplitter Control Handler:
* Add a fixed value grid to the lower part of column 0th and table region 0th. the gridsplitter of columnspan = "2" controls the region to provide the ability to dynamically adjust the heights of the upper and lower table areas.
* In columns 1st and 0th, add a gridsplitter to the right of the table region to provide the ability to dynamically adjust the degree of region between the left and right tables.

 

 

<Window x:Class="MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow" Width="1024" Height="768">    <Grid>        <!--Definition-->        <Grid.RowDefinitions >            <RowDefinition Height="192" />            <RowDefinition />        </Grid.RowDefinitions>        <Grid.ColumnDefinitions >            <ColumnDefinition Width="256" />            <ColumnDefinition />        </Grid.ColumnDefinitions>        <!--Panel-->        <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.ColumnSpan="2" />        <!--<Border Grid.Row="0" Grid.Column="1" Background="LightSalmon"   />-->        <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />        <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />        <!--Splitter-->        <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />        <GridSplitter Grid.Row="1" Grid.Column="0" Background="Transparent"                     HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />    </Grid></Window>

 

After adding these grid control lists and gridsplitter control lists, remember to define the background colors of gridsplitter control lists as transparent colors (background = "Transparent "), it is used to provide a beautiful layout.

 

One left, two right

 

 

The upper-right corner is a dynamic structure. Outlook uses this layout to provide various types of content.

 

 

<!--Definition--><Grid.RowDefinitions >    <RowDefinition />    <RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions >    <ColumnDefinition Width="256" />    <ColumnDefinition /></Grid.ColumnDefinitions><!--Panel--><Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.RowSpan="2"/><Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" /><!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />--><Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

 

The layout can be divided into 2 rows and 2 columns Based on Grid Control, and the two columns in the 0th rows are combined.

 

 

<!--Splitter--><GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  /><GridSplitter Grid.Row="0" Grid.Column="1" Background="Transparent"                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />

 

Add the gridsplitter Control Handler:
* Add a fixed value grid to the right of the 0th columns and 0th rows table. the gridsplitter of rowspan = "2" controls parallelism to provide the ability to dynamically adjust the degree of parallelism in the left and right table regions.
* A gridsplitter control plane is attached to the lower part of the 0th columns and 1st rows table area to provide the function of dynamically adjusting the area height of the two tables on the right.

 

 

<Window x:Class="MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow" Width="1024" Height="768">    <Grid>        <!--Definition-->        <Grid.RowDefinitions >            <RowDefinition />            <RowDefinition />        </Grid.RowDefinitions>        <Grid.ColumnDefinitions >            <ColumnDefinition Width="256" />            <ColumnDefinition />        </Grid.ColumnDefinitions>        <!--Panel-->        <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  Grid.RowSpan="2"/>        <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />        <!--<Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />-->        <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />        <!--Splitter-->        <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />        <GridSplitter Grid.Row="0" Grid.Column="1" Background="Transparent"                  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />    </Grid></Window>

 

After adding these grid control lists and gridsplitter control lists, remember to define the background colors of gridsplitter control lists as transparent colors (background = "Transparent "), it is used to provide a beautiful layout.

 

Four separate communications administrations

 

 

The upper layer is a four-separated geographic structure, which is used by e-mapreduce to provide various types of data content.

 

 

<!--Definition--><Grid.RowDefinitions >    <RowDefinition />    <RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions >    <ColumnDefinition />    <ColumnDefinition /></Grid.ColumnDefinitions><!--Panel--><Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  /><Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" /><Border Grid.Row="1" Grid.Column="0" Background="LightYellow" /><Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />

 

The layout can be divided into two rows and two columns through grid control.

 

<!--Splitter--><GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" /><GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2"    HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />

 

Add the gridsplitter Control Handler:
* Add a fixed value grid to the lower part of column 0th and table region 0th. the gridsplitter of columnspan = "2" controls the region to provide the ability to dynamically adjust the heights of the upper and lower table areas.
* Add a fixed value grid to the right of the 0th columns and 0th rows table. the gridsplitter of rowspan = "2" controls parallelism to provide the ability to dynamically adjust the degree of parallelism in the left and right table regions.

 

 

<Window x:Class="MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow" Width="1024" Height="768">    <Grid>        <!--Definition-->        <Grid.RowDefinitions >            <RowDefinition />            <RowDefinition />        </Grid.RowDefinitions>        <Grid.ColumnDefinitions >            <ColumnDefinition />            <ColumnDefinition />        </Grid.ColumnDefinitions>        <!--Panel-->        <Border Grid.Row="0" Grid.Column="0" Background="LightCoral"  />        <Border Grid.Row="0" Grid.Column="1" Background="LightSalmon" />        <Border Grid.Row="1" Grid.Column="0" Background="LightYellow" />        <Border Grid.Row="1" Grid.Column="1" Background="LightGreen"  />        <!--Splitter-->        <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  Height="5" />        <GridSplitter Grid.Row="0" Grid.Column="0" Background="Transparent" Grid.RowSpan="2"    HorizontalAlignment="Right"   VerticalAlignment="Stretch" Width="5"  />    </Grid></Window>

 

After adding these grid control lists and gridsplitter control lists, remember to define the background colors of gridsplitter control lists as transparent colors (background = "Transparent "), it is used to provide a beautiful layout.

 

Original shard

 

Click here to export the original metadata: gridlayoutsample.rar