WPF - how and why
Written by Ian Elliot   
Saturday, 25 July 2009
Article Index
WPF - how and why
Why WPF?
No XAML WPF
Layout controls
Graphics
Buttons on the edge

 

Banner

Buttons on the edge of a nervous breakdown

One particular feature of WPF that is worth getting to know sooner rather than later is animation.

The entire graphics system has been built with animation in mind from the word go. You can even create animations using nothing but XAML. The easiest way to get to grips with this topic is to actually animate something – in this case a button which fades in and out when a user is about to click on it and then jumps some distance when they do.

Start a new WPF project and change the layout Panel from Grid to Canvas and add a button:

<Canvas>
<Button Name="Button1"
Canvas.Top="0"
Canvas.Left="0"
Height="100"
Width="100" >
Click Me
</Button>
</Canvas>

In this case we have positioned the button at (0,0), i.e. the top left-hand corner of the Canvas.

Notice the way the Canvas property of the Button is used to position it.

Animations can be created in many ways but in XAML you have to use a Storyboard object/tag. A Storyboard can contain any number of Animation objects, which are all activated when it is.

You can think of an Animation object as specifying how a property of the object being animated should change over time.

For example:

<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0"
Duration="0:0:1" />
</Storyboard>

This defines a single Storyboard with a single animation. It’s a “Double” Animation because the property being animated is a double precision type, not because it is in any sense “two” animations.

There are animation objects to animate points, colour and so on. If there isn’t an animation object for the type of property you want to animate you can create one.

In this case the animation is applied to Button1’s Opacity property. The “From To” specifies that it should be varied from 1.0 visible to 0 i.e. completely transparent over a Duration of 1 second. This is a very simple type of animation but there are many more sophisticated types, including keyframe and path animations, all working in roughly the same way.

Now we come to the difficult problem of exactly when the animation should happen – i.e. what triggers it.

We could move to code and write event handlers in the usual way but you can also handle events in XAML and this is worth knowing how to do this.

Each control you define in XAML has a Triggers collection. Each Trigger specifies an event that invokes it and an action it performs. For example you can place the Button.Triggers tag straight after the Button tag and start to create a list of Triggers:

<Button.Triggers>
<EventTrigger
RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>

This defines a single Trigger which will occur when the mouse enters the button. The EventTrigger.Actions property is then used to define a list of actions which are performed in response to the event. In this case we start a Storyboard running:

<BeginStoryboard>

We could define the Storyboard object as a named resource and start it running by using its name. However in this case it’s easier to define the Storyboard after the BeginStoryboard tag:

    <Storyboard>
<DoubleAnimation
Storyboard.TargetName="Button1"
Storyboard.TargetProperty=
"Opacity"
From="1.0" To="0.0"
Duration="0:0:1"
AccelerationRatio="0.5"
DecelerationRatio="0.5"
RepeatBehavior="Forever"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>

If you run the program at this stage of development you will see the button fade out repeatedly when you move the mouse over it.

Notice that the Storyboard is now slightly more complicated as we have added Acceleration and Deceleration ratios which specify how the change speeds up and slows down and we have made it repeat forever and loop back to its original state.

Once you have the basic idea of animation you can discover most of what you need to know by experimentation. For example, to make the button move diagonally when the user clicks on it, add the following between the EventTrigger.Actions tag:

<EventTrigger RoutedEvent=
"Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Button1"
Storyboard.TargetProperty=
"(Canvas.Left)"
From="0.0" To="125.0"
Duration="0:0:1"
AccelerationRatio="0.5"
DecelerationRatio="0.5"
RepeatBehavior="1x"
AutoReverse="True" />
<DoubleAnimation
Storyboard.TargetName="Button1"
Storyboard.TargetProperty=
"(Canvas.Top)"
From="0.0" To="125.0"
Duration="0:0:1"
AccelerationRatio="0.5"
DecelerationRatio="0.5"
RepeatBehavior="1x"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>

This moves the top and left properties and repeats the entire action just once.

 

As you work with XAML it’s easy to forget that you are in fact working with a complete graphics system. For example, all of the co-ordinates are in terms of absolute measurements rather than pixels and if the user interface is displayed on a higher resolution display device the quality increases, not the size of the text or buttons.

There are also transformations that you can apply to any rendered graphic. For example, if you add:

<Button.RenderTransform>
 <RotateTransform Angle="45" />
</Button.RenderTransform>

then the button will be drawn at 45 degrees – it still works as a standard button and even the animation functions. Animating a transformation is also possible.

 

button5

Buttons just aren’t supposed to behave like this!

 

Now that you have seen how WPF works you should be able to explore most of its facilities with the help of the documentation. It’s a powerful and unified approach to Windows graphics and you can’t afford to ignore it.

If you would like the code for this project then register and click on CodeBin.

Banner


FlexGrid - A Lightweight Data Grid

There are more data grids available than the standard one that comes with WPF. In this article we take a look at FlexGrid for WPF and discover how easy it is to use.


<ASIN:0672329859>

<ASIN:1430210842>

 

public partial class Window1 : Window
{


Last Updated ( Friday, 19 March 2010 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.