WPF: Why SharedSizeScope is not working as expected?

2.9k views Asked by At

I'm trying to create a datagrid-like view with merged cell. Everything is OK except I cannot ShareSizeScope between the header row and the rest row. You can see in the screenshot below, the columns is not aligned except the first one.Would anyone kindly point out what's wrong with my code? Thanks in advance.
enter image description here

My XAML:

<Grid  Grid.Row ="0" Grid.Column="0" Margin="0,0,2,0" Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="35" MaxHeight="35" MinHeight="35"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Height="35"  VerticalAlignment="Top" Background="{StaticResource customBlueBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="Col_A" />
            <ColumnDefinition SharedSizeGroup="Col_B" />
            <ColumnDefinition SharedSizeGroup="Col_C" />
            <ColumnDefinition SharedSizeGroup="Col_D" />
            <ColumnDefinition SharedSizeGroup="Col_E" />
        </Grid.ColumnDefinitions>
        <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-1" Grid.Column="0"></Border>
        <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-1" Grid.Column="1"></Border>
        <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-1" Grid.Column="2"></Border>
        <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-1" Grid.Column="3"></Border>

        <TextBlock Text="Col 1" FontSize="14" FontFamily="Segoe Ui Dark" Foreground="White" SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" ></TextBlock>
        <TextBlock Text="Col 2" FontSize="14" FontFamily="Segoe Ui Dark" Foreground="White" SnapsToDevicePixels="True"  HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"></TextBlock>
        <TextBlock Text="Col 3" FontSize="14" FontFamily="Segoe Ui Dark"  Foreground="White" SnapsToDevicePixels="True"  HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="2"></TextBlock>
        <TextBlock Text="Col 4" FontSize="14" FontFamily="Segoe Ui Dark"  Foreground="White" SnapsToDevicePixels="True"  HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="3"></TextBlock>
        <TextBlock Text="Col 5" FontSize="14" FontFamily="Segoe Ui Dark"  Foreground="White" SnapsToDevicePixels="True"  HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="4"></TextBlock>
    </Grid>
    <ListBox Grid.Row="1" ItemsSource="{Binding TestReportData.Items}" Background="{StaticResource customBlueBrushOpacity}" ItemContainerStyle="{StaticResource noStyleToListboxItem}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="Col_A" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding CaseName}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Border BorderThickness="0,0,0,1" BorderBrush="Black" ></Border>
                    <ListBox Grid.Column="1" BorderThickness="1,0,1,1" Background="{StaticResource customBlueBrushOpacity}" HorizontalContentAlignment="Stretch" ItemsSource="{Binding ChannelList}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition SharedSizeGroup="Col_B" />
                                        <ColumnDefinition SharedSizeGroup="Col_C" />
                                        <ColumnDefinition SharedSizeGroup="Col_D" />
                                        <ColumnDefinition SharedSizeGroup="Col_E" />
                                    </Grid.ColumnDefinitions>
                                    <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-2" Grid.Column="0"></Border>
                                    <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-2" Grid.Column="1"></Border>
                                    <Border BorderThickness="0,0,1,0" BorderBrush="Black" Margin="-2" Grid.Column="2"></Border>
                                    <TextBlock Text="{Binding ChannelName}" HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="0"/>
                                    <TextBlock Text="{Binding TotalTestTimes}" HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="1"/>
                                    <TextBlock Text="{Binding FailedTestTimes}" HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="2"/>
                                    <TextBlock Text="{Binding FailedTestRate}" HorizontalAlignment="Center" VerticalAlignment="Center"  Grid.Column="3"/>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>
1

There are 1 answers

1
Taras Shcherban On BEST ANSWER

As was mentioned by Thomas Levesque you should set the IsSharedSizeScope property to True on ancestor of all grids where SharedSizeGroup is suppozed to work