How to center the image control inside Grid?

4
votes

There is one Grid and I drop an Image control into the Grid. What I do : just simply change both the property-HorizontalAlignment and VerticalAlignment to 'Center'.

However the image control performs strangely unlike other controls do. This Image control center itself according to its upper left corner like below :

enter image description here

I want to know why it performs in this way?

EDIT Here is my XAML:

<UserControl x:Class="Entity.WPF.Controls.ShopProfile"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="600" d:DesignWidth="780">
<Grid>

    <DockPanel >
        <Grid>

            <Image  HorizontalAlignment="Center" Height="100" Margin="0" VerticalAlignment="Center" Width="100"/>
        </Grid>
    </DockPanel>
</Grid>

And if I set margin like Margin="-50,-50,0,0",it is centered actually,but why other controls don't need this setting?

1
c#wpfimage
Do you have any Margins set? - sa_ddam213
How to deal with this - Andrew Carl

1 Answers

1
votes

That's interesting, I'm not sure why that happens, or if it's documented somewhere.

To answer your question, how to center the image control inside a grid, just remove those properties and the image will be centered in the grid automatically.

<Grid>
    <Image Height="100" Margin="0" Width="100" />
</Grid>

enter image description here