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 :

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

With Stretch="None", I got this :

(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>

Microsporophyll

Can you also post the surrounding Xaml? Maybe a parent of the image is not not centered or stretched. – Psychotechnics

Answer 1

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>

Astraphobia

Answer 2

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>

Psychotechnics

Answer 3

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>

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.

Natalia

Answer 4

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

Doughnut