天天看點

WPF中Grid(網格)的GridSplitter(網格分割)

如果在WPF中的Grid中加入GridSplitter(網格分割條),以下是最佳實踐。

  • 配置設定整個一行或者一列給分割條,并把行高或者列寬設定為Auto
  • 使用Grid.RowSpan或者Grid.ColumnSpan以讓它撐滿這個網格的全高或者全寬
  • 為了使分割條看得更能清楚
    1. 設定它的寬度或者高度為一些足以看到的值,例如5
    2. 設定這個GridSplitter的Background屬性為更顯眼的顔色
  • 設定這個GridSplitter的VerticalAlignment和HorizontalAlignment屬性(這個是容易忽略的一點)
  1. VerticalSplitter: VerticalAlignment=Stretch, HorizontalAlignment=Center
  2. HorizontalSplitter: VerticalAlignment=Center, HorizontalAlignment=Stretch

執行個體代碼:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
 
        <Button Margin="5">Button 1</Button>
        <Button Grid.Row="0"
                Grid.Column="2"
                Margin="5">Button 2</Button>
        <Button Grid.Row="2"
                Grid.Column="0"
                Margin="5">Button 3</Button>
        <Button Grid.Row="2"
                Grid.Column="2"
                Margin="5">Button 4</Button>
 
        <GridSplitter Grid.Row="1"
                      Grid.Column="0"
                      Grid.ColumnSpan="3"
                      Height="5"
                      Background="Red"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Center" />
 
        <GridSplitter Grid.Row="0"
                      Grid.Column="1"
                      Grid.RowSpan="3"
                      Width="5"
                      Background="Blue"
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Center" />
    </Grid>
</Window>      

分割效果展示:

WPF中Grid(網格)的GridSplitter(網格分割)
WPF中Grid(網格)的GridSplitter(網格分割)
WPF中Grid(網格)的GridSplitter(網格分割)

繼續閱讀