Image stretched and centered?

Question

I have the following XAML code :

<Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>

and I, visually, got this :

enter image description here

(http://img810.imageshack.us/img810/2401/imagestretchuniform.png)

With Stretch="None", I got this :

enter image description here

(http://img28.imageshack.us/img28/1783/imagestretchnone.png)

Now, what I want is to center the Image vertically or horizontally with Stretch="Uniform" ! Only the "smallest" side (with Uniform) will be centered, right. But at the moment, as you can see on screenshots, the Image is simply put in the top-left corner, even if I defined HorizontalAlignment and VerticalAlignment to "Center"

What should I do ?

the whole code is :

<UserControl [...]>
    <Canvas Width="640" Height="480" Background="#FF881607">
        <Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>
    </Canvas>
</UserControl>

Can you also post the surrounding Xaml? Maybe a parent of the image is not not centered or stretched. — Botz3000, Feb 09 '12 at 11:04

Clemens · Accepted Answer · 2012-02-09T11:17:47.683

If you put it in a Grid it will be centered automatically.

<Grid>
    <Image Source="a.jpg"/>
</Grid>

The complete control with some more Grids:

<UserControl>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Image Source="a.jpg" Stretch="Uniform"/>
        </Grid>
        <Grid Grid.Row="1" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Start"/>
            <Button Grid.Column="2" Content="Stop"/>
        </Grid>
    </Grid>
</UserControl>

score 6 · Answer 2 · answered Feb 09 '12 at 11:22

Canvas doesn't support the HorizontalAlignment of the image. If you want dynamic layout like this, Canvas is a bad choice (it is useful if you want to actually ignore such layout). What is the exact reason you are using a Canvas?
Just use a Grid:

<Grid Background="#FF881607">
    <Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>
</Grid>

score 0 · Answer 3 · answered Dec 22 '20 at 12:13

You can assign the image to an ImageBrush, then set that brush as the Background of your control or of some other element (the Fill of a Rectangle for example).

An ImageBrush has a Stretch property but also AlignmentX and AlignmentY properties. By default these are both set to Center.

<Window x:Class="StackOverflow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="/logo-stackoverflow.png" Stretch="Uniform" />
        </Grid.Background>
    </Grid>
</Window>

Stack Overflow logo centred inside WPF window

The only issue I've found is that the image seems to become very aliased as it reduces in size. I'm not sure why this is.

score 0 · Answer 4 · answered Jan 27 '21 at 20:45

                 <Border Width="X" Height="X" HorizontalAlignment="Center">
                    <Border.Background>
                        <ImageBrush ImageSource="{Binding X}" Stretch="UniformToFill"/>
                    </Border.Background>
                </Border>

Image stretched and centered?

4 Answers4