在 wpf 中设置按钮背景样式

Set button background style in wpf

提问by Thomas

i have one button and i set button background style with LinearGradientBrush. everything works fine but when i run button and press click on button then gradient color is showing ob button with bit of animation but i have not write anything for animation for button background style.

我有一个按钮，我使用LinearGradientBrush设置按钮背景样式。一切正常，但是当我运行按钮并按下按钮时，渐变颜色显示带有一点动画的 ob 按钮，但我没有为按钮背景样式编写任何动画。

here is my full code

这是我的完整代码

<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>

i want that when user click on button then gradient animation anything like will not start on button. please guide me. thanks

我希望当用户单击按钮时，渐变动画不会在按钮上启动。请指导我。谢谢

回答by Marta

You need to redefine button style, You can do it using ControlTemplate. Here is example how to write reusable style that redefines button.

您需要重新定义按钮样式，您可以使用ControlTemplate. 这是如何编写重新定义按钮的可重用样式的示例。

I have added also an example how to implement color change on IsPressed event.

我还添加了一个示例，如何在 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>

回答by Miklós Balogh

This happens because of the buttons default style.

这是因为按钮的默认样式。

You need to set a new Style.

您需要设置一个新样式。

EDIT :

编辑 ：

<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>

If you want to have this style more than once use it as a resource: Putting it to sets you this style for every button in your Window.xaml

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

Moving the style to a higher scope like App.xaml applies the style for every button in your application

将样式移动到更高的范围，例如 App.xaml 为应用程序中的每个按钮应用样式