WPF教程(三十二)GridSplitter分割线

2016-11-07 21:49:00来源:CSDN作者:seanbei人点击

第七城市

在前面的章节你已经学到,使用Grid面板可以很容易的将可用空间划分成单个单元格。使用行和列的定义,又很容易控制每行或每列占据多少空间。但是,如果你想让用户来改变这些该怎么办呢?这个时候GridSplitter就出场了。

GridSplitter使用起来非常简单,把它加到Grid里的某一行或者某一列,再分配合适的空间如5个像素这样就可以了。它允许用户从左边到右边,从上到下进行拖拽,这样就改变了行或列的尺寸。来看例子:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="GridSplitterSample" Height="300" Width="300">    <Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*" />            <ColumnDefinition Width="5" />            <ColumnDefinition Width="*" />        </Grid.ColumnDefinitions>        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>    </Grid></Window>
A Grid panel with a GridSplitter control
A Grid panel with a GridSplitter control in action

从上面可以看到,我创建了一个Grid,里面包含了两个等宽的列,以及中间5个像素的列。两边都放了一个TextBlock控件来例证这个问题。截图中就能看到,GridSplitter犹如一条分割线,把两边的列隔开了。一旦鼠标划到上面,就会改变形状,告诉你可以改变尺寸。

水平的GridSplitter

GridSplitter使用非常简单,当然也支持水平方向的分割。实际上,和垂直分割相比,你几乎不用做什么改变就能实现水平分割,就如下面的例子演示的:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="GridSplitterHorizontalSample" Height="300" Width="300">    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="*" />            <RowDefinition Height="5" />            <RowDefinition Height="*" />        </Grid.RowDefinitions>        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>    </Grid></Window>
A horizontal Grid panel with a GridSplitter control in action
上面,我只是把列改成了行,然后在GridSplitter里面把列宽改成了行高。GridSplitter自动调整剩余的工作,但为了保险起见,你也可以使用ResizeDirection属性来强制规定行模式或者列模式。

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台