Coloring shapes in Metro app C# Xaml RRS feed

  • Question

  • Hi All,

    I created an app to fill color in shapes like rectangle,circle,ellipse etc.

    My aim is to color a shape.When the cursor leaves Shape's border the coloring should stop.So after coloring I need a fill colored Shape. Clip property works in the case of rectangle shape. But fails in Circle shape. Can anyone help me to sort this issue in all shapes. I need to fill color in circle/ellipse shape without crossing the border.

    Any help will be really appreciated.

    Monday, May 13, 2013 9:30 AM

All replies

  • Do you have your code that creates the Circle?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, May 13, 2013 8:35 PM
  • Hi Matt,

    Thanks for the reply. I have attached the code. This one is for filling ellipse. the strokethickness is set to 20. when you try to fill the ellipse by moving cursor the color goes beyond the boundary. when u set strokethickness to 4, you can fill the ellipse with in the boundary. 

    Please check the code and let me know your thoughts on this. Thanks for the support.

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.Xaml.Shapes;
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    namespace Tracing
        public sealed partial class MainPage : Page
            Point _previousPosition = default(Point);
            SolidColorBrush _stroke = new SolidColorBrush(Colors.Black);
            List<List<Point>> _allPoints = new List<List<Point>>();
            bool _pressed = false;
            public MainPage()
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.  The Parameter
            /// property is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            private void traceCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
                if (!_pressed) return;
                var positions = e.GetIntermediatePoints(shapeCanvas).
                  Select(ppt => ppt.Position);
                foreach (Point pt in positions)
                      new Line()
                          X1 = _previousPosition.X,
                          Y1 = _previousPosition.Y,
                          X2 = pt.X,
                          Y2 = pt.Y,
                          Stroke = _stroke,
                          StrokeThickness = 20,
                          StrokeDashCap = PenLineCap.Round,
                          StrokeLineJoin = PenLineJoin.Round,
                          StrokeStartLineCap = PenLineCap.Round,
                          StrokeEndLineCap = PenLineCap.Round
                    _previousPosition = pt;
            private void traceCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
                 _previousPosition = e.GetCurrentPoint(shapeCanvas).Position;
                _allPoints.Add(new List<Point>());
                _pressed = true;
            private void traceCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
                if (_pressed)
                    _pressed = false;

        <Grid Background="WhiteSmoke">
            <Canvas  x:Name="shapeCanvas"  RenderTransformOrigin="0.5,0.5"  Margin="245,110,43,83" Background="Transparent">
                <Ellipse Width="100" Height="100" Stroke="Black" PointerPressed="traceCanvas_PointerPressed" PointerMoved="traceCanvas_PointerMoved" 
                         PointerReleased="traceCanvas_PointerReleased"  Fill="Transparent"></Ellipse>

    Tuesday, May 14, 2013 6:18 AM