Question

I have a scenario where i have one control, which is using another control thru ListBox.ItemTemplate. I need to share Height and width between these 2 controls. How can we achieve that?

Main Conrol Xaml looks like as followings:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"
                   Text="{Binding Path=Caption,
                                  Mode=OneWay}" />
        <TextBlock Grid.Row="1"
                   Text="{Binding Path=Caption2,
                                  Mode=OneWay}" />
    </Grid>

    <ListBox Grid.Row="0"
             Grid.Column="1"
             ItemsSource="{Binding Path=ViewModels}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Views:View2 />
            </DataTemplate>

  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"></StackPanel>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

View2 xaml looks like as following:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0"
               Grid.Column="0"
               Text="{Binding Path=Value,
                              Mode=OneWay}"/>


    <TextBlock  Text="{Binding Path=Value2,
                              Mode=OneWay}"
                                Grid.Row="1"
                                Grid.Column="0"
                               />
</Grid>

Answer 1

You can synchronize row height and column width using Grid.IsSharedSizeScope and the SharedSizeGroup attribute on ColumnDefinition and RowDefinition.

I’m not sure which elements you need to synchronize in your Xaml, but an example might be as follows:

Ia a parent element you use Grid.IsSharedSizeScope=”True”

<Grid IsSharedSizeScope="true">
   ..
</Grid>

This synchronizes any columns (or rows) that have the same SharedSizeGroup within that scope (you can have multiple nested scopes).

So if your view.xaml looks like this

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="column1"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=Value, Mode=OneWay}"/>
    <TextBlock Text="{Binding Path=Value2, Mode=OneWay}" Grid.Row="1" Grid.Column="0"/>
</Grid>

Then all the textblocks will have the same width.