Click here to Skip to main content
15,915,513 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
suppose i have bottom and i want to style him and put animation in the style
can i do that ?
i try many time but fail do it ,
i will be glad if some one show me example of how its done
Posted
Comments
Sergey Alexandrovich Kryukov 24-Nov-13 22:43pm    
We could start thinking about this if we had any idea on what could you possibly mean by "having bottom" and "styling an object into animation"...
—SA

1 solution

I'm going to assume by "bottom" you mean Button.

Adding animation to a style is not much harder that adding a change to any other property of the control you're styling. Granted, you need to declare how and when the animation kicks in but there are a lot of good resources for that explain this;
Button styles[^]
Animation in WPF[^]

Below is a brief example that shows how to animate both background color and width on mouse over:
XAML
<Window x:Class="ButtonThingy.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Button Style Window" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <!-- Define the template -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!-- x:Name here is required because the Storyboard needs to know its target -->
                        <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border" CornerRadius="2" BorderThickness="1" Width="200" Height="100">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="Silver" Offset="0.0" />
                                            <GradientStop Color="Green" Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="Silver" Offset="0.0" />
                                            <GradientStop Color="Green" Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <!-- Define state transitions, these are animation that affect properties set above -->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <!-- First animation just changes the background colour -->
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="Blue" />
                                            </ColorAnimationUsingKeyFrames>
                                            
                                            <!-- This animation changes the width of the button -->
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Border">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!-- This defines where the content, if this case "I am a button", goes inside the template -->
                            <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <!-- Button picks up the style above automatically because no style is explicitly set -->
        <Button Content="I am a button"/>
    </Grid>
</Window>


Hope this helps,
Fredrol
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900