WPF中分割条的运用

在 WPF 窗口布局中，我们经常要用到窗口的分割，这篇文章主要是介绍怎样用 GridSpliter 分割窗口

GridSpliter 主要是用在布局控件 GRID 中，指定要分割的位置，第几行，第几列就可以实现格子的分割了。

既然要做到划分总个窗体，我们需要把格子的高和宽同窗口的实际高和宽绑定在一起，以此来实现总个窗体的分割。

以下是用 XAML 写的一段分割代码：

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name ="myWnd">

<Page.Resources>

<Style TargetType ="{x:Type Border}">

<Setter Property ="BorderThickness" Value ="1"/>

<Setter Property ="BorderBrush" Value ="Black"/>

</Style>

</Page.Resources>

<!-- 首先 , 我们绑定格子的高和宽同窗口一样大 -->

<Grid Background="White"

Width ="{Binding Path=ActualWidth ,ElementName=myWnd}"

Height="{BindingPath=ActualHeight ,ElementName=myWnd}"

HorizontalAlignment="Left"

VerticalAlignment="Top"

ShowGridLines="False">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<!-- 因为分割条也是对象，要占用一行 -->

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<!-- 因为分割条也是对象，要占用一列 -->

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Border Grid.Column="0" Grid.Row="0"/>

<Border Grid.Column="0" Grid.Row="2"/>

<Border Grid.Column="2" Grid.Row="0"/>

<Border Grid.Column="2" Grid.Row="2"/>

<!-- 此处 GridSplitter 要占用三列-->

<GridSplitterGrid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"

HorizontalAlignment="Stretch"

VerticalAlignment="Center"

Height="1"

/>

<!-- 此处 GridSplitter 要占用三行 -->

<GridSplitterGrid.Row="0" Grid.Column="1" Grid.RowSpan="3"

HorizontalAlignment="Center"

VerticalAlignment="Stretch"

Width="1"

/>

</Grid>

</Page>

注意：竖直分割与水平分割时一定要区分 HorizontalAlignment ， VerticalAlignment 的设置。

2007-1-8

Paul.Peng