The app listens to the ‘MouseMove’-event and tracks you’re fingers position and add’s line-objects to a canvas control. To make it possible to change color by ”dipping your fingers in the paint buckets” I’ve added a transparent ellipse control on top of every “paint bucket’, and connected up the ‘MouseLeftButtonDown’ event. Check out the source code below.
Xaml code:
<Grid x:Name="grid" Background="Transparent"><Image x:Name="imgBackground" Source="bg.png" Height="800" Width="500" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,0,0,0" /><TextBlock x:Name="PageTitle" Foreground="#FF5B5B5B" Text="fingerpaint" Margin="21,10,0,28" Style="{StaticResource PhoneTextTitle1Style}" Grid.ColumnSpan="3" /><Image x:Name="btnDelete" Source="delete.png" Opacity="0.75" Height="55" Width="55" VerticalAlignment="Top" HorizontalAlignment="Right" MouseLeftButtonDown="btnDelete_MouseLeftButtonDown" Grid.Column="1" Grid.ColumnSpan="2" /><Canvas x:Name="paint" Background="Transparent" Width="500" Height="448" Margin="0,108,-20,244" Grid.ColumnSpan="3" /><Ellipse x:Name="blue" Fill="#00F4F4F5" Height="86" Margin="114,0,115,38" Stroke="Transparent" VerticalAlignment="Bottom"/><Ellipse x:Name="yellow" Fill="#00F4F4F5" Height="44" Margin="176,0,100,137" Stroke="Transparent" VerticalAlignment="Bottom"/><Ellipse x:Name="black" Fill="#00F4F4F5" Height="45" Margin="0,0,78,151" Stroke="Transparent" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="94" Grid.ColumnSpan="2" /><Ellipse x:Name="pink" Fill="#00F4F4F5" Height="73" Margin="0,0,57,66" Stroke="Transparent" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="130" Grid.ColumnSpan="2" />
</Grid>
C# code:
namespace fingerpaint{ public partial class MainPage : PhoneApplicationPage { private Point point; private Point old_point; private bool draw = false; private string colour = "white"; public MainPage() { InitializeComponent(); old_point = point; colour = "blue"; } private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { blue.MouseLeftButtonDown += new MouseButtonEventHandler(selectColor); yellow.MouseLeftButtonDown += new MouseButtonEventHandler(selectColor); black.MouseLeftButtonDown += new MouseButtonEventHandler(selectColor); pink.MouseLeftButtonDown += new MouseButtonEventHandler(selectColor); paint.MouseMove += new MouseEventHandler(FingerMove); paint.MouseLeftButtonUp += new MouseButtonEventHandler(FingerUp); paint.MouseLeftButtonDown += new MouseButtonEventHandler(FingerDown); } void selectColor(object sender, MouseButtonEventArgs e) { Ellipse ellipse = sender as Ellipse; colour = ellipse.Name; } void FingerMove(object sender, MouseEventArgs e) { if (draw) { point = e.GetPosition(paint); Line line = new Line(); if (colour == "blue") line.Stroke = new SolidColorBrush(Color.FromArgb(255, 41, 159, 227)); else if (colour == "yellow") line.Stroke = new SolidColorBrush(Color.FromArgb(255, 226, 228, 43)); else if (colour == "black") line.Stroke = new SolidColorBrush(Color.FromArgb(255, 42, 42, 42)); else if (colour == "pink") line.Stroke = new SolidColorBrush(Color.FromArgb(255, 228, 29, 180)); line.X1 = point.X; line.Y1 = point.Y; line.X2 = old_point.X; line.Y2 = old_point.Y; line.StrokeStartLineCap = PenLineCap.Round; line.StrokeEndLineCap = PenLineCap.Round; line.StrokeThickness = 15; line.Opacity = 0.5; paint.Children.Add(line); old_point = point; } old_point = point; } void FingerUp(object sender, MouseButtonEventArgs e) { draw = false; } void FingerDown(object sender, MouseButtonEventArgs e) { point = e.GetPosition(paint); old_point = point; draw = true; } private void btnDelete_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { paint.Children.Clear(); } }}
