Live blogging a XAML project with CodePlex - handling failure

I bet you all think that I mean failing at writing  the game, didn't ya?  Hmm?  Ha!  Not so fast my friend, I mean handling the last requirement in the project - failing the press the correct letter before the letterbox hits the bottom of the screen.

So what I want to do is check on timer click of the letter has hit the bottom, and if it has then fire off a new message (Oh no instead of Wow) and get a net letter at the top,  Should be good enough for a three year old, I figure.  As I get better in XAML I can make more features, right?

To start off I will modify the ShowWow so that it accepts a TextBlock and renders its transform no matter what it is.  I changed the name of the function to ShowMessage and used the VB refactoring feature to change all references.  Then I altered the signature to accept a textblock as a parameter, and used that object in the code instead of WowTextblock.  Finally, I changed the calling function so that it passes un WowTextblock.  Sounds like a lot, but it just took a second.  ShowMessage now looks like this:

Public Sub ShowMessage(ByVal blockToTransform As TextBlock)
    'Make an animation for the scale
    Dim blockAnimation As New DoubleAnimation(0, 100, New Duration(New TimeSpan(0, 0, 3)))
    'Make another for the opacity
    Dim blockOpacity 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 blockTransform As ScaleTransform = DirectCast(blockToTransform.RenderTransform, ScaleTransform)
    blockTransform.CenterX = 11
    blockTransform.CenterY = 7
    blockTransform.ScaleX = 1
    blockTransform.ScaleY = 1
    'Then run all of the animations
    blockTransform.BeginAnimation(ScaleTransform.ScaleXProperty, blockAnimation)
    blockTransform.BeginAnimation(ScaleTransform.ScaleYProperty, blockAnimation)
    blockToTransform.BeginAnimation(TextBlock.OpacityProperty, blockOpacity)
End Sub


Alright, now I need to add a XAML element that has the Oh No! text in it.  I think I'll make it red.  I just copied the Wow! textblock and edited it.

<TextBlock x:Name="ohNoTextblock" Opacity="0" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Oh no!" Visibility="visible">
    <TextBlock.RenderTransform>
        <ScaleTransform></ScaleTransform>
    </TextBlock.RenderTransform>
</TextBlock>


So now clockCheck looks like this:

Private Sub ClockCheck() Handles gameClock.Tick
    letterBoxTop = letterBoxTop + 10
    letterBox.Margin = New Thickness(letterBoxLeft, letterBoxTop, 0, 0)
    'Check to see if it is at the bottom
    Dim bottom As Double = gameBoard.Height
    If letterBoxTop + letterBox.Height > bottom Then
        'It has hit the bottom.  
        gameClock.Stop()
        scoreCount = scoreCount - 1
        'Fire the Oh No message
        ohNoTextblock.Opacity = 100
        ShowMessage(ohNoTextblock)
        'Restart the letter
        SetupLetterBox()
        gameClock.Start()
    End If
End Sub


And there we are!  Kid tested, mother approved too.  I'll post a video of Adam playing it this weekend, when I do my post about further enhancements.  Also, I will check in the changes to CodePlex right now before I forget.

To create a release in CodePlex, I just had to go to the releases tab and Add a New Release.  That gives me a really nice little mini-wiki for the release, and an upload facility for the binary.  I made a few notes and loaded it up!  CodePlex is a really nice, simple facility for opensource work - better than SourceForge for simple projects.  I like it a lot.

I hope this little series has been helpful to everyone - it sure has for me.  I think that XAML is likely the future of Microsoft UI programming, so it behooves us all to get our feet wet as soon as we can, to make the curve less steep when our projects make the move.  Please leave any thoughts in the comments.

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

  1. Add a little pizzaz to the notifications
  2. 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.

Live blogging a XAML project with CodePlex, Part Duex

And we are back at the Letters Are Falling project, which has it's own Codeplex URL now ... heh.  If you remember from the last post, we need to

  1. Randomize the letter.
  2. Randomize the start position right to left.
  3. Make it more fun when you win.
  4. Handle it when you lose.

I am going to start with the first two.  For now, I am going to keep this pretty declaritive, and try and use the WPF objects 'correctly' later once I get the bugs worked out of the logic.

Let's add two functions: one for the left randomization and one for the letter randomization.  The left randomization needs to set the left margin anywhere from zero to the width of the window minus the width of the letterBox.  The letter randomization needs to pick from a selection of letters, which we will later make configurable.

Now, certain other things have to happen to make this a game.  It has to restart when you get the right letter, keep score, things I forgot in the original requirements.  In order to do this, I have to set up the game to reset the letterbox, and not have all of the code in the form load event.  To do this, I have built a new function to set up the letterbox, which calls the two new randomization functions.  Then I can change my keypress event to make some gametime decisions, including a Quit function.

The VB file now looks like this:

   1:  Class gameBoard
   2:      Public WithEvents gameClock As New DispatcherTimer
   3:      Private letterBoxTop As Double = 0
   4:      Private letterBoxLeft As Double = 0
   5:      Private scoreCount As Integer = 0
   6:      Private Sub gameBoard_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
   7:          SetupLetterBox()
   8:          gameClock.Interval = New TimeSpan(0, 0, 1)
   9:          gameClock.Start()
  10:      End Sub
  11:      Private Sub SetupLetterBox()
  12:          letterBoxLeft = GetLeftMargin()
  13:          letterBoxTop = 0 - letterBox.Height
  14:          letterBox.Margin = New Thickness(letterBoxLeft, letterBoxTop, 0, 0)
  15:          Dim currentLetter As String = GetLetter()
  16:          letterBox.Content = currentLetter
  17:      End Sub
  18:      Private Sub LetterPress(ByVal sender As System.Object, ByVal e As System.Windows.Input.KeyEventArgs) Handles MyBase.KeyDown
  19:          If e.Key.ToString.ToUpper = letterBox.Content.ToString.ToUpper Then
  20:              gameClock.Stop()
  21:              scoreCount = scoreCount + 1
  22:              MessageBox.Show(String.Format("You got it!!{0}Your score is {1}!!", vbCrLf, scoreCount))
  23:              SetupLetterBox()
  24:              gameClock.Start()
  25:          ElseIf e.Key = Key.Escape Then
  26:              MessageBox.Show(String.Format("Goodbye!{0}Your score is {1}.", vbCrLf, scoreCount))
  27:              MyBase.Close()
  28:          End If
  29:      End Sub
  30:      Private Sub ClockCheck() Handles gameClock.Tick
  31:          letterBoxTop = letterBoxTop + 10
  32:          letterBox.Margin = New Thickness(letterBoxLeft, letterBoxTop, 0, 0)
  33:      End Sub
  34:      Private Function GetLeftMargin() As Integer
  35:          Dim result As Integer = 0
  36:          result = (New Random().Next) Mod CInt(gameBoard.Width - letterBox.Width)
  37:          Return result
  38:      End Function
  39:      Private Function GetLetter() As String
  40:          Dim result As String
  41:          Dim lettersList As String() = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"}
  42:          Dim listIndex As Integer = (New Random().Next) Mod lettersList.Length
  43:          result = lettersList(listIndex).ToString
  44:          Return result
  45:      End Function
  46:  End Class

In the next edition of Live Blogging a XAML project, we will get into a little more of the XAML itself, including getting rid of the messagebox, and adding a little pizzaz!  Until next time...

Live blogging a XAML project with CodePlex

So, I am writing a game for my son.  It's a Raining Letters type game.  You know, where a letter falls from the top of the screen and the player has to find it and push it on the keyboard before it gets to the bottom of the screen?  Adam has a little hand held game that works this way, but he is ALWAYS on his PC these days so I thought this would be better and a good way for me to learn XAML in the Windows world.  Teach him the ABCs now and teach him the XAML later, right?

Anyway, I started to chat about it on Twitter, and I decided that 1) all of the things I learned would get lost quickly and 2) I would drive everyone absolutely nuts.  So I decided to write an epic blog entry about what I learn.

I am doing this the way I write most of my prototypical applications, and starting very simple and adding in functionality.  I started, then, with a WPF project in VB.  It comes with a window; I added a label in the designer and a timer in the VB file.  On load, I set the Margin of the label to a new thickness with a left of a random number and the top up above the top of the screen.  On the timer click , I add 10 to the top thickness.  When the user clicks the right letter on the keyboard, they win.  Simple.  I'll make it better as I go.

Whoops.  Timer didn't work.  WPF components are compartmentalized.  Didn't know that.  Found a blog entry that helps me out, points me to DispatcherTimer instead.  Gotcha, I can do that.  It is in the System.Windows.Threading class, for which I need to add a reference.  Uses a 'Tick' event rather than an 'Elapsed' event.  that makes me think the windows guys and the Framework guys at Microsoft need to get together and have a beer.

Anyway, I have a working game!  Only does one letter, and not a lot of fun yet, but it's a start.  Here is the XAML:

<Window x:Class="gameBoard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="The Letters Are Falling!" Height="480" Width="640" Name="gameBoard">
    <Grid>
        <Label Name="letterBox" FontSize="100" HorizontalAlignment="Left" Width="71" Height="110" VerticalAlignment="Top">A</Label>
    </Grid>
</Window>

Here is the VB code:

Class gameBoard
    Public WithEvents gameClock As New DispatcherTimer
    Public letterBoxTop As Integer = 0
    Private Sub gameBoard_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
        letterBoxTop = 0 - letterBox.Height
        letterBox.Margin = New Thickness(100, letterBoxTop, 0, 0)
        gameClock.Interval = New TimeSpan(0, 0, 1)
        gameClock.Start()
    End Sub
    Public Sub LetterPress(ByVal sender As System.Object, ByVal e As System.Windows.Input.KeyEventArgs) Handles MyBase.KeyDown
        If e.Key.ToString = "A" Then
            gameClock.Stop()
            MessageBox.Show("you win!")
        End If
    End Sub
    Public Sub ClockCheck() Handles gameClock.Tick
        letterBoxTop = letterBoxTop + 10
        letterBox.Margin = New Thickness(100, letterBoxTop, 0, 0)
    End Sub
End Class

Now I have a proof of concept, right?  I just need to dig in and get a few features installed.

  1. Randomize the letter.
  2. Randomize the start position right to left.
  3. Make it more fun when you win.
  4. Handle it when you lose.

I think I need to work on this tomorrow.  It's a little late and I have a three year old that will be up at 7.  I want to check this into CodePlex.  I have an account there but have never used it.  Wonder how it works.

Go sign in and Create a Project.

The Letters Are Falling! has been created

Congratulations, you've successfully created your project, theLettersAreFalling, on CodePlex.com.

Great!   Now what?  OK, I apparently have 30 days to publish.   Well heck I want to NOW.  Oh, I have a link.  Let's see what's there.

Ah, I need to do a few things.  Edit the homepage.  Wikitext, gotcha.  Done.  Upload the source.  I need to download and install TotriceSVN for Subversion.  Mmmmm .... done.  Give them a few bucks via PayPal.  Reboot.  Grrr ... do that in a little bit.  Freakin windows menu system.

Alright.  Back from reboot.  Right click on the Folder and Import from the TortiseSVN menu.  Put int the URL, username and password CodePlex gave me ... easy.  Wow.  I need to use this for the book code.  Alright.  Moving on.

Pick a license - easy.  Same as the book code - share and share alike!  Oooooh ... not so easy - CC licenses aren't in CodePlex.  I remember reading about this.  Booooooooo.  Damn, now I have to research for a bit.  Let's go with Stallman - he is smarter than me.  Copyleft - the way this stuff should be, right?  I select the GPL and move on.  Done.

Clicking Publish this Project.

Hey, now.  Look at that.

Alright, I am using this for evrything from now on.  Man, are ALL of these repositories this good?  I shoulda been doing this a while ago.  VB for Dummies 2008 code going up ASAP.  Everyone get a codeplex account!  New favorite software.

Anyway, tomorrow we do the RAD rotation, and add features to the POC.  Isn't this fun?

Have a good evening!

Bill Sempf

Husband. Father. Pentester. Secure software composer. Brewer. Lockpicker. Ninja. Insurrectionist. Lumberjack. All words that have been used to describe me recently. I help people write more secure software.

profile for Bill Sempf on Stack Exchange, a network of free, community-driven Q&A sites

MonthList