How can I get images in XAML to display as their actual size?

Question

I have a 27 x 27 pixel image that I am displaying in WPF but it displays larger than the size of the window.

How can I get it to display its actual size?

alt text http://www.deviantsart.com/upload/m20dk6.png

XAML:

<Window x:Class="TestImage23434.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel x:Name="MainStackPanel"/>
</Window>

Code Behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System;

namespace TestImage23434
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            TextBlock tb = new TextBlock();
            tb.Text = "above image ";
            MainStackPanel.Children.Add(tb);

            Image img = new Image();
            img.Source = new BitmapImage(new Uri(@"C:\test\circle.png"));
            img.HorizontalAlignment = HorizontalAlignment.Left;
            img.VerticalAlignment = VerticalAlignment.Top;
            MainStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
            MainStackPanel.VerticalAlignment = VerticalAlignment.Top;
            MainStackPanel.Children.Add(img);

            TextBlock tb2 = new TextBlock();
            tb2.Text = "below image";
            MainStackPanel.Children.Add(tb2);
        }
    }
}

Does this answer your question? [WPF: How to display an image at its original size?](https://stackoverflow.com/questions/3055550/wpf-how-to-display-an-image-at-its-original-size) — StayOnTarget, Apr 30 '20 at 20:59

score 23 · Accepted Answer · answered Dec 03 '09 at 17:50

23

img.Stretch = Stretch.None

By default, the Stretch property has a value of Uniform, which resizes the image to fill all available space.

answered Dec 03 '09 at 17:50

Heinzi

167,459
57
363
519

2

I don't think I've ever used an image in such a way I've had to USE the Stretch property... I forgot it even existed. – Nathan Wheeler Dec 03 '09 at 18:19
2

if we Set "img.Stretch = Stretch.None" there is problem when the image is too large some portion of image is not get visible.Any solution for this – achukrishnan Dec 06 '13 at 05:47

score 8 · Answer 2 · answered May 07 '15 at 18:50

8

None of these tips were working for me. Some binding tricks is what got me going.

<Image Source="yourPic.png" Stretch="UniformToFill"
Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}"
Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}" />

You could probably set Strech to None but this worked for my app using .net 4.5.1.

answered May 07 '15 at 18:50

Chef Pharaoh

2,387
3
27
38

Binding the width and height works well in combination with a static `MaxWidth` and `MaxHeight` and `Stretch="Uniform"` in order to have original size up to some limit. The accepted answer shows only part of the image in such a scenario. – grek40 Jan 18 '16 at 10:13
You can't have `Stretch="None"` if you want this to work! I lost almost an hour before I realized it. – Paweł Audionysos Feb 01 '20 at 19:58

score 2 · Answer 3 · edited Aug 14 '12 at 18:15

2

img.HorizontalAlignment = HorizontalAlignment.Left;
img.VerticalAlignment = VerticalAlignment.Top;
img.Stretch = Stretch.None;

The StackPanel will stretch to fill/overflow whatever container it's in unless its size is specified. Since you aren't setting margins or alignments on anything, the default behavior for everything is Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch", or simply put "Stretch to fill". Aligning/positioning your elements will fix this issue.

EDIT: Added img.Stretch = Stretch.None;, also I built a sample app and tested it... it works.

edited Aug 14 '12 at 18:15

Parker

8,539
10
69
98

answered Dec 03 '09 at 17:30

Nathan Wheeler

5,896
2
29
48

How does the alignment affect the size of the displayed image? – dtb Dec 03 '09 at 17:34
The standard alignment is `Stretch`, which *does* affect the size. – Heinzi Dec 03 '09 at 17:35
I tried that but it still expands to the size of its possible area. I tried putting these settings on the StackPanel as well but it still expands. – Edward Tanguay Dec 03 '09 at 17:36
@Heinzi - Thx, was wondering why it got a downvote until I saw your edit... :D – Nathan Wheeler Dec 03 '09 at 17:58

score 2 · Answer 4 · edited May 23 '17 at 12:09

2

It could also be your image's DPI property in its metadata. It should be 96. https://stackoverflow.com/a/4965404/659326

edited May 23 '17 at 12:09

Community

1
1

answered Feb 18 '14 at 10:59

Mahorad

1,258
1
15
22

How can I get images in XAML to display as their actual size?

4 Answers4

Linked