WinFX: Fun with InkCanvas

Here's a fun little InkCanvas sample app... yeah that's right, it's tic-tac-toe.  What?  This ain't rocket science.  (It does, however, include source code for a very, very simple handwriting recognition engine. :-)

I got my web host to turn on the MIME type mappings for .xaml and .xbap files -- now you can play TicTacToeFX right in your browser (IE6-7)!

<Page x:Class="TicTacToeFX.Page1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="TicTacToeFX">

 

  <Viewbox Margin="50" MinWidth="100" MinHeight="100">

    <InkCanvas Name="inkCanvas1" Width="300" Height="300"

        EditingModeInverted="None" StrokeCollected="InterpretStroke">

      <Grid Name="squares"

          Width="{Binding ElementName=inkCanvas1,Path=ActualWidth}"

          Height="{Binding ElementName=inkCanvas1,Path=ActualHeight}">

 

        <Grid.Background>

          <LinearGradientBrush>

            <LinearGradientBrush.GradientStops>

              <GradientStop Offset="0" Color="LightBlue" />

              <GradientStop Offset="1" Color="DarkBlue" />

            </LinearGradientBrush.GradientStops>

          </LinearGradientBrush>

        </Grid.Background>

 

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width="*" />

          <ColumnDefinition Width="*" />

          <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

          <RowDefinition Height="*" />

          <RowDefinition Height="*" />

          <RowDefinition Height="*" />

        </Grid.RowDefinitions>

 

        <Canvas Background="#EEC" Margin="8,8,3,3" Grid.Column="0" Grid.Row="0" />

        <Canvas Background="#EEC" Margin="3,8,3,3" Grid.Column="1" Grid.Row="0" />

        <Canvas Background="#EEC" Margin="3,8,8,3" Grid.Column="2" Grid.Row="0" />

        <Canvas Background="#EEC" Margin="8,3,3,3" Grid.Column="0" Grid.Row="1" />

        <Canvas Background="#EEC" Margin="3,3,3,3" Grid.Column="1" Grid.Row="1" />

        <Canvas Background="#EEC" Margin="3,3,8,3" Grid.Column="2" Grid.Row="1" />

        <Canvas Background="#EEC" Margin="8,3,3,8" Grid.Column="0" Grid.Row="2" />

        <Canvas Background="#EEC" Margin="3,3,3,8" Grid.Column="1" Grid.Row="2" />

        <Canvas Background="#EEC" Margin="3,3,8,8" Grid.Column="2" Grid.Row="2" />

 

      </Grid>

    </InkCanvas>

  </Viewbox>

 

</Page>

Oh, and there's some codebehind too.  We haven't yet released a version of the Ink Analysis library which can be deployed via HTTP, so I had to cruft up a simple stroke classifier to distinguish between "X" and "O"... 

Enjoy!  Here's the URL: http://www.windojitsu.com/tictactoefx/tictactoefx.xbap