Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretch image to fill available width / height (separately)

Tags:

c#

image

wpf

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

like image 521
Eugene Avatar asked Aug 15 '13 09:08

Eugene


People also ask

How do I stretch a picture to fit the screen?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.

How do I fill an image in a div without stretching it?

Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.

How do I stretch an image to fit in a div?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do I stretch an image to fit in HTML?

One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.


2 Answers

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.

like image 55
Sheridan Avatar answered Oct 02 '22 19:10

Sheridan


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);
like image 30
mwjohnson Avatar answered Oct 02 '22 19:10

mwjohnson