WPF - 制作进度条按钮并使其大小合适答案

【问题标题】：WPF - Making a progressbar button and having it properly sizeWPF - 制作进度条按钮并使其大小合适
【发布时间】：2020-06-16 22:05:58
【问题描述】：

我正在尝试在 WPF 中创建一个按钮，该按钮将显示进度，但其按钮文本仍可见。

我尝试将Grid 作为子按钮添加到按钮，并将ProgressBar 和Label 添加到网格，认为Grid 将填充按钮并在进度条和标签上使用VerticalAlignment="Stretch" HorizontalAlignment="Stretch"基本上会给我一个可点击的进度条，它可以显示进度并在其顶部有一个标签。但是，我的尺寸有问题。

这是我的 XAML：

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Grid>
                <ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                <Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

这是我看到的：

如果我更改为显式尺寸：

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Grid>
                <ProgressBar Value="10" Maximum="20" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                <Label Content="asd2" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

我明白了：

这在视觉上是一种改进，但 XAML 编程更糟糕，因为我希望按钮随窗口调整大小，如果用户看不清楚或类似的东西。另外，从视觉上看——我不喜欢实际按钮和进度条开始之间的小边界，我尝试将“填充”和“边距”都设置为 0，但不是这样。

我希望看到的 - 进度条占据了按钮的所有空间，而标签文本相对于按钮的总大小保持垂直和水平居中。

【问题讨论】：

标签： c# wpf button progress-bar

【解决方案1】：

将您的<Grid> 放入ControlTemplate 并覆盖您的<Button.Template>：

        <Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                        <Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
                    </Grid>
                </ControlTemplate>            
            </Button.Template>
        </Button>

您之前所做的是将您的<Grid> 放入按钮的ContentTemplate，而不是它的Template。 ContentTemplate 的问题在于它具有一些默认按钮的样式，例如您不喜欢的小边框。通过将其移动到按钮的整体模板，您是说我不在乎默认按钮的外观，我希望它看起来与 THIS 完全一样。

它的样子：

如果你调整窗口大小会是什么样子：

【讨论】：