You can paint by dragging your fingers over the screen and you change color by “dipping your fingers in the paint buckets.
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();
}
}
}
