Question

I’m trying to make a custom ContentControl that takes on the shape of a Polyogon with rounded corners. For some reason when I set the Clip property on the Control, nothing shows up. Any help is appreciated…

PageHost.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Controls;

namespace DtcInvoicer.Controls
{
    public class PageHost:UserControl
    {
        #region public ImageSource Icon;
        public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(PageHost));
        public ImageSource Icon
        {
            get { return GetValue(IconProperty) as ImageSource; }
            set { SetValue(IconProperty, value); }
        }
        #endregion

        #region public string Title;
        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(PageHost));
        public string Title
        {
            get { return GetValue(TitleProperty).ToString(); }
            set { SetValue(TitleProperty, value); }
        }
        #endregion

        #region public double Radius;
        public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register("Radius", typeof(double), typeof(PageHost));
        public double Radius
        {
            get { return (double)GetValue(RadiusProperty); }
            set 
            { 
                SetValue(RadiusProperty, value); 
                DoClip(); 
            }
        }
        #endregion

        public PageHost()
        {
            Loaded += new RoutedEventHandler(PageHost_Loaded);
            SizeChanged += new SizeChangedEventHandler(PageHost_SizeChanged);
        }

        #region Event Handlers
        private void PageHost_Loaded(object sender, RoutedEventArgs e)
        {
            DoClip();
        }

        private void PageHost_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            DoClip();
        }
        #endregion

        private void DoClip()
        {
            Polygon p = new Polygon()
            { 
                Points = new PointCollection()
                {
                    new Point(0, 0),
                    new Point(ActualWidth - 30, 0),
                    new Point(ActualWidth, 30),
                    new Point(ActualWidth, ActualHeight),
                    new Point(0, ActualHeight)
                }
            };

            Geometry g1 = new RectangleGeometry(new Rect(0, 0, ActualWidth, ActualHeight), Radius, Radius);
            Geometry g2 = p.RenderedGeometry;

            // Clip = g1; this works, the control shows up with the rounded corners
            // Clip = g2; this does not work, nothing shows up

            // this is what I want to do, I want to combine the two geometries
            // but this does not work either
            Clip = new CombinedGeometry(GeometryCombineMode.Intersect, g1, g2);
        }
    }
}

HomePage.xaml

<control:PageHost x:Class="DtcInvoicer.Pages.HomePage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:control="clr-namespace:DtcInvoicer.Controls"
         Width="500" Height="250" Radius="20" Background="Aqua">
</control:PageHost>

Answer 1

Setting the clip to a RenderedGeometry fails in this case because the RenderedGeometry has not yet been actually rendered, and is thus not available. For regular geometries, use this in DoClip:

Dispatcher.BeginInvoke(DispatcherPriority.Background, new ThreadStart(delegate
{
    Clip = new CombinedGeometry(GeometryCombineMode.Intersect, g1, g2); 
}));

With your RenderedGeometry, you would need to add it to the visual tree somewhere and then use its Loaded event before you set the Clip region, which would be hard. Try using a regular Geometry instead of a RenderedGeometry, with the same points, such as A path geometry. Here’s an example of where I draw a triangle using a PathGeometry:

double leftPoint = cellRect.Right - 12;
if (leftPoint < cellRect.Left)
    leftPoint = cellRect.Left;
double topPoint = cellRect.Top + (cellRect.Height - 4.0) / 2;
if (topPoint < cellRect.Top)
    topPoint = cellRect.Top;
double rightPoint = leftPoint + 7;
if (rightPoint > cellRect.Right)
    rightPoint = cellRect.Right;
double bottomPoint = topPoint + 4;
if (bottomPoint > cellRect.Bottom)
    bottomPoint = cellRect.Bottom;
double middlePoint = leftPoint + 3;
if (middlePoint > cellRect.Right)
    middlePoint = cellRect.Right;

PathFigure figure = new PathFigure();
figure.StartPoint = new Point(middlePoint, bottomPoint);
PathFigureCollection figCollection = new PathFigureCollection();
figCollection.Add(figure);

PathSegmentCollection segCollection = new PathSegmentCollection();
LineSegment topSeg = new LineSegment();
topSeg.Point = new Point(rightPoint, topPoint);
segCollection.Add(topSeg);
LineSegment midRightSeg = new LineSegment();
midRightSeg.Point = new Point(leftPoint, topPoint);
segCollection.Add(midRightSeg);
LineSegment midLeftSeg = new LineSegment();
midLeftSeg.Point = new Point(middlePoint+1, bottomPoint);
segCollection.Add(midLeftSeg);
figure.Segments = segCollection;

PathGeometry geo = new PathGeometry();
geo.Figures = figCollection;