XAML Image gets distorted after compilation

Question

Have a checkbox with custom control template which looks like this in design view:

XAML code:

<CheckBox IsChecked="{Binding Fareklasse21}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1"> <CheckBox.Template> <ControlTemplate> <StackPanel Orientation="Vertical" VerticalAlignment="Center"> <Image Source="pack://application:,,,/Asd.WWs.Client.Wpf;component/Resources/ADR-M.png" Width="64" Height="64" SnapsToDevicePixels="True"> </Image> <StackPanel Orientation="Horizontal"> <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}"></CheckBox> <TextBlock>2.1</TextBlock> </StackPanel> </StackPanel> </ControlTemplate> </CheckBox.Template>

When I start the application, the image (which is originally 64x64px) gets distorted (and enlarged?)

Could it be that the image inherits some value from the Prism wrapper? I can't really see anything interesting while doing live inspection:

Here are the properties of the specific image:

CheckBox inside template also looks strange. It's rather layout issue: Image is still 64x64, but there is no available space anymore. So it become clipped (as well as CheckBox). — Sinatr
– Sinatr, Commented Apr 12, 2016 at 11:14
Yes, you are right. The image displays in 64x64 - same size as design, but gets blurred somehow - and the grid cell gets gropped. — nitech
– nitech, Commented Apr 12, 2016 at 11:15
Blur is another problem. Do you apply effects to any parent container? See this. — Sinatr
– Sinatr, Commented Apr 12, 2016 at 11:17
I didn't write the whole application, so I don't really know. I haven't experienced this before - but then again I haven't worked much with graphics in the app. The cropping was simply a fluid with issue. When I resized the image, the cropping moved aswell. I'll set MinWith or some similar property to fix that. — nitech
– nitech, Commented Apr 12, 2016 at 11:19

Vadim Martynov · Accepted Answer · 2016-04-12 11:58:23Z

The WPF graphics system uses device-independent units to enable resolution and device independence. Each device independent pixel automatically scales with the system's dots per inch (dpi) setting. This provides WPF applications proper scaling for different dpi settings and makes the application automatically dpi-aware. See also wiki page.

This is the reason why if you even specify Stretch=None for an Image control, you may notice that the image does not appear at the expected number of pixels wide/high. This can happen if the image’s resolution (DPI) doesn’t match your current system DPI.

The conversion from physical pixels to DIPs uses the following formula.

DIPs = pixels / (SystemDPI / 96.0)

If you want to convert DIP to the "real" pixels you can use next formula:

Width (pixels) = Width (WPF Units) * (SystemDPI / 96)

Height (pixels) = Height (WPF Units) * (SystemDPI / 96)

You can specify element size in DIP, inches, centimeters or points. But it's better to use vectorized graphics if possible.

If you have SVG files you can use sharpvector framework via nuget:

Install-Package SharpVectors

So there is SvgViewbox to render SVG in XAML:

<UserControl ... xmlns:svgc="http://sharpvectors.codeplex.com/svgc/" ...> ... <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/Resources/Icons/Sample.svg"/> ... </UserControl>

Ah. Really? Sounds like I'm better off using vectorized graphics?
@nitech yes, WPF is totally vectorized-friendly and it's better to use it when it's possible. You can specify element size in DIP, inches, centimeters or points. Look at the next link for details: msdn.microsoft.com/en-us/library/…
WPF does not have native SVG files support. You could convert your SVG into Xaml through tools. You can use Inkscape to open your SVG and save it as Microsoft XAML. Also you can use SharpVectors via nuget Install-Package SharpVectors and then use svgc:SvgViewbox for bind directly to svg. I will update my answer in few minutes with example.

Collectives™ on Stack Overflow

XAML Image gets distorted after compilation

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related