|
In this article we will discuss about drawing or paint feature on Windows Phone 7. To paint or draw on the screen of Windows Phone 7 using fingers are pretty simple. I will demonstrate it using very simple example. This example will contain one button to clear the page.
Let's write some code.
Step 1: Create a new Windows Phone Application project. Select Silverlight for Windows Phone installed templates.
Step 2: Replace TitlePanel StackPanel of MainPage.xaml with
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Drawing" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
Step 3: Add InkPresent in the ContentPanel Grid of MainPage.xaml. Virtual ink that comes out of stylus or touch get rendered on InkPresenter. InkPresenter derives from canvas panel.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<InkPresenter Name="inkPresenter" />
</Grid>
Step 4: Add a class level stroke dictionary object in MainPage.xaml.cs. It will be used to maintain multi-point touch data. As soon as a finger touches the screen integer ID gets associated with the finger till the finger lifts off. To keep the finger ID associated with the stroke below Dictionary needs to be defined.
Dictionary <int, Stroke> activeStrokes = new Dictionary<int, Stroke>();
Step 5: Add OnTouchFrameReported event in the constructor of MainPage.xaml.cs.
public MainPage()
{
InitializeComponent();
Touch.FrameReported += OnTouchFrameReported;
}
Step 6: Add reference of System.Windows.Ink.Below OnTouchFrameReported draws the image on the screen when finger is moved on the screen.
void OnTouchFrameReported(object sender, TouchFrameEventArgs args)
{
TouchPoint primaryTouchPoint = args.GetPrimaryTouchPoint(null);
if (primaryTouchPoint != null && primaryTouchPoint.Action == TouchAction.Down)
{
args.SuspendMousePromotionUntilTouchUp();
}
TouchPointCollection touchPoints = args.GetTouchPoints(inkPresenter);
foreach (TouchPoint touchPoint in touchPoints)
{
Point pt = touchPoint.Position;
int id = touchPoint.TouchDevice.Id;
switch (touchPoint.Action)
{
case TouchAction.Down:
Stroke stroke = new Stroke();
stroke.DrawingAttributes.Color = Color.FromArgb(255, 255, 255, 255);
stroke.DrawingAttributes.Height = 3;
stroke.DrawingAttributes.Width = 3;
stroke.StylusPoints.Add(new StylusPoint(pt.X, pt.Y));
inkPresenter.Strokes.Add(stroke);
activeStrokes.Add(id, stroke);
break;
case TouchAction.Move:
activeStrokes[id].StylusPoints.Add(new StylusPoint(pt.X, pt.Y));
break;
case TouchAction.Up:
activeStrokes[id].StylusPoints.Add(new StylusPoint(pt.X, pt.Y));
activeStrokes.Remove(id);
break;
}
}
}
Now run the application you will able to draw on the screen.
There is no way we can clear the screen to start new drawing or paint. Let's add a Delete button.
Step 7: Add ApplicationBar with delete ApplicationBarIconButton which will clear the page.
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="appbarDeleteButton" IconUri="/Icons/delete.png" Text="delete page" Click="OnAppbarDeleteClick" />
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Step 8: Place OnAppbarDeleteClick method in MainPage.xaml.cs which will clear the page only if user selects ok from confirmation message.
void OnAppbarDeleteClick(object sender, EventArgs args)
{
MessageBoxResult result = MessageBox.Show("Delete this page?", "Drawing", MessageBoxButton.OKCancel);
if (result == MessageBoxResult.OK)
{
inkPresenter.Strokes.Clear();
}
}
Now run the application draw anything on screen, and press delete button from the Application which will popup OK and Cancel messagebox. On selection of OK, page will be cleared to draw or paint again.
This ends the article simple drawing on Windows Phone 7.
|