#466 – Using a GridSplitter in Conjunction with a SharedSizeGroup

A GridSplitter allows a user to change the size of a row or column by dragging a visual splitter.  A SharedSizeGroup allows two rows or columns to automatically have the same size.  You can combine these concepts, allowing a user to change the size of one column and have another column automatically have the same size.

In the example below, the user can drag either splitter, but when dragging, the width of both left and right columns changes at the same time.

    <Grid Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Content="Left" Background="Azure" Grid.Column="0"/>
        <Label Content="Middle" Background="Lavender" Grid.Column="2"/>
        <Label Content="Right" Background="Moccasin" Grid.Column="4"/>

        <GridSplitter Grid.Column="1" Width="8" Background="DarkSlateBlue"
                        HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
        <GridSplitter Grid.Column="3" Width="8" Background="DarkSlateBlue"
                        HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
    </Grid>

Window at startup:

User drags left splitter, which makes both left and right columns wider.

User drags right splitter and columns also resize together.

About these ads

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #466 – Using a GridSplitter in Conjunction with a SharedSizeGroup

  1. Pingback: Dew Drop – January 5, 2011 (#1,234) | Alvin Ashcraft's Morning Dew

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

Follow

Get every new post delivered to your Inbox.

Join 375 other followers

%d bloggers like this: