Silverlight: GridSplitter inside ScrollViewer behaving unexpectedly

I'm trying to build a two-column layout where the width of the columns can be changed by using a splitter. The right column's width shouldn't change when the browser window i开发者_如何学Cs resized (it shouldn't be proportional to the grid width). Both columns should have a minimum width. When the browser window is too narrow to display both columns a scrollbar should appear.

This is my XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

The problem I'm having is when the splitter is dragged to the left and the left column's minwidth is reached - the right column begins to grow very rapidly and the scrollbar appears. Removing the width setting from the right column eliminates the weird behavior but now the right column starts to grow proportionally when the window is resized...

I'd like the splitter to behave the same way as when it is dragged to the right - I'd like it to stop after the minwidth is reached.

You should disable the "HorizontalScrollBarVisibility". This code works for me:

 <Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

The ScrollViewer gives the grid endless space to grow. Hence the minWidth never stops it. Obviously there is no need of ScrollViewer that is disabled both vertically and horizontally. Better move the scroll bar inside the grid surrounding the content of every column.

I think I was finally able to come up with a workaround. I'm forcing the width in the code-behind when the layout is changing.

XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid x:Name="Workspace" Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top" LayoutUpdated="Workspace_LayoutUpdated">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

Code behind:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Workspace_LayoutUpdated(object sender, EventArgs e)
    {
        Workspace.Width = Scroller.ViewportWidth - 1;
    }

}

The reason it behaves this way is that you have specified the first column Width="300*" with asterisks, and the third column Width="100" without asterisks.

Just put asterisks to the first and third columns, or remove respectively, and it will work the way you wish.