Live blogging a XAML project with CodePlex - Now with WPF

by Bill Sempf 28. February 2009 10:59

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.

Tags:

Biz | VB

Live blogging a XAML project with CodePlex, Part Duex

by Bill Sempf 22. February 2009 10:57

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...

Tags:

Biz | VB

Live blogging a XAML project with CodePlex

by Bill Sempf 7. February 2009 10:56

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!

Tags:

Biz | VB

Hanselman has it pegged when it comes to language

by Bill Sempf 1. February 2009 11:02

I get a lot of crap for being a VB programmer.  People who think it is cool to be smarter than someone else like to point out that they code in C# (though it was Java last year and C++ the year before) and I keep writing programs that work in whatever language best suits.  Why?  I learned how to program, not how to program in X language.  I recommend it for everyone - I recommend it in the book, and Scott Hanselman says it better than I ever could.

When programming (that is, expressing your intent to the computer) you should select a language that matches up with the program you're trying to solve. Every language is, in a way, a Domain Specific Language.

Regardless of what your language of choice is, you might be someone who says all languages eventually become, or try to become Lisp, or you might think Visual Basic is the best or that PHP is God's Language, you should learn a new language every year. I code, and have coded, for many years in C#, and before that C++, but it's important for me in my personal development to remember why I learned Haskell and Lisp (I suck at Lisp) and Smalltalk, and why I return to them occasionally for a visit.

This year, I'm learning Ruby. Does that mean my team is moving to Ruby?  Probably not, but it does mean I'm learning Ruby this year because I believe in sharpening the saw. You might be too busy sawing to sharpen, but I'd encourage you - no matter what brand or type of saw you use - to remember that there are other folks out there cutting wood successfully with a different kind of saw. Maybe they know something that you don't.

The man is a genius.  Pay attention.  Learn a new language every year.  If VB is your language this year, may I suggest a good book.  For the record, I am learning Ruby too ...

Tags:

Biz | Enterprise Architecture

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.

Find me on Mastodon

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

MonthList

Mastodon