WPF 中的网格拆分器问题

Question

我想要一个像 VS 2008 这样的布局。其中我想要两列，第二列再次分成两列。

我在下面提到的 xaml 中完成了此操作，但是 GridSplitter 垂直不可见（它分割了两列）。

我希望 GridSplitter 都可以调整大小。一个 GridSplitter 调整左侧窗格和右侧窗格的大小，另一个 GridSplitter 调整子网格顶部窗格和右侧窗格的大小。

第二个 GridSplitter 正在工作通过此 XAML，但我无法生成拆分右侧窗格和左侧窗格的 XAML 代码。 请帮助！

<Window x:Class="AlarmUI_2.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Background="Aqua" Grid.Column="0" >
            <TextBlock FontSize="35" Foreground="#58290A" 
                       TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Grid.Column="0" ResizeDirection="Auto" 
                      Grid.RowSpan="1" 
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Center"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>            
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <ListBox Grid.Row="0" Background="Red">
                <ListBoxItem>Hello</ListBoxItem>
                <ListBoxItem>World</ListBoxItem>
            </ListBox>
            <GridSplitter Grid.Row="1" Height="5" Background="Gray"
                          VerticalAlignment="Top" HorizontalAlignment="Stretch" />
            <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
                <ListBoxItem>Hello</ListBoxItem>
                <ListBoxItem>World</ListBoxItem>
            </ListBox>
        </Grid>
    </Grid>
</Window>

Answer 1

将垂直 Splitter 更改为

<GridSplitter Grid.Column="0" Width="5" ResizeDirection="Auto" 
            Grid.RowSpan="1" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Stretch"/>

这将是使用 GridSplitter 的更好方法

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
           TextWrapping="Wrap">Left Hand Side</TextBlock>


    </StackPanel>

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>

    <Grid Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Background="Red">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
        <GridSplitter Grid.Row="1" Background="Gray" HorizontalAlignment="Stretch"/>
        <ListBox Grid.Row="2" Background="Violet">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
    </Grid>
</Grid>

Answer 2

GridSplitters 可能应该位于网格中自己的行/列上，而不是与其他控件共享单元格。

Answer 3

您的网格分割器位于其他控件的后面，这就是您看不到它的原因。您可以将其移至 XAML 文件的底部（以便最后添加）或使用 Panel.ZIndex 附加属性。此外，您必须正确设置分割器的宽度：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
           TextWrapping="Wrap">Left Hand Side</TextBlock>
    </StackPanel>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Background="Red">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
        <GridSplitter Grid.Row="1" Height="5" Background="Gray"
              VerticalAlignment="Top" HorizontalAlignment="Stretch" />
        <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
            <ListBoxItem>Hello</ListBoxItem>
            <ListBoxItem>World</ListBoxItem>
        </ListBox>
    </Grid>
    <GridSplitter Grid.Column="0" ResizeDirection="Columns" 
            Grid.RowSpan="1" Width="5"
            HorizontalAlignment="Right"/>
</Grid>

Answer 4

我已经实现了该功能，XAML如下：

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Background="Aqua" Grid.Column="0" >
        <TextBlock FontSize="35" Foreground="#58290A" 
               TextWrapping="Wrap">Left Hand Side</TextBlock>


    </StackPanel>


    <GridSplitter HorizontalAlignment="Right" ResizeDirection="Columns"  Width="5" />

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>            
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>




    <ListBox Grid.Row="0" Background="Red">
        <ListBoxItem>Hello</ListBoxItem>
        <ListBoxItem>World</ListBoxItem>
    </ListBox>
    <GridSplitter Grid.Row="1" Height="5" Background="Gray"
                  VerticalAlignment="Top" HorizontalAlignment="Stretch" />
    <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
        <ListBoxItem>Hello</ListBoxItem>
        <ListBoxItem>World</ListBoxItem>
    </ListBox>
        </Grid>
</Grid>