gridsplitter not behaving as excpected when coupled with scrollviewer and minWidth

Question

• I have a grid as background container
• this grid contains a scrollviewer so that when I resize the window Up, the content extends with it, but when I resize the window down, the scrollbar appears on the scrollviewer when I reach the minWidth on the sv's content
• this scrollviewer contains a grid with two columns
• this grid contains one scrollviewer in each column, each one containing in turn a grid.
• I have a grid splitter on the first column so that I can resize the columns

disclaimer: I know this is not the optimal way to organize this layout, but this is actually the simplest representation I found to reproduce an issue I have with a much more elaborate layout so please do not offer a solution that would reorganize the layers

here is the xaml :

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Text Project">

    <!--background grid-->
    <Grid>

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

            <!--two columns layout-->
            <Grid MinWidth="600">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Red"/>
                </ScrollViewer>

                <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="6"/>

                <ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Blue"/>
                </ScrollViewer>
            </Grid>

        </ScrollViewer>

    </Grid>

</Window>

the goal is as follow: - if I resize the window Up, everything scales - if I resize down, when I reach the minWidth, the scroolbars on the topmost scrollviewer appear and its content stops shrinking. (this part works fine) - whatever the topmost scrollviewer's size, I can resize both columns with the gridsplitter - when I reach one column's minwidth, the scrollbar appears on this column's scrollviewer and its content stops shrinking

issue: this second part never happens. What I get is that I can resize until I reach one of the two child grids's minWidth, and then the gridsplitter stops moving, I cannot shrink further and the scrollbars never appear.

I noticed that if I remove the topmost grid and its associated scrollviewer, it works as expected:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Text Project">

            <!--two columns layout-->
            <Grid MinWidth="600">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Red"/>
                </ScrollViewer>

                <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="6"/>

                <ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Blue"/>
                </ScrollViewer>
            </Grid>

</Window>

I don't understand why the fact that I put the inner grid into a scrollviewer would change the behaviour of the gridsplitter and of the inner scrollviewers, so I anybody knows of a solution, I'd be glad

Answer 1

Try binding the Width of the two column Grid to the ActualWidth of the outer ScrollViewer, like this:

<!--two columns layout-->
<Grid MinWidth="600" Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ActualWidth}">