A Simple Paint App on Windows Phone 7 using InkPresenter

Windows Phone 7 tools comes shipped with InkPresenter control . In this simple application , I  will select a color and draw on drawing surface which is an InkPresenter. Lets start.

Open Expression Blend , Select Windows Phone Application template.

pic1

For drawing surface , select  the InkPresenter control from Assets panel and draw it on ContentPanel(Grid). Call it as drawingCanvas.

pic3

Draw a simple palette  with ellipses of various colors laid over a colored rectangle to make it look like a palette.

pic4

After setting the page name and background color , below is how my paint app looks. Cool isn’t it.. 🙂

alt

Ok so UI is ready, lets wire it up with code-behind.

We need 2 variables . One to capture stroke and other to set the color of stroke.

SolidColorBrush colorPicked;
Stroke _colorStroke;

To capture mouse movements, we have to handle MouseLeftButtonUp, MouseLeftButtonDown and MouseMove events for the drawingCanvas.

 private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            drawingCanvas.CaptureMouse();
            _colorStroke = new Stroke();
            _colorStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(drawingCanvas)));
            _colorStroke.DrawingAttributes.Color = colorPicked.Color;
            drawingCanvas.Strokes.Add(_colorStroke);

        }

        private StylusPoint GetStylusPoint(Point position)
        {
            return new StylusPoint(position.X, position.Y);
        }
        private void drawingCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (_colorStroke != null)
            {
                _colorStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(drawingCanvas)));
            }
        }

        private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _colorStroke = null;
        }

 

For selecting a color from palette we will wire up every ellipse in palette with a MouseLeftButtonDown  event and  set brush used to draw strokes with the Fill of the ellipse .

 private void SelectColor(object sender, MouseButtonEventArgs e)
        {
            Ellipse selectedEllipse = sender as Ellipse;
            colorPicked = selectedEllipse.Fill as SolidColorBrush ;
        }

XAML code is below.

<Grid x:Name="LayoutRoot">
		<Grid.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FF00243B" Offset="0"/>
				<GradientStop Color="#FF005185" Offset="0.992"/>
			</LinearGradientBrush>
		</Grid.Background>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FFA19696"/>
			<TextBlock Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="#FFC04111"><Run Text="P">
					<Run.Foreground>
						<SolidColorBrush Color="#FFA120FF">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="a">
					<Run.Foreground>
						<SolidColorBrush Color="#FF1BADEB">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="i">
					<Run.Foreground>
						<SolidColorBrush Color="#FFFFE153">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="n">
					<Run.Foreground>
						<SolidColorBrush Color="#FF56C011">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="t "/></TextBlock>
		</StackPanel>
		<Grid x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
			<InkPresenter Background="White"
				x:Name="drawingCanvas" MouseLeftButtonDown="drawingCanvas_MouseLeftButtonDown"
				MouseMove="drawingCanvas_MouseMove"
				MouseLeftButtonUp="drawingCanvas_MouseLeftButtonUp" Margin="8,8,8,197"/>
			<Rectangle Height="174" RadiusY="26" RadiusX="26" Margin="8,0,8,8" VerticalAlignment="Bottom">
				<Rectangle.Fill>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FF065474" Offset="0.004"/>
						<GradientStop Color="Black" Offset="1"/>
					</LinearGradientBrush>
				</Rectangle.Fill>
			</Rectangle>
			<Ellipse Height="66" Width="68" Fill="#FF005CF1"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="26,0,0,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFFF0C00"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="26,0,0,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFFDFF1F"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="108,0,0,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FF3AC00C"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="106,0,0,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Fill="#FF80007B"
				MouseLeftButtonDown="SelectColor" Margin="184,0,204,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFE99A0B"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,128,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FF9D073E"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,48,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Fill="#FF1A0CC0"
				MouseLeftButtonDown="SelectColor" Margin="184,0,204,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFA6C00C"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,128,16" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFBE02F9"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,46,18" VerticalAlignment="Bottom"/>
		</Grid>

		<!--ContentPanel - place additional content here-->
	</Grid>

This is it . Run your app and enjoy playing with strokes of different colors.

pic6

The xaml code above can surely be customized to include a WrapPanel with ellipses of various colors and loading the palette on click of button.

Below are some real good links for working with InkPresenter.

http://www.nickharris.net/2010/03/silverlight-for-mobile-on-windows-phone-7-inkpresenter-fun/

http://rongchaua.net/blog/windows-phone-signature-capturing-with-inkpresenter-and-save-to-png-file/

Advertisements

One Response to “A Simple Paint App on Windows Phone 7 using InkPresenter”

  1. Nirav Patel Says:

    Good One!!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s