CODEWITHSUNDEEP
wpf
CatBusStop
CatBusStop

Reputation: 3428

Sharing Column Widths Between Multiple WPF Controls

Is there any way of sharing column widths between controls, not just between multiple grids on the same control?

Crude diagram of what I'm trying to get at:

alt text

I'm currently messing around with getting the widths of the labels in the first column of each UserControl, but it seems a messy solution that is quite CPU heavy (finding the labels and calculating the widths of the text before it's rendered is nasty!).

I've been reading up on as much about SharedSizeGroups as I can find, but there's nothing suggesting they work across different controls. Is there a simple solution or even a less simple one that isn't utterly hideous?!

Upvotes: 20

Views: 9010

Answers (3)

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84674

Both previous answers are correct. Here's an example (taken mostly from MSDN) on how you can use this on two different UserControls by setting Grid.IsSharedSizeScope="True" on the parent container. Notice the SharedSizeGroup attribute on the ColumnDefinition. You can see the effect by toggling Grid.IsSharedSizeScope True/False

MainWindow

<StackPanel Grid.IsSharedSizeScope="True">
    <my:UserControl1 HorizontalAlignment="Left" x:Name="userControl11" />
    <my:UserControl2 HorizontalAlignment="Left" x:Name="userControl21" />
</StackPanel>

UserControl1

<UserControl ...>
    <Grid ShowGridLines="True" Margin="0,0,10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstColumn"/>
            <ColumnDefinition SharedSizeGroup="SecondColumn"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
        </Grid.RowDefinitions>

        <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
        <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

        <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
    </Grid>

</UserControl>

UserControl2

<UserControl ...>
    <Grid ShowGridLines="True" Margin="0,0,10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstColumn"/>
            <ColumnDefinition SharedSizeGroup="SecondColumn"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
        </Grid.RowDefinitions>

        <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" />
        <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" />

        <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
    </Grid>
</UserControl>

Upvotes: 30

Wouter
Wouter

Reputation: 2262

You should set the IsSharedSizeScope property to true on the control containing both UserControls

Upvotes: 11

ColinE
ColinE

Reputation: 70160

Have you tried setting Grid.IsSharedSizeScope="True" on each user control?

Upvotes: 6

Related Questions