Dynamic horizontal/vertical split change with AvalonDock

Question

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

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.

Answer 1

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>

Where BoolConverter is an IValueConverter. And the code behind:

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