fingerpaint – a little wp7 paint app

fingerpaint is a little wp7 based paint app that I made for fun in 2 hours earlier today. It’s just a ‘proof of concept’ app, it’s nothing for the marketplace. You 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-file:

<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# file:

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();
        }
    }
}

---