Feb 28, 2009 Biz VB

Live blogging a XAML project with CodePlex - Now with WPF

OK, we have th game basics, we have enforced the game rules, now we need to make it playable. In order to do this (according to the original requirements) we need to

Add a little pizzaz to the notifications
Handle it when the player looses a letter

So I found that in order to proceed with this project, I needed to define a few terms.

XAML - it's basically HTML.
WPF - It's ASP.NET, or Cold Fusion, or JSP. Control that render XAML, like the ASP.NET controls render HTML.

So where does this leave us? A whole, totally new library to learn, after having already learned HTML since 1992 when it had twelve tags. Oh, and you windows programmers? You too. This replaces EVERYTHING - Windows "ActiveX" and web. It's global! Yay. Replaces Flash even - WPF and XAML run Silverlight. Rah. I can't even hide my excitement.

So why am I upset? Well, I like HTML. It does what I need. But I understand that it doesn't fill 100% of what people want, and XAML with WPF probably will. Problem is when you make a tool that meets everyone's needs, it becomes unusable. As that say the docs are 'tl;dr;: 'too long; didn't read'. There are hundreds of options - in HTML there are a few dozen. Some say that constrains creativity, I think it enhances it. To each their own.

Polymorphic animation.

Anyway, it's a technology that the biggest software company in the world has embarrassed so I should learn it right? Right. There are at least two ways to put text in the viewable area - the letterBox, which we are using for the Game Piece, and the textblock. The TextBlock is what is needed for the Wow! animation.

One of the nice things about XAML is that it is polymorphic. Polymorphic is the property of being able to be context sensitive. If you have a fruit class, and there is a Fruit.Peel method, a polymorphic Peel method will know that you take the skin from a banana, take the seeds out of a pomegranate and don't bother with a grape unless you are making pie. (No really. My stepmom just made a grape pie last month. It was yummy.)

I am pontificating and this is supposed to be a liveblog of a project. Let it be said that you can apply an animation to an object, and they are truly polymorphic. Therefore, we have a textblock, and we want to apply two animations to it. The animations will automagically treat the textblock properly, thus showing us their polymorphic nature.

Enough of that.

I want a flying 'Wow'. To do this, I need to animate two properties: the scale of the block, and the opacity of the text.

There are two ways to implement an animation in WPF. You can use a storyboard in XAML, which is more of a Microsoft Expression thing to do, or you can apply the methods in code, which is what I want to do. This is a VB blog, after all.

To animate the scale, I have to add an empty ScaleTransform object to the TextBlock.

<TextBlock x:Name="wowTextblock" Opacity="0" Foreground="Green" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Wow!" Visibility="visible">
    <TextBlock.RenderTransform>
        <ScaleTransform></ScaleTransform>
    </TextBlock.RenderTransform>
</TextBlock>

This isn't necessary with the Opacity animation because the Opacity is already a property of the TextBlock. I know that Width and Height are too, but scaling them isn't. I suppose I can get behind that. Anyway.

To animate the block, I am going to make two DoubleAnimation objects, and then BeginAnimation them one after another. The Opacity I can directly apply, but the Scale I have to go get from the XAML and then set a few properties for. I packed the whole thing into a subroutine I called ShowWow. I will replace the old MessageBox.Show with a call to the new ShowWow method. Here is the code:

    Public Sub ShowWow()
        'Make an animation for the scale
        Dim wowAnimation As New DoubleAnimation(0, 100, New Duration(New TimeSpan(0, 0, 3)))
        'Make another for the opacity
        Dim wowOpacity As New DoubleAnimation(1.0, 0.0, New Duration(New TimeSpan(0, 0, 3)))
        'Go grab the ScaleTransformation from the XAML and se tthe properties
        Dim wowTransform As ScaleTransform = DirectCast(wowTextblock.RenderTransform, ScaleTransform)
        wowTransform.CenterX = 11
        wowTransform.CenterY = 7
        wowTransform.ScaleX = 1
        wowTransform.ScaleY = 1
        'Then run all of the animations
        wowTransform.BeginAnimation(ScaleTransform.ScaleXProperty, wowAnimation)
        wowTransform.BeginAnimation(ScaleTransform.ScaleYProperty, wowAnimation)
        wowTextblock.BeginAnimation(TextBlock.OpacityProperty, wowOpacity)
    End Sub

Of course, you can download the whole thing from the codeplex site for the project. Next time, we'll handle missed letters, and then call it a project. Have fun! I hope this is being some help to those working in WPF.

Related posts