Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to animate control in WPF? [closed]

I've seen a sample WPF program that I cannot find. In this sample when I click a button another button starts growing and shrinking. Mean while I can do other stuff with the form. How do I do this?

like image 652
atoMerz Avatar asked Jan 09 '12 13:01

atoMerz


People also ask

Does WPF support animation?

Windows Presentation Foundation (WPF) provides support for multimedia, vector graphics, animation, and content composition, making it easy for developers to build interesting user interfaces and content.

What is storyboard WPF?

A Story Board is just a place to stored information about animation. You can also create a storyboard with XAML or code-behind capabilities (C# or VB.NET). In storyboard when the window is loaded animation trigger can start automatically. The BeginStoryboard action was run storyboard.


2 Answers

Below you will find a very simple example of a button height\width growing when the button is clicked and shrinking back when the mouse leaves the control. Animation in WPF is done by using StoryBoards. Storyboards are typically found in EventTriggers and can be saved in the resouces of the control,window, page, or application. Below is the sample along with some resources:

<Window x:Class="WPFFeatureSample_Application.AnimationWindowSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimationWindowSample" Height="300" Width="300">
<Grid>
    <Button Content="Sample" Width="50" Height="50">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                <Storyboard>
                        <DoubleAnimation To="200" Storyboard.TargetProperty="Width"></DoubleAnimation>
                        <DoubleAnimation To="200" Storyboard.TargetProperty="Height"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="50" Storyboard.TargetProperty="Width"></DoubleAnimation>
                        <DoubleAnimation To="50" Storyboard.TargetProperty="Height"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

References:

http://msdn.microsoft.com/en-us/library/ms742868.aspx

http://windowsclient.net/learn/

like image 175
rfresia Avatar answered Oct 09 '22 10:10

rfresia


You can animate controls in WPF using a Storyboard.

Check out the Animation Overview on MSDN.

like image 45
Bas Avatar answered Oct 09 '22 10:10

Bas