在WPF中设置按钮背景样式

Question

我有一个按钮，我使用LinearGradientBrush设置按钮的背景样式。一切都正常工作，但当我运行按钮并点击按钮时，渐变颜色会在按钮上显示，并带有一点动画效果，但我没有为按钮的背景样式编写任何动画效果。

这是我的完整代码：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<DockPanel>
    <Button Content="Button" Height="23" Name="button1" Width="75">
        <Button.Background>
            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#FFD9EDFF" Offset="0"/>
                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
</DockPanel>
</Window>

我希望您能够指导我，当用户单击按钮时，不会在按钮上启动任何类似渐变动画的内容。谢谢。

- Thomas

Answer 1

您需要重新定义按钮样式，可以使用ControlTemplate来实现。下面是一个示例，展示如何编写可重用的样式以重新定义按钮。

我还添加了一个示例，展示如何在IsPressed事件上实现颜色更改。

<Window x:Class="ColorTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ResourceDictionary>
        <LinearGradientBrush x:Key="ButtonBackground" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#FFD9EDFF" Offset="0"/>
            <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
            <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
        </LinearGradientBrush>
        <Style x:Key="SimpleButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border Background="{StaticResource ButtonBackground}" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
                            <Border x:Name="BorderPressed"  Opacity="0" Background="Blue" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="MainContent" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Window.Resources>
<DockPanel>
    <Button Content="Button" Height="23" Name="button1" Width="75" Style="{StaticResource SimpleButtonStyle}"/>
</DockPanel>

- Marta

---

我定义样式的方式是错误的。当我点击按钮时，会出现动画生命效果。你能解释一下为什么吗？我的样式定义有什么问题吗？ - Thomas

你只改变了按钮的背景属性。按钮（和其他控件）有比背景更多的属性。如果你想重置所有控件样式 - 删除所有默认行为（如动画），你需要重新定义模板。当你重新定义模板属性时，你也可以设置自己的动画效果（使用ControlTemplate.Triggers）。 - Marta

我注意到另一件事，按钮按下效果消失了。如何更改按钮悬停颜色以及如何实现按下效果颜色。请帮忙。 - Thomas

所有默认的动画和效果都消失了，所以你需要重新实现它们。我已经添加了一个示例，说明如何在单击事件中更改背景颜色。你可以使用类似的方式设置鼠标悬停的触发器 - 使用<Trigger Property="IsMouseOver" Value="True">。 - Marta

Answer 2

这是因为按钮具有默认样式。您需要设置新的样式。

编辑：

<Button Content="Button" Height="23" Name="button1" Width="75">
 <Button.Style>
   <Style TargetType="Button">
     <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#FFD9EDFF" Offset="0"/>
            <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
            <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
        </LinearGradientBrush>
      </Setter.Value>
     </Setter>
       <Setter Property="Template">
         <Setter.Value>
           <ControlTemplate TargetType="{x:Type Button}">
              <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
              </Microsoft_Windows_Themes:ButtonChrome>
           </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>
 <Button.Style>
</Button>

如果您想多次使用此样式，请将其用作资源： 将其放置在 Window.xaml 中可为窗口中的每个按钮设置此样式。

将样式移至更高的范围，例如 App.xaml，可将此样式应用于应用程序中的每个按钮。

- Miklós Balogh

---

我需要在我的mainwindow.xaml或App.xml文件中定义<Button.Style>吗？ - Thomas

这个<Microsoft_Windows_Themes:ButtonChrome>是什么，尤其是ButtonChrome？ - Thomas

这是由Microsoft定义的主题。更多关于主题的信息。 - Miklós Balogh

如何将此样式放入app.xaml中？我需要复制哪一部分？请给一个示例。谢谢。 - Thomas

另外一件我注意到的事情是按钮按下效果消失了。如何改变按钮悬停颜色，以及如何实现按下效果颜色。请帮忙。 - Thomas