WPF 在水平和垂直拆分之间切换答案

【问题标题】：WPF switch between horizontal and vertical splitWPF 在水平和垂直拆分之间切换
【发布时间】：2017-06-06 12:45:18
【问题描述】：

您能否建议一种在 wpf 中在水平和垂直拆分之间进行切换的好方法？我的界面中有两个区域。希望它们被可拖动的分隔符分割，并有一个按钮在水平和垂直分割之间切换。我试图用 AvalonDock 做到这一点，但由于某种原因，它不起作用。这是我的问题，还没有人回答。 prev. question

也许是另一个库，或者是使用标准 GridSplitter 的简单方法？

【问题讨论】：

请不要多次问同一个问题。除此之外，在 StackOverflow 上向图书馆寻求建议是题外话。
@Clemens 这不是同一个问题。上一个是关于我犯的某个错误。由于没有人知道如何解决这个问题，我问了其他方法。

标签： c# wpf user-interface layout

【解决方案1】：

我刚刚遇到了类似的问题。这是我解决它的方法，感谢here的一些好主意：

<ContentControl>
    <ContentControl.Resources>
        <BoolConverter x:Key="BoolToLayoutConverter" TrueValue="templateHorizontal" FalseValue="templateVertical"/>
        <BoolConverter x:Key="BoolToLayoutCharacterConverter" TrueValue="—" FalseValue="|"/>
        <DataTemplate x:Key="mainTable">
            <StackPanel>
                <Label Content="MainTable goes here"/>
                <ToggleButton Content="{Binding LayoutHorizontal, Converter={StaticResource BoolToLayoutCharacterConverter}}" 
                        IsChecked="{Binding LayoutHorizontal}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="childTables">
            <Label Content="ChildTables go here"/>
        </DataTemplate>
    </ContentControl.Resources>
    <ContentControl.Style>
       <Style TargetType="ContentControl">
            <Style.Triggers>
                <DataTrigger Binding="{Binding LayoutHorizontal}" Value="False">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                   <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="10"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" ContentTemplate="{StaticResource mainTable}"/>
                                    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                    <ContentPresenter Grid.Column="2" ContentTemplate="{StaticResource childTables}"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding LayoutHorizontal}" Value="True">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition Height="5"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <ContentPresenter Grid.Row="0" ContentTemplate="{StaticResource mainTable}"/>
                                    <GridSplitter Grid.Row="1" Height="10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                    <ContentPresenter Grid.Row="2" ContentTemplate="{StaticResource childTables}"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

其中 BoolConverter 是一个 IValueConverter。以及背后的代码：

private bool _layoutHorizontal = true;
public bool LayoutHorizontal
{
    get { return _layoutHorizontal; }
    set
    {
        _layoutHorizontal = value;
        NotifyPropertyChanged();
    }
}

【讨论】：

【解决方案2】：

我不知道在运行时重新定义网格的网格行和列的任何合理干净的方法。您将需要一些代码来重新定义 RowDefinitions 和 ColumnDefinitions，以及可能更新网格子项的 Grid.Row 和 Grid.Column 附加属性。我不确定网格对这种重新配置的反应如何。您可能需要手动使某些内容无效。我怀疑您尝试使用的库没有实现重新配置网格所需的所有步骤，或者他们尝试并发现它不起作用。

但是，将一个预先配置的网格换成另一个网格应该相对简单。将两个网格放在同一个位置，并将当前未使用的网格的可见性设置为折叠。

【讨论】：