AvalonDock 的动态水平/垂直分割变化 [英] Dynamic horizontal/vertical split change with AvalonDock

问题描述

我的界面上有两个区域(使用 WPF)要拆分.还有一个按钮可以在水平和垂直分割之间切换.我正在使用 AvalonDock.当我在运行之前更改代码中的 Orientation 参数时，一切正常.

I have two areas on my interface (using WPF) that I want to be splitted. And a button to change between horisontal and vertical split. I'm using AvalonDock. When I change Orientation parameter in code before running it all works.

    <ad:DockingManager Grid.Row="1">
        <ad:LayoutRoot>
            <ad:LayoutPanel x:Name="LayoutPanel1" Orientation="Vertical" IsMaximized="True">
                <ad:LayoutDocumentPane x:Name="DocPane1" ShowHeader="True">
                    <ad:LayoutDocument Title="Spectrogram" CanClose="False" CanFloat="False">
                        <wpf:CartesianChart Series="{Binding MySeries}"  Zoom="X"/>
                    </ad:LayoutDocument>
                </ad:LayoutDocumentPane>
                <ad:LayoutDocumentPane x:Name="DocPane2"  ShowHeader="True">
                    <ad:LayoutDocument Title="Table" CanClose="False" CanFloat="False">
                        <TextBox Name="textbox1" />
                    </ad:LayoutDocument>
                </ad:LayoutDocumentPane>
            </ad:LayoutPanel>
        </ad:LayoutRoot>
    </ad:DockingManager>

但单击此处不会更改按钮.什么也没发生，但是当我尝试拖动留在原位的拆分器时，程序崩溃了.

But it doesn't change on a button click here. Nothing happens but when I try dragging the splitter which remained in place the program crashes.

    private void OnChangeView(object sender, RoutedEventArgs e)
    {
        if (LayoutPanel1.Orientation == Orientation.Vertical) {
            LayoutPanel1.Orientation = Orientation.Horizontal;
        } else {
            LayoutPanel1.Orientation = Orientation.Vertical;
        }
    }

我调试了它，属性本身发生了变化.不知道是什么问题...或者，也许您知道实现这一点的更好方法，但我以后可能也需要 AvalonDock.

I debugged it, the property itself changes. Don't know what the problem is... Or maybe you know a better way to implement this, but I might need AvalonDock later too.

推荐答案

我没有研究过 AvalonDock，但如果您只需要一个可更改的 GridSplitter，我会建议以下内容:

I have not looked into AvalonDock, but if you just need a changeable GridSplitter, I would suggest the following:

<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.以及背后的代码:

Where BoolConverter is an IValueConverter. And the code behind:

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

这篇关于AvalonDock 的动态水平/垂直分割变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！