14

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

我在下面提到的 xaml 中做到了这一点，但是GridSplitter垂直不可见（它拆分了两列）。

我希望两个GridSplitters 都可以调整大小。一个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>
4

4 回答 4

27

将您的垂直拆分器更改为

<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>
于 2009-11-17T11:44:13.480 回答
2

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

于 2009-11-17T11:43:57.070 回答
2

您的 gridsplitter 在其他控件后面，这就是您看不到它的原因。您可以将其移动到 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>
于 2009-11-17T11:48:50.230 回答
0

我已经实现了功能，下面提到了 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>

于 2009-11-17T11:39:42.393 回答