Question

I’ve created a DataTemplate for my objects in a ResourceDictionary file. The template is basically an image that is loaded from the disk. Now, what happens is that I want to align the image to a specific point on my Canvas but not by its upper left point but its center point, that’s why I want to apply a translate transform for X = -Width / 2 and
Y = -Height / 2 but I don’t know how to apply them via the DataTemplate.

Any help will be appreciated, thanks!

Answer 1

Try using databinding on Canvas’ the AttachedProperties and an IValueConverter to transform the offsets to whatever you want.

For instance:

class ImageToCanvasConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return -(int)value / 2;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Two-way binding not supported
        throw new InvalidOperationException(); 
    }
}

<Grid.Resources>
    <myAssembly:ImageToCanvasConverter x:Key="imageToCanvasConverter" />
    <DataTemplate ...>
        <Image Canvas.Left="{Binding Path=Width, Converter={StaticResource imageToCanvasConverter}, Mode=OneTime}"
               Canvas.Top="{Binding Path=Height, Converter={StaticResource imageToCanvasConverter}, Mode=OneTime}"
               ... />
    </DataTemplate>
</Grid.Resources>