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, Apr 12 '16 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, Apr 12 '16 at 11:15
Blur is another problem. Do you apply effects to any parent container? See [this](http://stackoverflow.com/q/592017/1997232). — Sinatr, Apr 12 '16 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, Apr 12 '16 at 11:19

Vadim Martynov · Accepted Answer · 2016-04-12T11:58:23.200

4

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>

edited Apr 12 '16 at 11:58

answered Apr 12 '16 at 11:19

Vadim Martynov

8,602
5
31
43

Ah. Really? Sounds like I'm better off using vectorized graphics? – nitech Apr 12 '16 at 11:24
@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: https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.width.aspx – Vadim Martynov Apr 12 '16 at 11:28
I can't seem to conclude that it allows direct use of SVG? – nitech Apr 12 '16 at 11:47
WPF does not have native SVG files support. You could convert your SVG into Xaml through tools. You can use [Inkscape](http://www.inkscape.org/) 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. – Vadim Martynov Apr 12 '16 at 11:55
Thank you Vadim. Great answer – nitech Apr 12 '16 at 12:14

XAML Image gets distorted after compilation

1 Answers1