WPF-制作进度条按钮并调整其大小

Question

我正在尝试在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编程的效果更差，因为如果用户看不到它或类似的东西，我希望按钮与窗口一起调整大小。另外，从视觉上看-我不喜欢实际按钮和进度条开始之间的小边框，并且我尝试将“ padding”和“ margin”都设置为0，不是那样。

我想看到的是-进度条占据了按钮的所有空间，并且标签文本相对于按钮的总大小在垂直和水平方向上居中。

Answer 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>放到Button的ContentTemplate而不是Template中。 ContentTemplate的问题在于它具有某些默认按钮的样式，例如您不喜欢的小边框。通过将其移至Button的整体模板，您是说我不在乎默认按钮的外观，我希望它看起来完全像这样。

它看起来像什么：

如果调整窗口大小，它将是什么样子：