All geek questions in one place

Is the image stretched and centered?

I have the following XAML code:

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

and I visually got the following:

enter image description here

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

With Stretch="None" , I got the following:

enter image description here

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

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

What should I do?

whole code:

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

EDIT (solution): Just in case, some1 has the same problem, here is how I solved it:

 <Canvas Width="640" Height="480" Background="#FFAA00FF" > <Image Source="z.jpg" Height="480" Width="640"/> </Canvas>

This is EXACTLY the same behavior as HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" The image is stretched to Uniform (the image is smaller or larger than the canvas), and it is centered both vertically and horizontally!

+6
source share
2 answers

If you put it in a grid, it will be centered automatically.

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

Full control with multiple 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>
+7
source

Canvas does not support HorizontalAlignment images. If you want to use a dynamic layout, Canvas is a bad choice (useful if you want to actually ignore such a layout). What is the specific reason for using Canvas?
Just use the grid:

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

Source: https://habr.com/ru/post/908032/

More articles:


All Articles