Saturday, August 14, 2010

Silverlight On Mobile : Ink Capabilities on Windows Phone 7

Hope my last post on Charting on Windows Phone 7 went well for you and you must have explore that in depth. Today I am going to talk on Ink capabilities on Windows Phone 7. As you all know, Ink capabilities is nothing new to us, I have already made 2 posts on Ink in Silverlight in past. Since Ink is functionality provided by Silverlight 3, I am going to utilize the same on Phone 7 since we all know Silverlight 3 is main platform on Phone 7.

For this, I am taking typical Windows Phone 7 Application project. For Ink capabilities, you will need reference of following :

  • System.Windows.Ink
  • System.Windows.Media
  • System.Windows.Input
  • Microsoft.Phone.Controls

Remember, The challenge on Phone 7 will be performance not for Ink but for any app you write. So as usual, I will advice you to keep things simple and not make them too jazzy. In this app, I am going to make use of App Bar (Application Bar). I know that we have not touch upon App bar in our earlier discussions, but for time being, just try to understand the syntax part of it and I will cover that App Bar in my next post since its totally a new discussion and there are lot many small things to explore. If you don’t find App Bar comfortable at moment, you can surely replace that with normal Command Buttons as I have shown in my old posts on Ink Capabilities in Silverlight.

Let us first see at the XAML part for good design.

XAML Code : For Guys n Gals who don’t want App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
          <InkPresenter x:Name="inkP" Background="Pink">
              <Button Height="73" Width="114" Foreground="Black" Content="Blue" x:Name="btnBlue" Click="btnBlue_Click" Canvas.Left="126" Canvas.Top="466" />
              <Button Content="Red" Height="72" Foreground="Black" Width="116" x:Name="btnRed" Click="btnRed_Click" Canvas.Left="230" Canvas.Top="466" />
              <Button Height="72" Width="116" Foreground="Black" Content="Green" x:Name="btnGreen" Click="btnGreen_Click" Canvas.Left="336" Canvas.Top="466" />
              <Button Height="74" Width="114" Foreground="Black" x:Name="btnClear" Content="Clear" Click="btnClear_Click" Canvas.Left="21" Canvas.Top="466" />
          </InkPresenter>
      </Grid>
The Code in Italic represents the respective buttons for drawing and you need to handle and write code in each click of button respectively.

XAML Code : For Guys n Gals who are comfortable with App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
            <InkPresenter x:Name="inkP" Background="Pink">
            </InkPresenter>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_clear" IconUri="/Images/appbar.delete.rest.png" Text="Clear" Click="appbar_clear_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_blue" IconUri="/Images/appbar.edit.rest.png" Text="Blue" Click="appbar_blue_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_red" IconUri="/Images/appbar.edit.rest.png" Text="Red" Click="appbar_red_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_green" IconUri="/Images/appbar.edit.rest.png" Text="Green" Click="appbar_green_Click"></shell:ApplicationBarIconButton>
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
There is also another option of “Menu Item”..but as we decided, not to speak too much on App Bar and focus more on Ink, so time being don’t scratch your head for this.

This peace of XAML will show the design like this :

InkDesign

From above snap, Understand the three main parts as “Ink Area”, “Command Buttons” and “App Bar”. Ink Area is area where you are going to Draw whatever you like with Ink. Out of Command Buttons and App Bar, depends what you implement in your development.

Namespaces :

using System;
using Microsoft.Phone.Controls;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;

Global Declarations :

Stroke s;
int mycol = 0;

Constructor :

inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
inkP.MouseLeftButtonDown += new MouseButtonEventHandler(inkP_MouseLeftButtonDown);
inkP.MouseLeftButtonUp += new MouseButtonEventHandler(inkP_MouseLeftButtonUp);

Mouse Events :

void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
       {
           s = null;
       }

       void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       {
           inkP.Cursor = Cursors.Stylus;
           inkP.CaptureMouse();
           s = new Stroke();
           s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           switch (mycol)
           {
               case 0: s.DrawingAttributes.Color = Colors.Black;
                   break;
               case 1: s.DrawingAttributes.Color = Colors.Blue;
                   break;
               case 2: s.DrawingAttributes.Color = Colors.Red;
                   break;
               case 3: s.DrawingAttributes.Color = Colors.Green;
                   break;
           }
           inkP.Strokes.Add(s);
       }

       void inkP_MouseMove(object sender, MouseEventArgs e)
       {
           if (s != null)
           {
               inkP.Cursor = Cursors.Stylus;
               s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           }
       }

Application Bar :

private void appbar_clear_Click(object sender, EventArgs e)
{
      inkP.Strokes.Clear();
      mycol = 0;
}

private void appbar_blue_Click(object sender, EventArgs e)
{
      mycol = 1; 
}

private void appbar_red_Click(object sender, EventArgs e)
{
      mycol = 2; 
}

private void appbar_green_Click(object sender, EventArgs e)
{
      mycol = 3; 
}

Note : Same code will work if you put this in Command Button Click event.
Now just hit F5 and your Paint app is ready ! With Ink you can do much more things like stroke adjustments,colors and lot many things which you use to do it in Web based Silverlight Ink App.

The initial screen will look like this :

GettingReady

You can draw strokes with color strokes options from Command Button if you have or from App Bar like this :

Strokes

App Bar options have some Text, so you will be able to identify each of them and not to get confuse by white icons.It will look like this :

Appbar1Appbar2
I hope with this information, you must have understood that how quickly we can implement Ink on Windows Phone 7 with minimum efforts and minimum code. Do let me know your feedback, I am coming with much more stuff in next week..Till then enjoy WP7 Development !

ILUWP

Vikram.

No comments: