Search code examples
wpf

Columns with SharedSizeGroups in ItemsControl don't use full available width

enter image description here

The cyan color is the background of the ItemsControl. As you can see it occupies the entire window width.

Now I want, the center column (with text "unknown") to stretch horizontally. Can't get it done, no clue what I am missing this time.

My xaml

<GroupBox Grid.Row="1" BorderThickness="2" BorderBrush="Black">
    <ItemsControl Background="Aquamarine"
        ItemsSource="{Binding
            RelativeSource={RelativeSource AncestorType={x:Type local:AppGroup}},
            Path=AppItemSource}"
        Grid.IsSharedSizeScope="True"
        HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Name"/>
                        <ColumnDefinition Width="*" SharedSizeGroup="State"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Buttons"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Style="{StaticResource AppNameColumnText}" Grid.Column="0" Text="{Binding Name}"/>
                    <TextBlock Style="{StaticResource AppStateColumnText}" Grid.Column="1" Text="{Binding StatusText}" TextAlignment="Center" HorizontalAlignment="Stretch"/>
                    <StackPanel Grid.Column="2" Orientation="Horizontal">
                        <StackPanel.Resources>
                            <Style TargetType="Button">
                                <Setter Property="Width" Value="20"/>
                                <Setter Property="Height" Value="20"/>
                                <Setter Property="Margin" Value="5"/>
                            </Style>
                        </StackPanel.Resources>
                        
                        <Button Style="{StaticResource StartButton}" Command="{Binding StartCommand}"/>
                        <Button Style="{StaticResource StopButton}" Command="{Binding StopCommand}"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</GroupBox>

I have:

  • Set my ItemsControl with HorizontalContentAlignment is true
  • The center column is defined with "*"
  • The TextBlock is allowed to stretch.

What else do I need to tell WPF ?

For completeness, the defined styles which seem harmless to me.

<Style x:Key="AppNameColumnText" TargetType="TextBlock">
    <Setter Property="Margin" Value="20,0,20,0"/>
    <Setter Property="FontSize" Value="26"/>
</Style>
<Style x:Key="AppStateColumnText" TargetType="TextBlock">
    <Setter Property="Margin" Value="20,0,20,0"/>
    <Setter Property="FontSize" Value="26"/>
</Style>
Solution

  • remove SharedSizeGroup="State" from column with * width, it will stretch as expected (and SharedSizeGroups on all other columns will ensure that central column has the same width):

    <!-- <ColumnDefinition Width="*" SharedSizeGroup="State"/> -->
<ColumnDefinition Width="*" />

    documentation has an explanation:

    Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto.