CODEWITHSUNDEEP
wpfxamlstretch
Guillaume Slashy
Guillaume Slashy

Reputation: 3624

Image stretched and centered?

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>

Upvotes: 7

Views: 19487

Answers (4)

Tetiana
Tetiana

Reputation: 361

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

Upvotes: 0

Steven Rands
Steven Rands

Reputation: 5421

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.

Upvotes: 0

Botz3000
Botz3000

Reputation: 39600

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>

Upvotes: 6

Clemens
Clemens

Reputation: 128062

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>

Upvotes: 6

Related Questions