Center Image inside Canvas

Question

I have an Image inside a Canvas:

<Canvas>
    <Image HorizontalAlignment="Center" VerticalAlignment="Center" />
</Canvas>

And I want to display the Image always (even after a possible resizing) in the center of my Canvas, but in this way the image is draw in the Top-Left corner. How can I do?

I think it can be solved using multibinding with responding converter — dvvrd, Jun 21 '12 at 21:05
possible duplicate http://stackoverflow.com/questions/2208992/how-to-center-an-element-in-wpf-canvas — Lukasz Madon, Jun 21 '12 at 21:06

dvvrd · Accepted Answer · 2012-06-21T22:28:48.287

The coolest thing of this aproach taht it would work if you change sizes of both image and canvas. Converter code:

internal sealed class CenterConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double canvasWidth = System.Convert.ToDouble(values[0]);
        double canvasHeight = System.Convert.ToDouble(values[1]);
        double controlWidth = System.Convert.ToDouble(values[2]);
        double controlHeight = System.Convert.ToDouble(values[3]);
        switch ((string)parameter)
        {
            case "top":
                return (canvasHeight - controlHeight) / 2;
            case "bottom":
                return (canvasHeight + controlHeight) / 2;
            case "left":
                return (canvasWidth - controlWidth) / 2;
            case "right":
                return (canvasWidth + controlWidth) / 2;
            default:
                return 0;
        }
    }

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

XAML, somewhere in resources:

    <local:CenterConverter x:Key="CenterConverter" />

XAML:

<Canvas x:Name="superCoolCanvas">
    <Image x:Name="superCoolImage" >
        <Canvas.Top>
            <MultiBinding Converter="{StaticResource CenterConverter}" ConverterParameter="top">
                <Binding ElementName="superCoolCanvas" Path="ActualWidth" />
                <Binding ElementName="superCoolCanvas" Path="ActualHeight" />
                <Binding ElementName="superCoolImage" Path="ActualWidth" />
                <Binding ElementName="superCoolImage" Path="ActualHeight" />
            </MultiBinding>
        </Canvas.Top>
        <Canvas.Left>
            <MultiBinding Converter="{StaticResource CenterConverter}" ConverterParameter="left">
                <Binding ElementName="superCoolCanvas" Path="ActualWidth" />
                <Binding ElementName="superCoolCanvas" Path="ActualHeight" />
                <Binding ElementName="superCoolImage" Path="ActualWidth" />
                <Binding ElementName="superCoolImage" Path="ActualHeight" />
            </MultiBinding>
        </Canvas.Left>
    </Image>
</Canvas>

score 2 · Answer 2 · answered Jun 22 '12 at 03:17

2

Canvas is intended to use absolute coordinates. You may use solution provided by dwrd or put Canvas and Image both in Grid and then center the Image in this Grid.

answered Jun 22 '12 at 03:17

Y.Yanavichus

2,387
1
21
34

Since the image is a child of the canvas do you mean center the canvas in the grid? – tkefauver Dec 18 '20 at 19:19
Yes, this is the daily basis solution. – Marcelo Scofano Diniz Dec 27 '21 at 14:42

Center Image inside Canvas

2 Answers2

Linked