ItemsControl中带SharedSizeGroup的列无法占满可用宽度
问题描述

青色区域是ItemsControl的背景,可见它已经占据了整个窗口宽度。我希望中间显示“unknown”的列能够水平拉伸,但始终无法实现,不清楚遗漏了什么设置。
现有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>
已做的设置
- 将
ItemsControl的HorizontalContentAlignment设为Stretch - 中间列宽度定义为
* - 允许
TextBlock拉伸
补充样式定义
<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>
解决方法
问题出在两个核心设置上:
SharedSizeGroup与*宽度冲突:给中间列设置的SharedSizeGroup="State"会强制列宽统一为所有行中该列内容的最大宽度,完全覆盖*的拉伸规则。需要移除中间列的SharedSizeGroup属性。- 项容器未水平拉伸:
ItemsControl的默认项容器(ContentPresenter)默认左对齐,即使ItemsControl设置了HorizontalContentAlignment="Stretch",容器本身也不会占满控件宽度,导致内部Grid无法拉伸。需要添加ItemContainerStyle让容器水平拉伸。
修改后的ItemsControl代码如下:
<ItemsControl Background="Aquamarine" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:AppGroup}}, Path=AppItemSource}" Grid.IsSharedSizeScope="True" HorizontalContentAlignment="Stretch"> <!-- 添加ItemContainerStyle,让项容器水平拉伸 --> <ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Setter Property="HorizontalAlignment" Value="Stretch"/> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="Name"/> <!-- 移除中间列的SharedSizeGroup --> <ColumnDefinition Width="*"/> <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>
内容的提问来源于stack exchange,提问作者bas
相关产品推荐
相关产品推荐

