GridSplitters – Part 3: Limiting the Range of a GridSplitter

Sometimes I look at what people search for when they hit my blog and see some trending questions that don’t seem to have easily findable answers. This one seems to be related to how to set the limit for moving a GridSplitter… Well – you don’t actually touch the GridSplitter to do that. You need to modify your RowDefinition or ColumnDefinition. In a similar way that you can define MinWidth/MaxWidth/MinHeight/MaxHeight on any FrameworkElement – you can do MinWidth/MaxWidth on a ColumnDefinition and MinHeight/MaxHeight on a RowDefinition. By setting these – you limit how much the GridSplitter will be able to resize them. I actually take these into account in my SimpleGridSplitter implementation, so if you have lots of rows or columns in your WPF app – you can use that one. Silverlight works fine there with its own GridSplitter.

Sample code

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition
            MinWidth="20"
            MaxWidth="40"/>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition
            MinHeight="20"
            MaxHeight="40"/>

Windows Phone/WinRT

There is no GridSplitter on Windows Phone or in WinRT. I checked what MinWidth/MaxWidth do then (on Windows Phone and in WinRT) on a column with Width=”Auto” with variable size content and it seemed like while MinWidth did work to keep the column a given size – the column did stretch beyond MaxWidth, although the documentation says: “the MinWidth value takes precedence over the MaxWidth value, which in turn takes precedence over the Width value”.

Test Code (WPF/Silverlight/WinRT)

<Grid
    Background="#FF0C0C0C">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition
            Height="Auto" />
        <RowDefinition
            Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition
            Width="Auto"
            MinWidth="20"
            MaxWidth="60" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Rectangle
        VerticalAlignment="Top"
        Height="50"
        HorizontalAlignment="Stretch"
        Fill="Yellow"
        Opacity="0.5"
        Stroke="Blue"
        StrokeThickness="1" />

    <Rectangle
        Grid.Column="1"
        VerticalAlignment="Top"
        Height="50"
        HorizontalAlignment="Stretch"
        Fill="Red"
        Opacity="0.5"
        Stroke="White"
        StrokeThickness="1" />

    <Rectangle
        Width="{Binding Value, ElementName=slider}"
        Height="{Binding Value, ElementName=slider}"
        Fill="Yellow"
        Opacity="0.5"
        Stroke="Blue"
        StrokeThickness="1" />
    <Rectangle
        Grid.Column="1"
        Width="{Binding Value, ElementName=slider2}"
        Height="{Binding Value, ElementName=slider2}"
        Fill="Red"
        Opacity="0.5"
        Stroke="White"
        StrokeThickness="1" />
    <Slider
        x:Name="slider"
        Margin="0,10"
        Grid.Row="1"
        Grid.ColumnSpan="2"
        Minimum="0"
        Maximum="100" />
    <Slider
        x:Name="slider2"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Minimum="0"
        Maximum="100" />
</Grid>

Previous posts on GridSplitters

Advertisements
Tagged , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: