WPF RenderTransform

Question

I am drawing an Ellipse in the center of a Canvas . When doing so the top left corner of the Ellipse is actually drawn in the center but I want the center point of the Ellipse to be in the center. For this I presume I need a RenderTransform but I cannot get it working correctly.

<Ellipse Stroke="Red" RenderTransformOrigin="0.5,0.5" StrokeThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100">

Am I missing an attribute?

Answer 1

Basically you cannot do this through attached properties unless you bind through viewModel which knows the exact center. You will need to use code behind to find out the center of canvas. Like:

myCanvas.SetLeft(elipse, (myCanvas.ActualWidth - elipse.ActualWidth) / 2);
myCanvas.SetTop(elipse, (myCanvas.ActualHeight - elipse.ActualHeight) / 2);

Answer 2

You can achieve the desired result using a converter:

Xaml:

<Window.Resources>
    <wpfApplication1:GetCentreConverter x:Key="CentreConverter"/>
</Window.Resources>
<Canvas x:Name="canvas">
    <Ellipse Stroke="Red"
             RenderTransformOrigin="0.5,0.5"
             StrokeThickness="5"
             Width="100"
             Height="100"
             Canvas.Left="{Binding ElementName=canvas, Path=ActualWidth, Converter={StaticResource CentreConverter}, ConverterParameter=50}"
             Canvas.Top="{Binding ElementName=canvas, Path=ActualHeight, Converter={StaticResource CentreConverter}, ConverterParameter=50}"/>
</Canvas>

Converter:

public class GetCentreConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var width = double.Parse(value.ToString());
        var offset = double.Parse(parameter.ToString());

        return width/2 - offset;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Answer 3

You could use a Grid instead of Canvas as the container of the ellipse. So with

HorizontalAlignment="Center" VerticalAlignment="Center"

you will get your ellipse in the center of the Grid positioned.

Answer 4

You need to use the Canvas.Left and Canvas.Top attached properties, as Vidas stated.

In addition to doing it in the code-behind, you could also write a custom converter so you could do it in XAML. For instance, if you write a DivideByTwoConverter, you could then bind the attached properties to the Width and Height of the Canvas and use the converter on the bindings.

I'm sure there are some other tricks to do the same.