#1,153 – Handling Custom Dependency Properties that Affect Rendering

In our example of a custom “pie slice” shape, we defined StartAngle and EndAngle properties that dictate where the pie shape starts and ends.  We then define how the shape is rendered by overriding the DefiningGeometry property.

One problem with the earlier code example was that the shape wasn’t automatically re-rendered if the start or end angles were changed.  Since the values of these properties are used in rendering the shape, we want the shape to automatically redraw itself whenever either property changes.

We can force a re-render by specifying the AffectsRender flag when defining the metadata for the StartAngle and EndAngle properties.  Below is updated code for defining these properties.

        // Angle that arc starts at
        public double StartAngle
        {
            get { return (double)GetValue(StartAngleProperty); }
            set { SetValue(StartAngleProperty, value); }
        }

        // DependencyProperty - StartAngle
        private static FrameworkPropertyMetadata startAngleMetadata =
                new FrameworkPropertyMetadata(
                    0.0,     // Default value
                    FrameworkPropertyMetadataOptions.AffectsRender,
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register("StartAngle", typeof(double), typeof(PieSlice), startAngleMetadata);

        // Angle that arc ends at
        public double EndAngle
        {
            get { return (double)GetValue(EndAngleProperty); }
            set { SetValue(EndAngleProperty, value); }
        }

        // DependencyProperty - EndAngle
        private static FrameworkPropertyMetadata endAngleMetadata =
                new FrameworkPropertyMetadata(
                    90.0,     // Default value
                    FrameworkPropertyMetadataOptions.AffectsRender,
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty EndAngleProperty =
            DependencyProperty.Register("EndAngle", typeof(double), typeof(PieSlice), endAngleMetadata);
Advertisements

#1,152 – A Custom “Pie Slice” Shape

We can build on the earlier custom Arc shape code to create a custom shape that draws a slice of a pie.  We only need to add a line segment back to the origin and set options to close the resulting curve and to fill in the middle.

Here is the resulting PieSlice class:

    public class PieSlice : Shape
    {
        // Angle that arc starts at
        public double StartAngle
        {
            get { return (double)GetValue(StartAngleProperty); }
            set { SetValue(StartAngleProperty, value); }
        }

        // DependencyProperty - StartAngle
        private static PropertyMetadata startAngleMetadata =
                new PropertyMetadata(
                    0.0,     // Default value
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register("StartAngle", typeof(double), typeof(PieSlice), startAngleMetadata);

        // Angle that arc ends at
        public double EndAngle
        {
            get { return (double)GetValue(EndAngleProperty); }
            set { SetValue(EndAngleProperty, value); }
        }

        // DependencyProperty - EndAngle
        private static PropertyMetadata endAngleMetadata =
                new PropertyMetadata(
                    90.0,     // Default value
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty EndAngleProperty =
            DependencyProperty.Register("EndAngle", typeof(double), typeof(PieSlice), endAngleMetadata);

        private static object CoerceAngle(DependencyObject depObj, object baseVal)
        {
            double angle = (double)baseVal;
            angle = Math.Min(angle, 359.9);
            angle = Math.Max(angle, 0.0);
            return angle;
        }

        protected override Geometry DefiningGeometry
        {
            get
            {
                double maxWidth = Math.Max(0.0, RenderSize.Width - StrokeThickness);
                double maxHeight = Math.Max(0.0, RenderSize.Height - StrokeThickness);
                //Console.WriteLine(string.Format("* maxWidth={0}, maxHeight={1}", maxWidth, maxHeight));

                double xStart = maxWidth / 2.0 * Math.Cos(StartAngle * Math.PI / 180.0);
                double yStart = maxHeight / 2.0 * Math.Sin(StartAngle * Math.PI / 180.0);

                double xEnd = maxWidth / 2.0 * Math.Cos(EndAngle * Math.PI / 180.0);
                double yEnd = maxHeight / 2.0 * Math.Sin(EndAngle * Math.PI / 180.0);

                StreamGeometry geom = new StreamGeometry();
                using (StreamGeometryContext ctx = geom.Open())
                {
                    ctx.BeginFigure(
                        new Point((RenderSize.Width / 2.0) + xStart,
                                  (RenderSize.Height / 2.0) - yStart),
                        true,   // Filled
                        true);  // Closed
                    ctx.ArcTo(
                        new Point((RenderSize.Width / 2.0) + xEnd,
                                  (RenderSize.Height / 2.0) - yEnd),
                        new Size(maxWidth / 2.0, maxHeight / 2),
                        0.0,     // rotationAngle
                        (EndAngle - StartAngle) > 180,   // greater than 180 deg?
                        SweepDirection.Counterclockwise,
                        true,    // isStroked
                        false);
                    ctx.LineTo(new Point((RenderSize.Width / 2.0), (RenderSize.Height / 2.0)), true, false);
                }

                return geom;
            }
        }
    }

To use the PieSlice from XAML, we specify a stroke color (for the outline), a fill color, and start and end angles.

        <loc:PieSlice Stroke="Black" Fill="Black"
                 Height="100" Width="100" Margin="5"
                 StartAngle="0" EndAngle="60"
                 HorizontalAlignment="Center"/>

1152-001

#1,151 – Custom Arc Shape, part III

In the previous example of a custom arc shape, we use the standard Stroke and StrokeThickness properties when rendering the shape.  Note, however, that when we increase the thickness of the stroke, part of the stroke lies outside of the boundaries of the shape.

1151-001

We can fix this problem by accounting for the stroke thickness in the drawing logic.  The updated code is shown below.

        protected override Geometry DefiningGeometry
        {
            get
            {
                double maxWidth = Math.Max(0.0, RenderSize.Width - StrokeThickness);
                double maxHeight = Math.Max(0.0, RenderSize.Height - StrokeThickness);
                //Console.WriteLine(string.Format("* maxWidth={0}, maxHeight={1}", maxWidth, maxHeight));

                double xStart = maxWidth / 2.0 * Math.Cos(StartAngle * Math.PI / 180.0);
                double yStart = maxHeight / 2.0 * Math.Sin(StartAngle * Math.PI / 180.0);

                double xEnd = maxWidth / 2.0 * Math.Cos(EndAngle * Math.PI / 180.0);
                double yEnd = maxHeight / 2.0 * Math.Sin(EndAngle * Math.PI / 180.0);

                StreamGeometry geom = new StreamGeometry();
                using (StreamGeometryContext ctx = geom.Open())
                {
                    ctx.BeginFigure(
                        new Point((RenderSize.Width / 2.0) + xStart,
                                  (RenderSize.Height / 2.0) - yStart),
                        false,
                        false);
                    ctx.ArcTo(
                        new Point((RenderSize.Width / 2.0) + xEnd,
                                  (RenderSize.Height / 2.0) - yEnd),
                        new Size(maxWidth / 2.0, maxHeight / 2),
                        0.0,     // rotationAngle
                        (EndAngle - StartAngle) > 180,   // greater than 180 deg?
                        SweepDirection.Counterclockwise,
                        true,    // isStroked
                        true);
                }

                return geom;
            }
        }

1151-002

 

#1,150 – Custom Arc Shape, part II

Below is code that implements a custom Shape to draw an arc.  The earlier code has been improved to:

  • Support elliptical arcs (height != width)
  • Add dependency properties for start and end angles

Start and end angles are automatically coerced to keep them within the range [0, 360).

    public class Arc : Shape
    {
        // Angle that arc starts at
        public double StartAngle
        {
            get { return (double)GetValue(StartAngleProperty); }
            set { SetValue(StartAngleProperty, value); }
        }

        // DependencyProperty - StartAngle
        private static PropertyMetadata startAngleMetadata =
                new PropertyMetadata(
                    0.0,     // Default value
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register("StartAngle", typeof(double), typeof(Arc), startAngleMetadata);

        // Angle that arc ends at
        public double EndAngle
        {
            get { return (double)GetValue(EndAngleProperty); }
            set { SetValue(EndAngleProperty, value); }
        }

        // DependencyProperty - EndAngle
        private static PropertyMetadata endAngleMetadata =
                new PropertyMetadata(
                    90.0,     // Default value
                    null,    // Property changed callback
                    new CoerceValueCallback(CoerceAngle));   // Coerce value callback

        public static readonly DependencyProperty EndAngleProperty =
            DependencyProperty.Register("EndAngle", typeof(double), typeof(Arc), endAngleMetadata);

        private static object CoerceAngle(DependencyObject depObj, object baseVal)
        {
            double angle = (double)baseVal;
            angle = Math.Min(angle, 359.9);
            angle = Math.Max(angle, 0.0);
            return angle;
        }

        protected override Geometry DefiningGeometry
        {
            get
            {
                double maxWidth = RenderSize.Width;
                double maxHeight = RenderSize.Height;

                double xStart = maxWidth / 2.0 * Math.Cos(StartAngle * Math.PI / 180.0);
                double yStart = maxHeight / 2.0 * Math.Sin(StartAngle * Math.PI / 180.0);

                double xEnd = maxWidth / 2.0 * Math.Cos(EndAngle * Math.PI / 180.0);
                double yEnd = maxHeight / 2.0 * Math.Sin(EndAngle * Math.PI / 180.0);

                StreamGeometry geom = new StreamGeometry();
                using (StreamGeometryContext ctx = geom.Open())
                {
                    ctx.BeginFigure(
                        new Point((maxWidth / 2.0) + xStart,
                                   (maxHeight / 2.0) - yStart),
                        false,
                        false);
                    ctx.ArcTo(
                        new Point((maxWidth / 2.0) + xEnd,
                                  (maxHeight / 2.0) - yEnd),
                        new Size(maxWidth / 2.0, maxHeight / 2),
                        0.0,     // rotationAngle
                        (EndAngle - StartAngle) > 180,   // greater than 180 deg?
                        SweepDirection.Counterclockwise,
                        true,    // isStroked
                        true);
                }

                return geom;
            }
        }
    }

We can use the Arc shape as shown below.

1150-001

#1,149 – Drawing an Arc in a Custom Shape

We can use a StreamGeometryContext to render some geometry in a custom Shape element that we can then use in XAML.  Below is an example that draws a simple arc from 0 degress to 90 degrees.  It uses a PolarPoint class to allow describing the arc start and finish as polar coordinates.  (A future post will allow a user to specify arc start and end).

    public class Arc : Shape
    {
        protected override Geometry DefiningGeometry
        {
            get
            {
                double maxWidth = RenderSize.Width;
                double maxHeight = RenderSize.Height;
                double maxRadius = Math.Min(maxWidth, maxHeight) / 2.0;

                PolarPoint arcStart = new PolarPoint(maxRadius, 0.0);
                PolarPoint arcFinish = new PolarPoint(maxRadius, 90.0);

                StreamGeometry geom = new StreamGeometry();
                using (StreamGeometryContext ctx = geom.Open())
                {
                    ctx.BeginFigure(
                        new Point((maxWidth / 2.0) + arcStart.X,
                                   (maxHeight / 2.0) - arcStart.Y),
                        false,
                        false);
                    ctx.ArcTo(
                        new Point((maxWidth / 2.0) + arcFinish.X,
                                  (maxHeight / 2.0) - arcFinish.Y),
                        new Size(maxRadius, maxRadius),
                        0.0,     // rotationAngle
                        false,   // greater than 180 deg?
                        SweepDirection.Counterclockwise,
                        true,    // isStroked
                        true);
                }

                return geom;
            }
        }
    }

Using the arc:

        <loc:Arc Stroke="Black" StrokeThickness="1"
                 Height="100" Width="100" Margin="5"
                 HorizontalAlignment="Center"/>

1149-001

#1,148 – Sample Code to Convert from Polar to Cartesian Coordinates

Below is some simple code (not productized) that can convert from two-dimensional polar to cartesian coordinates.

    public class PolarPoint
    {
        // Angle expressed in degrees
        public PolarPoint(double radius, double angleDeg)
        {
            if (radius < 0.0)
                throw new ArgumentException("Radius must be non-negative");
            if ((angleDeg < 0) || (angleDeg >= 360.0))
                throw new ArgumentException("Angle must be in range [0,360)");

            Radius = radius;
            AngleDeg = angleDeg;
        }

        // Polar coordinates
        public double Radius { get; set; }
        public double AngleDeg { get; set; }

        // Cartesian coordinates
        public double X
        {
            get { return Radius * Math.Cos(AngleDeg * Math.PI / 180.0); }
        }

        public double Y
        {
            get { return Radius * Math.Sin(AngleDeg * Math.PI / 180.0); }
        }

        public override string ToString()
        {
            return string.Format("({0},{1})", X, Y);
        }
    }

We can then use this class as follows.

            Console.WriteLine(new PolarPoint(0.0, 0.0));
            Console.WriteLine(new PolarPoint(1.0, 0.0));
            Console.WriteLine(new PolarPoint(1.0, 45.0));
            Console.WriteLine(new PolarPoint(1.0, 90.0));
            Console.WriteLine(new PolarPoint(1.0, 135.0));
            Console.WriteLine(new PolarPoint(1.0, 180.0));

1148-001

#1,147 – Converting from Polar Coordinates to Cartesian Coordinates

You can represent a two dimensional point as either a cartesian coordinate (X,Y) or a polar coordinate (r,theta).  Conversions between these two coordinate systems are shown below.

From polar coordinates to cartesian:

1147-001

To convert from cartesian coordinates to polar, the following formula works, as long as the X value is positive.

1147-002

If X is 0 or negative, then the calculation for theta becomes:

1147-003