Question

我是WPF的新手，并没有试图将进度条放在按钮上。我之前提出的问题是：StackOverflow Post。任何有关如何正确执行此操作的帮助将不胜感激。我没有在StackOverflow上看到另一篇文章来解决这个问题。理想情况下，让按钮（1）的文本垂直居中（即正常显示在按钮中）和（2）文本下方的进度条会很棒。该按钮的默认高度为2倍，以便为进度条留出空间。我可以调整你想出的任何东西的位置和间距。我非常有兴趣正确完成绑定以更新进度条。

谢谢！降压

Answer 1

您有两个选项，可以为按钮创建UserControl或新样式并覆盖ControlTemplate。我建议您设置Button样式，因为它更容易，并且您最终不会创建新类型。这是你如何做到的。

<Button>
    <Button.Style>
        <Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!-- Put in your textbox and progress bar and what not -->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>   
    </Button.Style>
</Button>

您可以详细了解模板控件here，并可以找到Style here的默认ControlTemplate和Button。

Answer 2

您可以轻松地将任何控件放在按钮的Content属性中：

<Button>
   <Button.Content>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="5">
            <TextBlock Text="I'm a button with progress bar!"></TextBlock>
            <ProgressBar Height="20"></ProgressBar>
         </StackPanel>
   </Button.Content>
</Button>

这将导致按钮控件如下：

enter image description here

如果您需要多个，则应声明Style并将其应用于表单中的按钮，与其他人一样。

Answer 3

如果您只需要一个这样的实例，您可以这样做：

<Button Click="Button_Click_1">
        <StackPanel>
            <TextBlock Text="Hello World"/>
            <ProgressBar Height="10" x:Name="pb1" Maximum="15"></ProgressBar>
        </StackPanel>
</Button>

然后在您的C＃代码中，您可以访问进度条，例如：

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    pb1.Value++;
}

Answer 4

使用Mah app

<Button Canvas.Left="170"
                                Canvas.Top="71"
                                Width="55"
                                Command="{Binding SearchEmployeeCommand}">
                            <Canvas Width="50" Height="20">
                                <TextBlock Text="select ..." />
                                <controls:ProgressRing Canvas.Left="15"
                                                       Width="20"
                                                       Height="20"
                                                       IsActive="True"
                                                       Visibility="Visible" />
                            </Canvas>
                        </Button>

如何将ProgressBar放入Button中

4 个答案: