WPF switch between horizontal and vertical split

Question

Can you suggest a good way to make a switch between horizontal and vertical split in wpf? I have two areas in my interface. Want them to be divided by a draggable separator and to have a button to switch between horisontal and vertical split. I tried to do that with AvalonDock, but for some reason that didn't work. Here's my question on it, nobody answered yet. prev. question

Maybe another library, or a simple way of doing that with standard GridSplitter?

Please do not ask the same question multiple times. Besides that, asking for recommendations for a library are off-topic on StackOverflow. — Clemens, Jan 21 '17 at 17:29
@Clemens It's not the same question. Previous one was about a certain mistake I had. Since no one knows how to solve that, I asked about other method of making that. — Ivan Vishnevskiy, Jan 21 '17 at 17:36

zambonee · Answer 1 · 2017-08-24T19:03:12.950

I just ran into a similar problem. Here is how I solved it, thanks to some good ideas 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>

Where BoolConverter is an IValueConverter. And the code behind:

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

score 0 · Accepted Answer · answered Jan 22 '17 at 15:09

I don't know of any reasonably clean way to redefine grid rows and columns of a grid at runtime. You would need some code that redefines the RowDefinitions and ColumnDefinitions, as well as possibly updating Grid.Row and Grid.Column attached properties of the children of the grid. I am not sure how well a grid responds to such a reconfiguration. You might need to invalidate some things manually. I suspect the library you tried to use did not implement all of the steps necessary to reconfigure the grid, or perhaps they tried and found that it did not work.

However, it should be relatively straightforward to swap out one preconfigured grid for another. Put both grids in the same place and set the visibility of the one not currently in use to collapsed.

WPF switch between horizontal and vertical split

2 Answers2