Silverlight: GridSplitter inside ScrollViewer behaving unexpectedly

0
votes

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 is 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.

3
silverlightscrollviewergridsplitter
Curious behavior... however when set the third column's width to 100* it stopped growing. By the way, ¿why did you put the Grid inside the ScrollViewer? - NestorArturo
@NestorArturo - setting the width to 100* makes the third column proportional, which is not the behavior I need. I put a grid inside the scrollviewer so that when the browser window is resized to be narrower than the minimum width of the grid - a horizontal scrollbar is displayed and the UI is still usable. - boris
@NestorArturo - Defining the column widths with no "*" stops the grid from stretching to the available width of the screen. I'd like the grid to occupy all of the available horizontal real estate. - boris

3 Answers

0
votes

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.

0
votes

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

}
0
votes

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.