Drawing layout problem when using DrawingContext

Question

I'm trying unsuccessfully to draw 'P' inside a circle. I'm using DrawingConntext due to performance issues.

This is what I get:

MainWindow XAML:

 <StackPanel Background="LightGray">
    <WrapPanel x:Name="panel">
        <Image Width="100" Height="100">
            <Image.Source>
                <MultiBinding Converter="{StaticResource @con2}">
                </MultiBinding>
            </Image.Source>
        </Image>
    </WrapPanel>
</StackPanel>

The Convert method:

 public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        Geometry circlePath = Geometry.Parse("M 12.5,1 A 11,11 0 1 0 13.5,1 Z");

        var dGroup = new DrawingGroup();

        using (DrawingContext dc = dGroup.Open())
        {
            dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Black, 1.5), circlePath);

            //Draw letter 'P'
            var x =
                Geometry.Parse(
                    "F1 M 0,15.4L 0,0L 5.0665,0C 6.98703,0 8.23807,0.0767822 8.81958,0.230591C 9.71523,0.46228 10.4655,0.966919 11.0704,1.74451C 11.6753,2.52209 11.9778,3.52576 11.9778,4.75574C 11.9778,5.70251 11.8001,6.49963 11.4447,7.14685C 11.0894,7.79407 10.6387,8.30212 10.0929,8.67078C 9.54701,9.03955 8.99112,9.28406 8.42522,9.40442C 7.65878,9.55139 6.547,9.625 5.08989,9.625L 2.99445,9.625L 2.99445,15.4L 0,15.4 Z M 2.99445,2.56665L 2.99445,7.05835L 4.8526,7.05835C 6.19164,7.05835 7.08673,6.97534 7.5379,6.80933C 7.98907,6.64343 8.34277,6.3844 8.599,6.03235C 8.85522,5.6803 8.98334,5.27039 8.98334,4.80249C 8.98334,4.22546 8.80342,3.74976 8.4436,3.37537C 8.08377,3.0011 7.62869,2.76721 7.07838,2.67358C 6.67288,2.60229 5.85855,2.56665 4.63538,2.56665L 2.99445,2.56665 Z ");
            dc.DrawGeometry(Brushes.Black, new Pen(Brushes.Black, 0), x);
        }

        return new DrawingImage(dGroup);
    }

• UPDATE:

Changing the path is not something I want to get into, is there a way setting it with MARGIN/ STRECH/ TRANSFORM etc. ?

Answer 1

You can center the "P" in respect to the Circle.

To do this, push a TranslateTransform to the DrawingContext. To get the right X value, use the Width of the Circle / 2.0 and then subtract the Width of "P" / 2.0. The same goes for Y.

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
    Geometry circlePath = Geometry.Parse("M 12.5,1 A 11,11 0 1 0 13.5,1 Z");

    var dGroup = new DrawingGroup();

    using (DrawingContext dc = dGroup.Open())
    {
        dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Black, 1.5), circlePath);
        //Draw letter 'P'
        var x = Geometry.Parse("F1 M 0,15.4L 0,0L 5.0665,0C 6.98703,0 8.23807,0.0767822 8.81958,0.230591C 9.71523,0.46228 10.4655,0.966919 11.0704,1.74451C 11.6753,2.52209 11.9778,3.52576 11.9778,4.75574C 11.9778,5.70251 11.8001,6.49963 11.4447,7.14685C 11.0894,7.79407 10.6387,8.30212 10.0929,8.67078C 9.54701,9.03955 8.99112,9.28406 8.42522,9.40442C 7.65878,9.55139 6.547,9.625 5.08989,9.625L 2.99445,9.625L 2.99445,15.4L 0,15.4 Z M 2.99445,2.56665L 2.99445,7.05835L 4.8526,7.05835C 6.19164,7.05835 7.08673,6.97534 7.5379,6.80933C 7.98907,6.64343 8.34277,6.3844 8.599,6.03235C 8.85522,5.6803 8.98334,5.27039 8.98334,4.80249C 8.98334,4.22546 8.80342,3.74976 8.4436,3.37537C 8.08377,3.0011 7.62869,2.76721 7.07838,2.67358C 6.67288,2.60229 5.85855,2.56665 4.63538,2.56665L 2.99445,2.56665 Z ");

        double centerX = circlePath.Bounds.Left + circlePath.Bounds.Width / 2;
        double pWidth = x.Bounds.Width / 2;
        double centerY = circlePath.Bounds.Top + circlePath.Bounds.Height / 2;
        double pHeight = x.Bounds.Height / 2;
        TranslateTransform translateTransform = new TranslateTransform(centerX - pWidth, centerY - pHeight);
        dc.PushTransform(translateTransform);

        dc.DrawGeometry(Brushes.Black, new Pen(Brushes.Black, 0), x);
    }

    return new DrawingImage(dGroup);
}