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

Trackbacks & Pingbacks

  1. Media « Sigurd Snørteland pingbacked on 4 years, 2 months ago
  2. Fingerpaint – a little WP7 paint application (via Sigurd Snørteland) | Light Side of the .Net Force pingbacked on 4 years, 1 month ago
  3. WP7 App Review : Fingerpaint — windows phone 7 apps / WP7 games / WP7 Accessories pingbacked on 4 years, 1 month ago
  4. Paint On Windows Phone 7 With FingerPaintWow Techy pingbacked on 4 years, 1 month ago
  5. Fingerpaint, dipingere sul Windows Phone 7 | Windows Phone 7 Blog pingbacked on 4 years, 1 month ago
  6. Fessünk az ujjainkkal! « wp7.hu pingbacked on 4 years, 1 month ago
  7. WP7 Marketplace downloads and sales data « Sigurd Snørteland pingbacked on 4 years ago
  8. WP7 Marketplace downloads and sales data – one month later « Sigurd Snørteland pingbacked on 3 years, 11 months ago

Comments

  1. * 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 4 years, 2 months ago
  2. * 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 4 years, 2 months ago
  3. * 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 4 years, 2 months ago
  4. Dipping your fingers in paint bucket is cool. Like to see more like this.

    | Reply Posted 4 years, 1 month ago
  5. * vivek says:

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

    | Reply Posted 2 years, 7 months ago
  6. 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, 9 months ago
  7. 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, 8 months ago
  8. 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, 7 months ago
  9. * bfri.tk says:

    Wow, marvelous weblog structure! How lengthy have you ever been running
    a blog for? you made running a blog look easy.

    The entire look of your website is excellent, as neatly as the content material!

    | Reply Posted 3 months, 2 weeks ago
  10. I’m afraid we don’t have the same opinion but our point of view on the topic is unique.
    Whhat kind of research work do you do when writing posts like this?

    | Reply Posted 2 months, 2 weeks 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: