Set button background style in wpf

Question

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.

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

Allard

Answer 1

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

I have added also an example how to implement color change on 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>

Swim

they way i define style it was wrong. a animation life effect comes when i click on my button. can u explain why....what was wrong in my style define? – Allard

You have changed only the background property of your button. Buttons(and other controls) have got more properties than just background. If you want to reset all control styles - remove all it's default behaviors(like animation) you need to redefine Template. When you redefine Template property you can also set your own animation effects(using ControlTemplate.Triggers). – Swim

another thing i notice button push effect gone. how to change the button hover color and how to implement push effect color. please help – Allard

all the default animations and effects are gone, so you need to implement them once agin. I have added example how to change background color on click event. You can set trigger for Mouse Over in similar way - using <Trigger Property="IsMouseOver" Value="True">. – Swim

Answer 2

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

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

Goddard

where i need to define <Button.Style> in my mainwindow.xaml or App.xml – Allard

what is this <Microsoft_Windows_Themes:ButtonChrome> specially ButtonChrome?? – Allard

it a theme defined by Microsoft. More about themes – Gangue

how to put this style in app.xaml. which portion i need to copy. give a sample. thanks – Allard

another thing i notice button push effect gone. how to change the button hover color and how to implement push effect color. please help – Allard