Set button background style in wpf

Question

I have one button and I set the button background style with LinearGradientBrush . everything works fine, but when I run the button and press the button on the button, then the gradient color shows the ob button with a little animation, but I don't write anything for the animation for the button's background style.

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 the user clicks on the button, the gradient animation does not seem to start with the button. please guide me. thanks

Answer 1

You need to override the button style, you can do this using the ControlTemplate . Here is an example of how to write a reusable style that redefines a button.

I also added an example of how to implement a color change in the IsPressed event.

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

Answer 2

This is due to the default button 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 this style to use it several times as a resource: Place it to give you this style for each button in your Window.xaml

Moving a style to a higher level, such as App.xaml, applies a style to each button in your application.