How to center an element in wpf canvas

Question

How can I center an element in wpf canvas using attached properties?

Martin Braun · Answer 1 · 2021-03-09T17:58:40.410

47

I came across this post, because I was searching for a way to center an element within a Canvas in XAML only, instead of using Attached Properties.

Just in case, you came for the same reason:

<Canvas x:Name="myCanvas">
    <Grid Width="{Binding ActualWidth, ElementName=myCanvas}" 
          Height="{Binding ActualHeight, ElementName=myCanvas}">
        <Label Content="Hello World!"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" 
        />
    </Grid>
</Canvas>

One more thing, though

Beware that every solution here is a trap, depending on what you try to archive. Just because your element is within the Canvas on a hierarchical order, it will not be part of the Canvas itself. A Canvas is something to draw on and not to place controls in. So you cannot use the Canvas API for those controls, because the Grid is like an isolated overlay, obviously.

If you want a separated overlay, whilst the Canvas is your background, you are good to go with this solution.

edited Mar 09 '21 at 17:58

answered Mar 09 '16 at 17:27

Martin Braun

10,906
9
64
105

1

Awesome! This works "as is", with no code behind. I used it to center a UserControl, in the place of the Label. – Stephen Hosking Sep 27 '16 at 01:32
1

Now there is a slow Grid inside. A solution without a Grid would be nice. – Mathias Müller Jun 21 '17 at 09:06
1

@MathiasMüller There's nothing to stop you using any other control in place of the Grid. – kenjara Jun 13 '19 at 13:45
1

Save my day. I did not though to add a grid to handle the layout. Thank you @MartinBraun – glihm Jun 28 '20 at 18:01

score 26 · Accepted Answer · answered Feb 05 '10 at 17:24

26

Something like this.

double left = (Canvas.ActualWidth - element.ActualWidth) / 2;
Canvas.SetLeft(element, left);

double top  = (Canvas.ActualHeight - element.ActualHeight) / 2;
Canvas.SetTop(element, top);

answered Feb 05 '10 at 17:24

mdm20

4,475
2
22
24

can this be written inside a class which inherits a canvas class as an attached property. – Soham Dasgupta Feb 05 '10 at 17:36

score 10 · Answer 3 · edited Sep 18 '11 at 18:23

10

The only way I know to do this is to figure out the size of the canvas, and then set the properties based off that. This can be done using an event handler for SizeChanged on the canvas:

parentCanvas.SizeChanged += new SizeChangedEventHandler(parentCanvas_SizeChanged);

void parentCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    parentCanvas.SetLeft(uiElement, (parentCanvas.ActualWidth - uiElement.ActualWidth) / 2);
    parentCanvas.SetTop(uiElement, (parentCanvas.ActualHeight - uiElement.ActualHeight) / 2);
}

edited Sep 18 '11 at 18:23

Dave Clemmer

3,741
12
49
72

answered Feb 05 '10 at 17:30

Robin

1,022
1
11
24

will this event fire on load of the window. – Soham Dasgupta Feb 05 '10 at 17:34
It should, yes. It will fire whenever the ActualWidth/ActualHeight properties of the canvas are changed. (i.e. during layout updating) – Robin Feb 05 '10 at 18:27
1

Great. But I believe it should be Canvas.SetLeft and Canvas.SetTop; not the instance of the parent Canvas. – Wayne Lo Sep 09 '14 at 18:53

score 3 · Answer 4 · answered Nov 22 '13 at 14:50

3

You can put the Canvas and the element you want to be centered inside a Grid :

<Grid>
    <Canvas Width="200" Height="200" Background="Black" />
    <Button Width="50" Height="20" > Hello
    </Button>
</Grid>

answered Nov 22 '13 at 14:50

mLar

2,967
2
22
23

How to center an element in wpf canvas

4 Answers4

One more thing, though

Linked