WPF 如何仅使用 XAML 构建停靠的可调整大小的扩展器和网格？答案

【问题标题】：WPF How to build docked resizable expanders and grid using XAML only?WPF 如何仅使用 XAML 构建停靠的可调整大小的扩展器和网格？
【发布时间】：2021-04-13 12:13:10
【问题描述】：

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

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

    <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 来停靠它们，我得到了相同的结果。那么谁能告诉我如何让应用程序在每一侧都有两个扩展器，中间有一个网格，并且能够调整扩展器的大小，从而也自动调整网格的大小？

【问题讨论】：

老问题stackoverflow.com/questions/35455094/…。但从未收到答复。
您的 Width 绑定看起来很疯狂。：）请说清楚。您需要调整扩展器本身的大小还是只调整其内容？
我想调整它的内容。
为什么我的宽度绑定看起来很疯狂？默认情况下，宽度不会拉伸以适应其父扩展器，因此我必须进行这样的绑定。
1) 您设置了对只读属性的绑定，同时尝试通过更改源来对其进行操作。 2）您为父元素设置了一个锚点，该锚点始终大于其内容。内容采用父级的大小。父母因此而扩大。这再次导致内容的变化。结果是循环到无穷大。

标签： c# .net wpf xaml

【解决方案1】：

使用Grid 并将GridSplitters 放在单独的列中：

<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>

【讨论】：

在我拖动网格拆分器时使用您的代码，列正在调整大小，但列中包含的扩展器没有调整大小。我希望扩展器与它们的列一起调整大小。
最左边的是，不是吗。尝试将我的示例中的 TextBlock 替换为更广泛的内容。
不，它没有。扩展器的内容未调整大小。我实际上希望扩展器的内容（而不是标题）调整大小。这就是为什么为了调整扩展器内容的大小，我在问题的代码中将 GridSplitters 放在了扩展器中。
我不确定我是否理解。你是说扩容器不扩容？它适用于我和列 (Expander) 然后调整大小。你试过我的例子吗？
是的，我试过你的样品。它调整列的大小，但不调整扩展器的内容。见我之前的评论。我已经更新了。

【解决方案2】：

如果您需要调整扩展器内容的大小：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Expander Header="Projects" IsExpanded="True" ExpandDirection="Right" HorizontalAlignment="Left">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Button Content="Left" Padding="15 5"/>
            </Grid>
            <GridSplitter Grid.Column="1" Width="2" Background="Red" ResizeBehavior="PreviousAndCurrent"/>
        </Grid>
    </Expander>

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

    <Expander VerticalAlignment="Stretch" Header="Properties" ExpandDirection="Left" HorizontalAlignment="Right" 
                  Grid.Column="2">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <GridSplitter Grid.Column="0" Width="2" Background="Red" ResizeBehavior="CurrentAndNext"
                          HorizontalAlignment="Right"/>
            <Border Grid.Column="1" Background="Aqua" MinWidth="50"/>
        </Grid>
    </Expander>
</Grid>

【讨论】：