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="{Binding Path=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 要占用三列-->

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

                     HorizontalAlignment="Stretch"

                     VerticalAlignment="Center"

                     Height="1"

                   />

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

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

                 HorizontalAlignment="Center"

                 VerticalAlignment="Stretch"

                 Width="1"

                   />

 

</Grid>

</Page>

 

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

 

                                                                                                         2007-1-8

                                                                                                                     Paul.Peng