CODEWITHSUNDEEP
c#wpfxaml
Victor
Victor

Reputation: 43

How to place an image by its center, not top-left corner?

I have an image (inside canvas). I need to specify the coordinates of the image in text box, and I want the image center to be in this point (not its top-left corner). How can I do that?

Update: I don't need to place my image in the center of the canvas. I want the position of the image to be defined by image center. Example, I have a code: <Image source"..." canvas.Left="0" canvas.Top="0">, and this point (0,0) means that the image center is in the top-left corner of the canvas.

Upvotes: 3

Views: 3578

Answers (2)

Artiom
Artiom

Reputation: 7837

Set the position using Attached properties:

  • Canvas.Left
  • Canvas.Top

If you want to place at center, set 

Canvas.SetLeft(image, (canva.Width - Image.Width) / 2);
Canvas.SetTop(image, (canva.Height- Image.Height) / 2);

Also look Align images in WPF canvas in center

Update

Canvas.SetLeft(image, Image.Width / 2);
Canvas.SetTop(image, Image.Height / 2);

You can set it from behaviors for example

<Window x:Class="WpfSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:wpfSample="clr-namespace:WpfSample"
        Title="MainWindow"
        Width="800"
        Height="800"
        Background="Gray">
    <Border Width="400"
            Height="400"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            BorderBrush="Black"
            BorderThickness="2">
        <Canvas >
            <Rectangle Fill="OrangeRed" Width="150" Height="150">
                <i:Interaction.Behaviors>
                    <wpfSample:CenterBehavior/>
                </i:Interaction.Behaviors>
            </Rectangle>
        </Canvas>
    </Border>
</Window>

and the behavior (raw sample)

public class CenterBehavior : Behavior<FrameworkElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        UpdatePosition();
        AssociatedObject.SizeChanged += OnSizeChanged;
    }

    private void UpdatePosition()
    {
        Canvas.SetLeft(AssociatedObject, -AssociatedObject.Width/2);
        Canvas.SetTop(AssociatedObject, -AssociatedObject.Height/2);
    }

    private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        UpdatePosition();
    }
}

Upvotes: 5

Sheridan
Sheridan

Reputation: 69959

Just subtract half of your Image.Width value your current Canvas.Left value and subtract half of your Image.Height value your current Canvas.Top value.

Upvotes: 1

Related Questions