Stretch image to fill available width / height (separately)

Question

Is it any way to fill available width / height with image in xaml? I need something like UniformToFill, but where I can control stretch direction (width or height)

Assume I have have following code:

<UniformGrid Columns="2" Rows="2">        
    <Image Source="Desert1.jpg" Stretch="Uniform"/> //
    <Image Source="Desert2.jpg" Stretch="UniformToFill"/> // 
    <Image Source="Desert3.jpg" />
    <Image Source="Desert4.jpg" />
</UniformGrid>

EDIT: for examle (width): if image is half as wide as I want to show, I don't care about height and just scale x2 image height and width. So image must fit width, and don't care about height. It's desired behaviour, but if it's not possible - ok. So you can rethink question as IF it possible, HOW can I do it in xaml.

Also all images may have different width and height

Solution 1

I think that you might be able to get the effect you desire in certain conditions. If your images are all bigger than the size that they will be displayed, you could possibly use this:

<Image Source="Desert.jpg" Stretch="UniformToFill" StretchDirection="DownOnly" />

A ViewBox has the same Stretch properties as an Image and there is a good example of the differences between the different combinations in the How to: Apply Stretch Properties to the Contents of a Viewbox article on MSDN.

Solution 2

This might be what you are looking for...

TransformedBitmap

Here is a static method I made in an ImageUtility class.

public static TransformedBitmap GetScaledBitmapImageSprite(BitmapSource src, double x_scale, double y_scale)
{
  return (new TransformedBitmap(src, new ScaleTransform(x_scale, y_scale)));
{

The x_scale and y_scale are doubles in the form of:

desired_width / original_width

Maybe a little different than what you are looking for but I think it can get you started on the right track.

You can store your TransformedBitmap in memory and apply new transforms through:

TransformedBitmap x = new TransformedBitmap();
x.Transform = new ScaleTransform(x,y);

Solution 3

You should use

<Image Source="{Binding Image}" Stretch="Fill"/>

like if you use Stretch="UnifrmtoFill" then it will change both length and width in a ratio or I say both together.

so if you use Stretch="Fill", it gives you chance to change either height or width at a time whatever is changed.

Comments

[Eugene]

I'm looking for a XAML-based solution, because it saves me from having to get the height of the parent container, picture height and after that calculate the scale rate in the code.

[Eugene]

I have seen these properties, but a situation where they can work as it should too specific. Furthermore, UniformToFill covers such a situation are more than as it's always desired height or width. Unfortunately, UniformToFill does not allow to set a desired property

[Sheridan]

If you actually take the time to put the example code from the linked page on MSDN into a new test WPF project and run it with the settings that I have listed above, then you will see that this does give you your desired result. The only condition on it working is that the original image size is bigger than it would be displayed. All the same, if that condition cannot be fulfilled then I accept that this will not help you.

[Eugene]

Ok, I put this code and still don't understand. It looks absolutely like using UniformToFill for pictures bigger in both width and height, but for small image it doesn't work at all. And it doesn't looks like I can control which property must be used for scale

[Sheridan]

I did say that it would only work if your images were bigger than you would display them. If you select DownOnly and then alternate between the Unifrom and UniformToFill settings, you will see that it is working by reducing the height and showing the full width like you wanted. If you want to scale up images (eg. use images that are smaller than they would be displayed) then never mind and good luck with your search.

[Eugene]

I test it careful for bigger picture (and rotated version) on MSDN example. Uniform reduce both width and height. For UniformToFill reduces lowest of width or height. And again, it doesn't looks like I can control which property must be used for scale.