XAML window shows image blurred

Question

I'm new in WPF and I'm trying to show an image in a WPF windows, and then show a button, and two links in a absulute coordinate. I have two problems:

1. The floating controls are moved from one computer to other
2. The image is blurred. I think that is being resized.

The form must be a fixed dialog, and the image size is 800x560.

Here is my code:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="A.B.C.IntroGuideWindow"
        Title="Intro guide" Icon="../Resources/app_icon.ico"
        Background="{DynamicResource DialogBackgroundBrush}" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
        WindowStyle="None"
        Style="{DynamicResource WindowStyle}" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display" Width="830" Height="660">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../ResourceDictionaries/Colors.xaml"/>
                <ResourceDictionary Source="../ResourceDictionaries/BasicStyles/StandardWindowStyle.xaml"/>
                <ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/ActionFlatButtonStyle.xaml"/>
                <ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/CancelButtonStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="22"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Margin="10,10,10,10" FontFamily="Segoe UI" FontSize="21"
            FontWeight="SemiBold" Foreground="{DynamicResource FontBrush}" Grid.Row="0">
            <Run Text="Intro guide" />
        </TextBlock>
        <Button x:Name="closeButton" Style="{DynamicResource CloseChromeButtonStyle}"
            Click="CancelButton_Click" Grid.Row="0"
            Content="r" HorizontalAlignment="Right" Margin="0,6,6,0" FontFamily="Webdings" IsTabStop="False" />
        <Image x:Name="CurrentImage" Grid.Row="1" Width="800" Height="560" Stretch="None" Source="Images/sm-eval-guide-09.png" SnapsToDevicePixels="True"/>
        <Button x:Name="OpenSamplesButton" Content="Click here to open the samples directory" IsDefault="False"
            Style="{DynamicResource ActionFlatButtonStyle}"
            Margin="256,115,265,434" Width="301" Height="23" Click="OpenSamplesButton_Click" Grid.Row="1"/>
        <TextBlock x:Name="DocumentationLink" Margin="2,221,-2,333" Grid.Row="1" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="14" FontWeight="Bold">
            <Hyperlink Foreground="#00A586" NavigateUri="http://www.example.com/#documentation">http://www.example.com/#documentation</Hyperlink>
        </TextBlock>
        <TextBlock x:Name="TwitterLink" Margin="590,415,84,137" Grid.Row="1" VerticalAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold">
            <Hyperlink Foreground="#00A586" NavigateUri="https://twitter.com/xxx">@xxx</Hyperlink>
        </TextBlock>
        <Grid VerticalAlignment="Top" Grid.Row="2">
            <Button x:Name="PreviousButton" Content="Previous" IsDefault="False"
                Style="{DynamicResource ActionFlatButtonStyle}"
                Margin="0,0,200,10" Width="90" HorizontalAlignment="Right" Click="PreviousButton_Click"/>
            <Button x:Name="NextButton" Content="Next" IsDefault="True"
                Style="{DynamicResource ActionFlatButtonStyle}"
                Margin="0,0,105,10" Width="90" HorizontalAlignment="Right" Click="NextButton_Click"/>
            <Button x:Name="CloseButton" Content="Close" IsDefault="False"
                Style="{DynamicResource ActionFlatButtonStyle}"
                Margin="0,0,10,10" Width="90"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="CloseButton_Click"/>
            <CheckBox x:Name="DontShowAgainCheckbox" Content="Don't show this window again." HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Checked="DontShowAgainCheckbox_Checked"/>
        </Grid>
    </Grid>
</Window>

Answer 1

1. WPF adjusts for pixel density of the monitor it is running on. Consider using Grid Columns or other layout controls such as StackPanel instead of Margin offsets. For example, your buttons could use the following layout:

    <StackPanel Orientation="Horizontal" Margin="10,0" HorizontalAlignment="Right"> <Button x:Name="PreviousButton" Content="Previous" IsDefault="False" Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0" Width="90" Click="PreviousButton_Click"/> <Button x:Name="NextButton" Content="Next" IsDefault="True" Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0" Width="90" Click="NextButton_Click"/> <Button x:Name="CloseButton" Content="Close" IsDefault="False" Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0" Width="90" Click="CloseButton_Click"/> </StackPanel> 

2. For the blurred image, try using UseLayoutRounding="False" in your Image definition.