Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: WPF UI ContentProperty
Hi,
 
I am trying to create a control that performs several animations on mouse over event of a button. The first functionality is that, the button should take padding=2 and occupy the entire columns. I am not able to do that; if I am trying to decrease the width of the button on mouseover, I am able to do, but when I am trying to increase the width, the button is expanding but the expanded part is not visible. How to implement the same ?
 
I am using the below code in control template. Please suggest changes :-
 
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
    <!--Create a control template for button-->
    <ControlTemplate x:Key="buttonAnimate" TargetType="Button">
        <Grid Name="myGrid">
            <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
            </Button>
        <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/>
                <Setter Property="Width" Value="200" TargetName="myButton"/>
                <Setter Property="Cursor" Value="Hand" TargetName="myGrid"/>
                <Setter Property="Width" Value="300" TargetName="myButton"/>
                <Setter Property="Width" Value="300" TargetName="MyBorder"/>
                <Setter Property="Padding" Value="2" TargetName="myButton"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>
 

Thanks in advance.
Posted 7-Mar-13 20:35pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi Jashobanta,
 
I believe that this code can help you:
 
<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate  TargetType="Button">
            <Border x:Name="MyBorder" removed="{TemplateBinding Background}" 
                    Width="{TemplateBinding Width}" BorderBrush="Orange" 
                     BorderThickness="3" CornerRadius="2">
               <Border.RenderTransform>
                  <ScaleTransform x:Name="MyAnimatedScale" ScaleX="1" ScaleY="1"/>
               </Border.RenderTransform>
                  <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
             </Border>
           <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Cursor" Value="Hand" TargetName="MyBorder"/>
                     <Trigger.EnterActions>
                         <BeginStoryboard >
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"                                                  
                                   Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                     To="3.0" Duration="0:0:01" />
                                  <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"
                                   Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                    To="3.0" Duration="0:0:01" />
                                   <ColorAnimation Storyboard.TargetName="MyBorder"  
                                     Storyboard.TargetProperty="BorderBrush.Color" 
                                     From="Orange" 
                                     To="DarkRed"               
                                     Duration="0:0:01" />
                                </Storyboard>
                          </BeginStoryboard>
                       </Trigger.EnterActions>
                       <Trigger.ExitActions>
                           <BeginStoryboard >
                              <Storyboard>
                                  <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"
                                    Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                     To="1.0" Duration="0:0:01" />
                                   <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"
                                    Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                     To="1.0" Duration="0:0:01" />
                                    <ColorAnimation Storyboard.TargetName="MyBorder"  
                                     Storyboard.TargetProperty="BorderBrush.Color" 
                                     From="DarkRed" 
                                     To="Orange"               
                                      Duration="0:0:01" />
                                </Storyboard>
                             </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 8,284
1 Sergey Alexandrovich Kryukov 7,327
2 DamithSL 5,614
3 Manas Bhardwaj 4,986
4 Maciej Los 4,920


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 4 May 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100