CODEWITHSUNDEEP
wpfxamlmahapps.metro
Zevulos
Zevulos

Reputation: 37

WPF setting a border on a button to fade in and out

Im trying to get my button border to fade in and out. I have the effect but its applying it to the whole button and not the border.

App.xamml:

<Style x:Key="PassiveGlow"     
  BasedOn="{StaticResource GlowingButton}"  
  TargetType="{x:Type Button}">   

   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="False">
      <Trigger.EnterActions>
        <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
         </BeginStoryboard>
      </Trigger.EnterActions>
    </Trigger>
 </Style.Triggers>
</Style>

Button XAML:

<Button x:Name="LoginButton"
    Padding="5"
    HorizontalAlignment="Left"
    Margin="0,10,0,0"
    Width="100"
    Content="Login"
    ToolTipService.ShowDuration="20000"
    Click="PasswordButtonClick" TabIndex="2"
    Style="{DynamicResource PassiveGlow}">

Upvotes: 2

Views: 1063

Answers (1)

Nish26
Nish26

Reputation: 987

You can achieve this effect using style described below :

<Style x:Key="PassiveGlow"  TargetType="{x:Type Button}">
       <Setter Property="BorderBrush" Value="Red" />
       <Setter Property="BorderThickness" Value="3" />
        <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
       <Style.Triggers>
          <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetProperty="BorderBrush.Opacity"
                  From="1.0" To="0.0" Duration="0:0:2" 
                  AutoReverse="True" RepeatBehavior="Forever"/>
              </Storyboard>
               </BeginStoryboard>
         </EventTrigger>       
     </Style.Triggers>
    </Style>

This animation will start as soon as Button is loaded and will repeat forever as i have used Button.Loaded as the RoutedEvent and set RepeatBehavior to Forever. If you would like this animation to run only when the mouse enters the button for the first time , you can change the RoutedEvent to Button.MouseEnter. Also, Please note i didn't have the material style available while i tried this sample and hence i have added a new ControlTemplate for the button and got rid of BasedOn="{StaticResource GlowingButton}" part from style.

To use a drop shadow effect instead of border :

  1. Add a setter for effect in style and set BorderThickness value to 0. 
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Effect">
        <Setter.Value>
           <DropShadowEffect  ShadowDepth="5" Color="#7D00FE"/>
        </Setter.Value>
    </Setter>
  1. Edit your Storyboard to target Effect.ShadowDepth property:
  <Storyboard>
      <DoubleAnimation 
        Storyboard.TargetProperty="Effect.ShadowDepth"
        From="3.0" To="0.0" Duration="0:0:2" 
        AutoReverse="True" RepeatBehavior="Forever"/>
  </Storyboard>

Upvotes: 1

Related Questions