Search results matching tag 'animation'

Animation in xaml to get you started.

Matt — Mon, 16 Feb 2009 16:14:00 GMT

My previous post was xamlless so I thought I'd give some basic examples to get you started if you're not familiar with animations.

First I'll show you how to create this smooth translate and opacity animation and how to tweak it to what you want. Here's the storyboard I declared in my project resources :

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

DecelerationRatio="0.5"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation

Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"

To="0"

DecelerationRatio="0.5"

Duration="00:00:00.400"/>

</Storyboard>

There are various ways you can do this but I prefer using a more generic approach where I will not be dependent on the type of object I will be animating, hence the UIElement.RenderTransform. You could also set this explicitly by using the Storyboard.TargetName property and naming (x:Name) your TranslateTransform, which would look like this :

<DoubleAnimation

Storyboard.TargetName="myTranslate"

Storyboard.TargetProperty="X"

To="0"

DecelerationRatio="0.5"

Duration="00:00:00.400"/>

Either way, it does not really change anything for the current example. Now, the only thing left is to make sure the object you will be animating has a TranslateTransform attached and its opacity set to 0 :

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

Your control is now ready to be animated, for testing purposes you can just add the following code in your xaml :

<TextBlock.Triggers>

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

</TextBlock.Triggers>

There are various elements you can play with to get the effect you want, at this point it's just a matter of changing the duration along with the Acceleration or DecelerationRatio and the TranslateTransform X value. Keep in mind that in a lot of cases a simple Opacity animation should be enough without adding the translate. The key is to not over do it .

Another fun yet dangerous (in a design point of view) thing to play with when working with animation, is the ScaleTransform. If you read my previous post you will understand why. ScaleTransform animation surfs on the thin line between corny and cool. Scaling elements can be intresting in splash screens or when you initially layout your elements. Here is an example :

<DoubleAnimation Storyboard.TargetProperty="Opacity"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

To="1"

Duration="00:00:00.400"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

To="1"

Duration="00:00:00.400"/>

Make sure your element has both the opacity set to 0 and has a ScaleTransform attached :

<TextBlock Text="Hello World"

Opacity="0">

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

I would advise against starting with a ScaleX and ScaleY at 0 as the effect will be too drastic. You can try it out and see what I mean.

Just to demonstrate what you could do :

So how does that all tie in the datagrid? Well, it's really up to you and your creativity. An easy example would be to use an animation like a scaleTransform in a cell's error style. If some data is invalid, you could then scale it to bring the information to the user's attention.

If you want to try this out, create a new Style with TargetType xcdg:DataCell (assuming you added Xceed's namespace with xcdg) give it a key like : myCellErrorStyle

In this style you can add something like this (tweak it to what you want) :

<Setter Property="RenderTransformOrigin"

Value="0.5,0.5"/>

<Setter.Value>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsValidationErrorRestrictive"

Value="True">

<Setter Property="Background"

Value="Red">

</Trigger>

<Trigger Property="IsValidationErrorRestrictive"

Value="False">

<Setter Property="Background"

Value="Orange">

<Trigger.EnterActions>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"

To="1.1"

Duration="00:00:00.25"/>

<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"

To="1.1"

Duration="00:00:00.25"/>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

</Style.Triggers>

Now, on the datagrid you have a property named CellErrorStyle, you can set it to your myCellErrorStyle and voila!

Questions? Comments? Please feel free to share :).

Because you can animate, doesn't mean you should.

Matt — Tue, 10 Feb 2009 17:56:00 GMT

A lot has changed since WinForms but one of the variables that hasn't changed much, is the programmer. WinForms programmers who were used to static environments are now asked to "upgrade" to WPF, which brings a whole new world of possibilities. One of these possibilities is animation. In an ideal world, a company that moves from WinForms to WPF should have an integrator and an artist. Obviously, not all of WPF programmers are that fortunate and some have to take on the three roles. Here's an example of what I consider a good use of animation.

If working with Catherine (our artist) has taught me anything in the past three year is that "less is more", which she often loves to remind me. This is especially true with animations and more so if you have little or no experience with it. Stick with the basics. Why do you want to animate X and Y? The answer can't always be "because it's cool” or “because I can". Animations should be used to guide the user’s eyes on the screen, to give them a visual queue that something changed. It's easy to go over the top and do too much. Here's an example of what I would not recommend :

Unfortunately, this is the type of things we see in WPF applications. Too much visual noise, which overwhelms the user. I would recommend a much smoother approach. For example:

In the end, if your application is built around a "light" animation philosophy, odds are that you'll get a much slicker application. Try not to vary the type of animation you are using either. Mixing ScaleTransforms with RotateTransform can make a user nauseous. If you don't feel you have the knowledge required to determine when you should use animation, refer to the pros like what you see in Zune, which uses very smooth animation like the one I demonstrated.

Also feel free to follow me on twitter !

Raising the bar with smooth scrolling

Odi [Xceed] — Mon, 17 Nov 2008 20:35:00 GMT

In the past two years, Xceed has worked on the performance of Xceed DataGrid for WPF, and with August's release of v3.0, we feel we've achieved a great level of performance. The best in the industry if you not only count scrolling speed, but loading, sorting and grouping time as well.

Despite the new performance increases, there are still scenarios with slower systems on which the scrolling performance is not fast enough. The industry's solution to that (including Microsoft's own WPF datagrid) is to provide a "deferred scrolling mode". In deferred mode, a datagrid's display isn't updated while you are dragging the scrollbar, it updates only when you stop dragging. This scheme doesn't let you know where you will land when you let go of the thumb, so "scroll tips" were invented to display information about the first row of the page you would land on. Not a very good experience.

Earlier this year, we started working on Xceed DataGrid for WPF's "perceived performance". We added smooth scrolling to the datagrid, physics-like animation effects, and background generation and display of data items. The combination of these features provides a much better experience than with deferred scrolling, and boy does it look and feel delicious. When a user performs a "page down" action, the datagrid immediately responds by starting to smooth scroll to the next page, while fading-in the datarows as their containers and contents are generated. By the time the animation has slowed down, everything is properly displayed as expected. Instead of a delay on a slower computer when the user hits "page down", they get immediate feedback, giving the datagrid a snappy and fast feel to it. Here's a Channel 9 video (WMV High) on the new feature, and a couple more new related features such as group headers that always stay in view and touch gesture support.

Smooth Scrolling Datagrids with Xceed on Microsoft Channel9

I think it is clear that the industry looks toward Xceed as the trend-setter in WPF datagrid controls, and even WPF controls in general. We were the first to release one, the first to provide an XBAP demo (and a still unequaled one even after two years of availability), the first to announce the use in a major application such as Visual Studio Team System 2010, the first to bring 3D to datagrids, and now the first to demonstrate smooth scrolling, physics effects, touch gesture support, and background generation of UI elements to increase perceived performance.