Sigurd Snørteland



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

About these ads

  • * Mark Monster says:

    Little code, cool concept. Who has thought about dipping of fingers in a paintbucket as colorchooser!

    Keep up the good work!

    | Reply Posted 3 years, 10 months ago
  • * Sølve Heggem says:

    Cool App!

    I suggest you concider to put it on marketplace
    This will be a fun app for my kids on 1,5 and 3,5 years and others kids as well I guess.
    If I only had a phone 7 to run it on :(

    | Reply Posted 3 years, 10 months ago
  • * Rene Schulte says:

    This is a cool concept. Just add a few more features and you can make some money! My little kids love to play with the iPhone App Pollock. So this would be an instant buy.

    | Reply Posted 3 years, 10 months ago
  • Dipping your fingers in paint bucket is cool. Like to see more like this.

    | Reply Posted 3 years, 9 months ago
  • * vivek says:

    Liked your concept.. I would like to borrow that image of bucket from you.. thanks

    | Reply Posted 2 years, 3 months ago
  • I have read so many articles or reviews about the blogger lovers but this piece of writing is really a good piece of writing, keep it up.

    | Reply Posted 1 year, 5 months ago
  • Hey There. I found your blog using msn. This is an extremely well
    written article. I will make sure to bookmark it and come back to read more of
    your useful information. Thanks for the post.

    I will definitely comeback.

    | Reply Posted 1 year, 4 months ago
  • I enjoy what you guys are usually up too. This kind
    of clever work and coverage! Keep up the great works guys I’ve incorporated you guys to my blogroll.

    | Reply Posted 1 year, 3 months ago


  • 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

    Follow

    Get every new post delivered to your Inbox.

    %d bloggers like this: