7

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

Improve this question
8
  • you need to control it dynamically? Commented Aug 15, 2013 at 9:59
  • @KingKing yes, I need something like checkbox in interface, to control it Commented Aug 15, 2013 at 10:00
  • "static" solution also acceptable, so I can double xaml code and hide unneccesary :D. But dynamically preferable Commented Aug 15, 2013 at 10:12
  • I really don't understand the question here. Are you saying that if your image is half as wide as you want to show, but the correct height, you want to expand it only horizontally? This behaviour makes no sense to me, so maybe you should rethink your goal if this is the case. Commented Aug 15, 2013 at 10:14
  • @ZombieSheep as I understand, he may want to have some Property to determine if the image should be stretched on the Width or on the Height (of course the other (non-stretched) will be uniformed so that the image's Width/Height is the same to the original image's). Commented Aug 15, 2013 at 10:27

3 Answers 3

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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
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.
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
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.
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.
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);
Improve this answer

1 Comment

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.
1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.