WPF中Button的DataTemplate内Grid无法正确拉伸求解决方案

问题描述 #

使用WPF的ItemsControl生成按钮，按钮内分两部分显示项目名称和价格。按钮本身已铺满所在UniformGrid单元格，但按钮内的Grid列无法拉伸至按钮整个宽高，仅停留在中心位置。尝试过设置Vertical/Horizontal对齐为Stretch、占位文本测试、简化Button属性、嵌套UniformGrid等方法，均无效。仅靠Margin/Padding调整TextBlock间距无法实现理想对齐。

原代码如下：

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Button Margin="{Binding DataContext.MarginBetweenButtons, RelativeSource={RelativeSource AncestorType=ItemsControl}}" IsEnabled="{Binding Enabled}"
                Command="{Binding Path=DataContext.ButtonClickedCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                CommandParameter="{Binding}"
                Background="{Binding Color}" 
                HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Button.ContentTemplate>
                <DataTemplate>
                    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        
                        <TextBlock Grid.Column="0"
                                   Text="{Binding DataContext.Name, RelativeSource={RelativeSource AncestorType=Button}}"
                                   FontSize="{Binding DataContext.FontSize, RelativeSource={RelativeSource AncestorType=Button}}"
                                   TextWrapping="Wrap" TextAlignment="Center" Margin="0" Padding="0" VerticalAlignment="Center" HorizontalAlignment="Center"
                                   Foreground="{Binding DataContext.TextColor, RelativeSource={RelativeSource AncestorType=Button}}"/>

                        <TextBlock Grid.Column="1" Visibility="{Binding DataContext.PriceText, Converter={StaticResource textToVisibility}, RelativeSource={RelativeSource AncestorType=Button}}"
                                   Text="{Binding DataContext.PriceText, RelativeSource={RelativeSource AncestorType=Button}}"
                                   FontSize="{Binding DataContext.FontSize, RelativeSource={RelativeSource AncestorType=Button}}"
                                   TextWrapping="NoWrap" TextAlignment="Right" Margin="0,0,0,0" Padding="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Right"
                                   Foreground="{Binding DataContext.TextColor, RelativeSource={RelativeSource AncestorType=Button}}" />
                    </Grid>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>
    </DataTemplate>
</ItemsControl.ItemTemplate>

解决方案 #

问题核心是Button.ContentTemplate的绑定逻辑错误，导致Grid无法正确继承按钮的可用空间。以下是两种高效修复方式：

方式一：移除ContentTemplate，直接将Grid作为Button的Content #

这是最简洁的方案，避免额外绑定层级：

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Button Margin="{Binding DataContext.MarginBetweenButtons, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                IsEnabled="{Binding Enabled}"
                Command="{Binding Path=DataContext.ButtonClickedCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                CommandParameter="{Binding}"
                Background="{Binding Color}" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch">
            <!-- 直接用Grid作为按钮内容，无需嵌套ContentTemplate -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                
                <TextBlock Grid.Column="0"
                           Text="{Binding Name}"
                           FontSize="{Binding FontSize}"
                           TextWrapping="Wrap" 
                           TextAlignment="Center" 
                           VerticalAlignment="Center"
                           Foreground="{Binding TextColor}"/>

                <TextBlock Grid.Column="1" 
                           Visibility="{Binding PriceText, Converter={StaticResource textToVisibility}}"
                           Text="{Binding PriceText}"
                           FontSize="{Binding FontSize}"
                           TextWrapping="NoWrap" 
                           TextAlignment="Right" 
                           VerticalAlignment="Center"
                           HorizontalAlignment="Right"
                           Foreground="{Binding TextColor}" />
            </Grid>
        </Button>
    </DataTemplate>
</ItemsControl.ItemTemplate>

方式二：修复ContentTemplate的DataContext绑定 #

若必须保留ContentTemplate，需给Button设置Content并修正绑定路径：

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Button Margin="{Binding DataContext.MarginBetweenButtons, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                IsEnabled="{Binding Enabled}"
                Command="{Binding Path=DataContext.ButtonClickedCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                CommandParameter="{Binding}"
                Background="{Binding Color}" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch"
                <!-- 将按钮的Content绑定到自身DataContext，供ContentTemplate使用 -->
                Content="{Binding}">
            <Button.ContentTemplate>
                <DataTemplate>
                    <!-- Grid默认对齐方式就是Stretch，无需额外设置 -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        
                        <TextBlock Grid.Column="0"
                                   Text="{Binding Name}"
                                   FontSize="{Binding FontSize}"
                                   TextWrapping="Wrap" 
                                   TextAlignment="Center" 
                                   VerticalAlignment="Center"
                                   Foreground="{Binding TextColor}"/>

                        <TextBlock Grid.Column="1" 
                                   Visibility="{Binding PriceText, Converter={StaticResource textToVisibility}}"
                                   Text="{Binding PriceText}"
                                   FontSize="{Binding FontSize}"
                                   TextWrapping="NoWrap" 
                                   TextAlignment="Right" 
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Right"
                                   Foreground="{Binding TextColor}" />
                    </Grid>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>
    </DataTemplate>
</ItemsControl.ItemTemplate>

关键修复点 #

• 移除原代码中不必要的HorizontalAlignment="Center"（第一列仅保留TextAlignment="Center"即可，前者会限制控件拉伸）。
• 避免无意义的ContentTemplate嵌套，直接将布局控件作为Button内容，减少绑定层级问题。
• 确保Grid能继承Button的HorizontalContentAlignment="Stretch"和VerticalContentAlignment="Stretch"属性，从而占满按钮整个空间。

内容的提问来源于Stack Exchange，提问作者Joseph Saunders