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

Time:12-21

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>

CodePudding user response:

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.

  •  Tags:  
  • wpf
  • Related