如何获取按钮内容以填充WPF中的宽度答案

【问题标题】：How to get button content to fill width in WPF如何获取按钮内容以填充WPF中的宽度
【发布时间】：2019-04-14 07:46:31
【问题描述】：

在以下 XAML 中，按钮将拉伸以适应窗口的宽度，包括在您调整窗口大小时。但是，TextBlock 和蓝色框居中。你会如何改变它，以便： 1) TextBlock 位于 Button 内部，但与实际 Button 宽度左对齐（即在 Window 的左侧） 2) Canvas 在 Button 内部，但与实际 Button 宽度右对齐（即在 Window 的右侧）

在这种情况下，“HorizontalAlignment=Stretch”似乎不起作用，并且在使用自动调整大小时，Button 内的 Grid 只会增长到其内容所需的最小宽度。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Window"
    Title="test"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Height="30">
            <Grid HorizontalAlignment="Stretch">
                <TextBlock Text="Sample Text" HorizontalAlignment="Stretch" TextAlignment="Left"></TextBlock>
                <Canvas Width="40" Background="AliceBlue" HorizontalAlignment="Right"></Canvas>
            </Grid>
        </Button>
    </Grid>
</Window>

【问题讨论】：

标签： wpf xaml autosize

【解决方案1】：

你应该设置Button.Template。还可以使用Grid.ColumnDefinitions 来正确设置内部元素的位置和宽度。

        <Button Height="30" Content="Smaple text">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter HorizontalAlignment="Left"  Grid.Column="0"
                                          VerticalAlignment="Center"/>
                                <Canvas Background="AliceBlue" Grid.Column="1" />
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

【讨论】：

这行得通 - 谢谢！你能解释一下它为什么有效吗？
因为当您将元素放入按钮中时（就像您在问题中所做的那样），您实际上是在设置“Button.Content”，但您打算做的是更改按钮的布局，这可以是通过设置“Button.Template”实现。

【解决方案2】：

您还可以在按钮本身上将HorizontalContentAlignment 设置为Stretch。

这将告诉内容填充按钮上可用的水平空间。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Window"
    Title="test"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Height="30" HorizontalContentAlignment="Stretch">
            <Grid HorizontalAlignment="Stretch">
                <TextBlock Text="Sample Text" HorizontalAlignment="Stretch" TextAlignment="Left"></TextBlock>
                <Canvas Width="40" Background="AliceBlue" HorizontalAlignment="Right"></Canvas>
            </Grid>
        </Button>
    </Grid>
</Window>

【讨论】：

这适用于我在 WinUI 中。如果它在 WPF 中工作，它应该是正确的答案。谢谢