Continue reading »]]> Silverlight’s community in Bulgaria is getting stronger every day, due to a couple of reasons:

• The course we’re having at The University of Sofia. Currently we have more than 100 students eager to know and start using Silverlight. Till now we had 5 very good lectures and nice demos in Bulgarian language.
• The very strong and permanent Sofia’s Silverlight group. We meet every month to share and learn “What’s new” and “How to”  with Silverlight.

You can also meet the Bulgaria’s Silverlight MVP – Emil Stoychev at MicrosoftFeed.

Continue reading »]]> This list with performance tips is collected from many sources, including my personal experience. It is supposed to evolve and grow in the future.

Basic performance tips, regarding your code

• Minimize your XAML – the smaller the better. Do not allow Blend or VS to blow it up.
• Always think about “The Visual Tree”. Keep it small. Understand all controls with their visual trees. Use the simplest controls that will work in your case.
• Always collapse not needed UIElements or remove them from the Visual Tree.
• Opacity = 0 is different from Visibility = Collapsed.
• Use Image.Stretch = “Fill” to prevent any layout updates due to stretching, whenever is possible.
• Do NOT use Path with explicit Height/Width values and do NOT allow parent controls to stretch it. Paths are supposed to be as big as the Data property says (Unless you don’t need it).

Silverlight Plug-in options

• Avoid Using Windowless Mode
• Use Transparent Background only when needed

Animations

• Always be aware of the frame-rate.
  • Think about the frame-rate on per Animation bases. More about this here.
• Big moving elements are always CPU expensive (Due to big redrawn regions).
• Understand each animation how expensive is.
• Understand CompositionTarget.Rendering event and use it if possible.
• Storyboards and animations over big regions are very expensive. Try to minimize them.
• Do not allow layout pass while animation is running (unless this is what you need). This means not to animate properties that are related to the Layout system like Height, Width, Visibility, Alignments, Margins…
• Text Animations – By default, Silverlight optimizes text for readability. That’s why animating text is expensive. Unless we do one of the following.
  • Set TextRenderingMode = RenderForAnimation
  • If the text is static, we can replace it with Image of the text and animate the Image control.

Monitor the performance during development

• MaxFrameRate = 10.000
• EnableFrameRateCounter = true
• EnableRedrawRegions = true
• Use Process Explorer to monitor the CPU usage

Advanced tips

UI Caching

• WriteableBitmap – more on this here.

• GPU cache – more on this here.

Can be very useful when cached elements are being translated, scaled, rotated or blended using opacity. Also it will work better if the cached elements are Leaf nodes in the visual tree.

• Limitations: You can’t cache elements that have been:
  • Projected using Plane/MatrixProjections
  • Applied effect, including Pixel Shader.
  • Applied opacity mask.
  • Applied non-rectangular clipping.

In order to make this list more helpful – all comments are more than welcome.

Continue reading »]]> See it in Action. Just drag the mouse before and after clicking 'cache them'. Also can check the CPU usage at the moments of dragging.

The old time Bitmap Caching is very useful performance optimization technique. And as we know we have good support for it in Silverlight. To cache an UIElements in the GPU memory is as easy as setting one property (CacheMode =”BitmapCache”) and enable it on the plug-in level (EnableGPUAccelaration = true). But this has a lot of limitations in Silverlight 3 (and little more features in Silverlight 4 – we’ll be able to cache objects that have been Projected).

But the limitations with GPU caching are driving us to one other option – to implement Bitmap Caching at our own. So we’ll “paint” our UIElements to Bitmap with WriteableBitmap API that Silverlight provide. This could be very helpful in a case that we have a lot of UIElements in the Visual Tree that are somehow static at the moment, and we’re suppose to start animation on some other objects.

The Algorithm

1. Cache the static elements with WriteableBitmap
2. Remove them from the Visual Tree
3. Insert on their place the newly created Image
4. Animate something or do some expensive UI work over very lighter Visual Tree
5. Enjoy the much better User Experience

For the example we’ll generate 300 random Borders and will Project them.

And the code itself

1
2
3

WriteableBitmap bitmapCache = new WriteableBitmap(ObjectsCanvas, null);
InnerGrid.Children.Remove(ObjectsCanvas);
CacheImage.Source = bitmapCache;

XAML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Grid x:Name="LayoutRoot">
    <Grid x:Name="InnerGrid"
          WriteableBitmapTest:DraggingBehavior.IsDraggable="True">
        <Canvas x:Name="ObjectsCanvas"
                Background="Transparent">
        </Canvas>
        <Image x:Name="CacheImage" />
    </Grid>
    <Button Content="Cache them!"
            Click="Button_Click"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Margin="10" />
</Grid>

I’ve used this technique in a couple of projects with very good success. In Graph My Code when you search for item or click it, the whole thing is cached and you’ll experience smoother animations.

Download code here!

Continue reading »]]> This time I’ll talk about “How to enable animations between pages using the Navigation Framework“. So whenever we navigate to page using HyperlinkButton,  Browser history, Back / Forward browser buttons  or just navigate to a deep-link, we’ll be able to run animation between the content of the pages. This technique is very useful for both – Line Of Business Applications and Rich Internet Applications.

Test it yourself.

I’ll inherit from the Frame class, and lets name this class TransitionFrame. The Frame class is ContentControl with enabled some Navigation features. And the idea is pretty simple and well-known from the Toolkit’s TransitioningContentControl. We’ll have two ContentPresenters for both the current page and previous one, so this will allow us to run animation between the pages.

TransitionFrame

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

public class TransitionFrame : Frame
{
private ContentPresenter CurrentContentPresentationSite;
private ContentPresenter PreviousContentPresentationSite;</code>
 
public TransitionFrame()
{
DefaultStyleKey = typeof (TransitionFrame);
}
 
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
 
PreviousContentPresentationSite = GetTemplateChild("PreviousContentPresentationSite") as ContentPresenter;
CurrentContentPresentationSite = GetTemplateChild("CurrentContentPresentationSite") as ContentPresenter;
 
if (CurrentContentPresentationSite != null)
{
CurrentContentPresentationSite.Content = Content;
}
}
 
protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);
 
if ((CurrentContentPresentationSite != null) &amp;&amp; (PreviousContentPresentationSite != null))
{
CurrentContentPresentationSite.Content = newContent;
PreviousContentPresentationSite.Content = oldContent;
 
VisualStateManager.GoToState(this, "Normal", false);
VisualStateManager.GoToState(this, "Transition", true);
}
}
}

I’ll use VisualStateManager for dealing with the animations. And lets define two states:

• Transition state – run the animation between pages. (change this to make custom animations)
• Normal state – enables the control to go back to Transition state, when needed.

ControlTemplate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PresentationStates">                                
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Transition">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="PreviousContentPresentationSite"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="00:00:01.300">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="CurrentContentPresentationSite"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00"
                                              Value="0" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.300"
                                              Value="1" />
                    </DoubleAnimationUsingKeyFrames>
 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="CurrentContentPresentationSite"
                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00"
                                              Value="100" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.300"
                                              Value="0" />
                    </DoubleAnimationUsingKeyFrames>
 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="PreviousContentPresentationSite"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00"
                                              Value="1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.300"
                                              Value="0" />
                    </DoubleAnimationUsingKeyFrames>
 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="PreviousContentPresentationSite"
                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00"
                                              Value="0" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.300"
                                              Value="-100" />
                    </DoubleAnimationUsingKeyFrames>   
                </Storyboard>
            </VisualState>                                
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
        <ContentPresenter x:Name="PreviousContentPresentationSite"
                          Content="{x:Null}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
            <ContentPresenter.RenderTransform>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </ContentPresenter.RenderTransform>
        </ContentPresenter>
        <ContentPresenter x:Name="CurrentContentPresentationSite"
                          Content="{x:Null}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
            <ContentPresenter.RenderTransform>
                <TransformGroup>
                    <ScaleTransform />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </ContentPresenter.RenderTransform>
        </ContentPresenter>
    </Grid>
</Border>

Download Source Code

Continue reading »]]> We had very nice Silverlight sessions this year at the MS days. The well-known speaker and actually very nice guy – Daron Yöndem, gave fantastic presentations on the new Out-of-browser capabilities in Silverlight 4 and also on the cool stuff about Multi-Touch in both Silverlight and WPF. Me and Emil Stoychev also made a very good presentation, but this was not on “what can we do with Silverlight“, but “What we already Did with Silverlight“. It was all about the CompletIT web-site, and it was entirely How To session, including the real examples, problems and solutions we came up with the implementation. I think it was really nice session, with a lot of tips and tricks. Hope the audience think so, as well.
I have some pictures. Big thanks to Daron again – he is also very good with the camera.

Me and Emil @ the start of the session.

We are preparing something that looks great.:) 

Maybe I'm explaining something.

I hope everybody enjoyed the conference or at least the Silverlight Sessions.

Continue reading »]]> If you ever needed to create very high intensive WPF application  where most of the screen is re-rendered on every frame, you’ve definitively  been using the Timeline.DesiredFrameRate. Let’s suppose you have extremely big background images that are moving around in a beautiful manner. If you animate this using the usual Silverlight animation framework (a.k.a Storyboards and Animations) you’ll end up with extremely bad performance and very big CPU usage. You have animations that are on the background and you don’t want them to utilize the whole CPU time, because  you have more important animations to take care of at the foreground of your app/game.

The actual problem here is that when animating, for example TranslateTransform of an Image, Silverlight engine will try to animate it at MaxFrameRate allowed for the plugin. But this framerate will cost you high frequent redrawing regions and a lot of  CPU time, so you’ll end up with slow performance for your more important foreground animations.

What we can actually do is to create our own framework, where we can specify for each animation the exact maximum of  allowed framerate (like the holly Timeline.DesiredFrameRate do in WPF).

Check out the planes demo and see the performance difference.

Using the build-in animations the planes and clouds are moving at max framerate, while using our custom framework – the two clouds are moving at 15fps and the planes are “flying” at 24fps. As a result we have about 4 times drop of CPU usage.

Implementation

Our animations will be based on the CompositionTarget.Rendering event, which occurs when the core Silverlight rendering process renders a frame. The idea is to create somehow similar classes like the *Animation but with added FramesPerSecond property. After all having From, To, Duration and FramesPerSecond, with simple math we can calculate:

• FramesCount – How many frames will be needed to be “rendered” (animate the property)
• By - The value that will be used for progressing the animation (this actually is done in the implementation of the sub-classes, for example the DoubleAnimation)

Here is the base Animator:

1
2
3
4
5
6
7
8
9

public virtual void Initialize(FrameworkElement el)
{
this.element = el;
this.ticks = TimeSpan.TicksPerSecond / FramesPerSecond;
 
this.totalTicks = Duration.TimeSpan.Ticks;
 
this.frames = totalTicks / ticks;
}

And for example the TranslateAnimator implementation:

1
2
3
4
5
6
7
8
9
10

public override void Initialize(FrameworkElement element)
{
base.Initialize(element);
 
ScaleTransform scale;
RotateTransform rotate;
SkewTransform skew;
 
element.EnsureTransforms(out scale, out rotate, out skew, out translate);
}

The actual trick is that in the Rendering event handler, we check the time ticks and decide whether, for example to translate the element or not.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public bool NextFrame()
{
long now = DateTime.Now.Ticks;
 
if (now - lastTick < ticks) //Due to FPS.
return true;
 
if (BeginTime.HasValue && now < BeginTime.Value.Ticks + firstTIck)
return true;
 
lastTick = now;
currentFrame++;
 
var time = (double) currentFrame/frames;
 
coef = EasingFunction != null ? EasingFunction.Ease(time) : time;
 
NextFrameOverride();
}

And the implementation of the real code for it is in the virtual method NextFrameOverride().
The container of all these animators is called AnimationFrame. This is where we hook for the CompositionTarget.Rendering event and also the place where  all animators are called to render their next frames.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private static void CompositionTarget_Rendering(object sender, EventArgs e)
{
foreach (var animatorPair in animators)
{
if (!animatorPair.Value.NextFrame())
finishedItems.Add(animatorPair.Key);
}
 
foreach (var item in finishedItems)
{
animators.Remove(item);
SetAnimator(item, null);
}
finishedItems.Clear();
}

And couple of more goodies:

• You just attach the needed animator to UIElement and it works (no need to add all the Transforms in your XAML)
• It’s easy to create new animators
• There is also CompositeAnimator, that enables you to provide more than one animator for a UIElement
• Support for Easing functions

Download Code Here.

There is also an example project comparing the performance of Animators and Animations.

Cheers