WPF 如何仅使用 XAML 构建停靠的可调整大小的扩展器和网格? [英] WPF How to build docked resizable expanders and grid using XAML only?

问题描述

我正在尝试构建一个 wpf 应用程序，它有两个扩展器，一个在左边，另一个在右边，它们之间有网格.扩展器必须能够相应地调整自身大小，自动调整它们之间的网格大小，如下所示.

I'm trying to build a wpf application that has two expanders one on the left and other on the right and grid in between them both. The expanders must be able to resize themselves correspondingly automatically resizing the grid in between them as shown below.

在下面粘贴一些 XAML 后，我能够调整左侧扩展器的大小，但未显示右侧扩展器和网格.

With some XAML pasted below I was able to resize the left side expander but the right side expander and the grid are not shown.

    <Grid>
    <!--<Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>-->
    <DockPanel>
    <Expander DockPanel.Dock="Left" x:Name="ProjectsExpander" Header="Projects" IsExpanded="True" ExpandDirection="Right" HorizontalAlignment="Stretch">            
        <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}},Path=ActualWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="2"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
        <something here/>
            </Grid>
            <GridSplitter Grid.Column="1" Width="2" Background="{DynamicResource BorderBrush}" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Columns"/>
        </Grid>
    </Expander>

    <Grid DockPanel.Dock="Left" Background="Green" HorizontalAlignment="Center" VerticalAlignment="Stretch">
        <TextBlock Text="Test"/>
    </Grid>

    <Expander DockPanel.Dock="Right" VerticalAlignment="Stretch" Header="Properties" ExpandDirection="Left" HorizontalAlignment="Right" Width="235">
        <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}},Path=ActualWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <GridSplitter Grid.Column="0" Width="2" Background="{DynamicResource BorderBrush}" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Columns"/>
            <Border Grid.Column="1" Width="130"/>
        </Grid>
    </Expander>
    </DockPanel>
</Grid>

如您所见，我使用了 DockPanel 来停靠控件，但我曾尝试使用带有 ColumnDefinitions 的 Grid 来停靠它们，但我得到了相同的结果.那么谁能告诉我如何让应用程序在每一侧都有两个扩展器，中间有一个网格，并且能够调整扩展器的大小，从而也可以自动调整网格的大小?

As you can see I have used a DockPanel to dock the controls but I had tried to dock them using a Grid with ColumnDefinitions and I get the same result. So can anyone please tell me how can I get the application to have two expanders on each sides and a grid in between and be able to resize the expanders and thus also automatically resize the grid as well?

推荐答案

使用 Grid 并将 GridSplitter 放在单独的列中:

Use a Grid and put the GridSplitters in separate columns:

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

    <Expander x:Name="ProjectsExpander" Header="Projects" IsExpanded="True" ExpandDirection="Right">
        <TextBlock>...</TextBlock>
    </Expander>

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

    <Grid Grid.Column="2" Background="Yellow">
        <TextBlock>...</TextBlock>
    </Grid>

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

    <Expander Grid.Column="4" Header="Properties" ExpandDirection="Left" HorizontalAlignment="Right" Width="235">
        <TextBlock>...</TextBlock>
    </Expander>
</Grid> 

这篇关于WPF 如何仅使用 XAML 构建停靠的可调整大小的扩展器和网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！