31

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

4 Answers 4

48

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 achieve. 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.

4
  • 1
    Awesome! This works "as is", with no code behind. I used it to center a UserControl, in the place of the Label. Sep 27, 2016 at 1:32
  • 1
    Now there is a slow Grid inside. A solution without a Grid would be nice. Jun 21, 2017 at 9:06
  • 1
    @MathiasMüller There's nothing to stop you using any other control in place of the Grid.
    – kenjara
    Jun 13, 2019 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, 2020 at 18:01
28

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);
1
  • can this be written inside a class which inherits a canvas class as an attached property. Feb 5, 2010 at 17:36
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);
}
3
  • will this event fire on load of the window. Feb 5, 2010 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 5, 2010 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 9, 2014 at 18:53
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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.