窗体的分割GridSplitter实现用户自定义窗体分割大小

最新推荐文章于 2021-07-09 13:59:13 发布

~忘记了时间~

最新推荐文章于 2021-07-09 13:59:13 发布

阅读量431

点赞数

分类专栏： WPF开发和晋级文章标签： wpf c#

本文链接：https://blog.csdn.net/qq_34581845/article/details/106055381

版权

WPF开发和晋级专栏收录该内容

8 篇文章 2 订阅

订阅专栏

效果1

在这里插入图片描述

前台代码：

 <Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="30*"/>
         <ColumnDefinition Width="70*"/>
     </Grid.ColumnDefinitions>
     <TextBlock>
         使用Grid面板可以很容易的将可用空间划分成单个单元格。使用行和列的定义, 又很容易控制每行或每列占据多少空间。但是，如果你想让用户来改变这些该怎么办呢？这个时候GridSplitter就出场了。
     </TextBlock>
     <GridSplitter Width="5"></GridSplitter>
     <Label Background="LemonChiffon" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Row="0" Grid.Column="1">Column2</Label>
 </Grid>

效果2

在这里插入图片描述拖动分割线划分界面占比：

前台代码：

 <Grid Background="Lavender">
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="30*"/>
         <ColumnDefinition Width="70*"/>
     </Grid.ColumnDefinitions>
     <Label Background="White" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Row="0" Grid.Column="0">使用Grid面板可以很容易的将可用空间划分成单个单元格。使用行和列的定义, 又很容易控制每行或每列占据多少空间。但是，如果你想让用户来改变这些该怎么办呢？这个时候GridSplitter就出场了。</Label>
     <GridSplitter Width="5"></GridSplitter>
     <Label FontSize="22" Foreground="Red" Width="300" Height="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="0,20,0,0" Grid.Row="0" Grid.Column="1">分割线都可用户拖动调节占比</Label>
     <Grid Grid.Row="0" Grid.Column="1">
         <Grid.RowDefinitions>
             <RowDefinition/>
             <RowDefinition/>
         </Grid.RowDefinitions>
         <Label Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="HotPink">这是分割的第二列，第一行</Label>
         <GridSplitter Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></GridSplitter>
         <Label Grid.Row="1" Grid.Column="0"  HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="HotPink">是分割的第二列，第二行</Label>
     </Grid>
 </Grid>