You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ItemsControl中带SharedSizeGroup的列无法占满可用宽度

问题描述

界面示意图:ItemsControl背景为青色,中间显示“unknown”的列未水平拉伸
青色区域是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>
解决方法

问题出在两个核心设置上:

  1. SharedSizeGroup与*宽度冲突:给中间列设置的SharedSizeGroup="State"会强制列宽统一为所有行中该列内容的最大宽度,完全覆盖*的拉伸规则。需要移除中间列的SharedSizeGroup属性。
  2. 项容器未水平拉伸: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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 17:25:36