Develop Reference

UWP/XAML - Strange white "ribbon" shown in my UWP app?

Recently I'm trying to learn some Windows 10 UWP app developments. And now I encountered a strange issue, where there is a white ribbon in the bottom of my app, see here:
If I drag and enlarge the app window, then there will be another white ribbon on the top, see here:
Here is my XAML for the UI:
<Page
x:Class="ApodidaeCore.ClockMainUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ApodidaeCore"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid RequestedTheme="Dark" Margin="0,0,0,38" Height="600" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="439*"/>
<RowDefinition Height="161*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="205*"/>
<ColumnDefinition Width="819*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="hourTextBlock" HorizontalAlignment="Left" Height="191" TextWrapping="Wrap" Text="00" VerticalAlignment="Top" Width="205" Foreground="White" FontSize="170" Margin="15.2,98,0,0" Grid.Column="1" />
<TextBlock x:Name="clockSymbolTextBlock" HorizontalAlignment="Left" Height="141" TextWrapping="Wrap" Text=":" VerticalAlignment="Top" Width="38" Foreground="White" FontSize="105" FontWeight="Bold" Margin="244.2,130,0,0" Grid.Column="1"/>
<TextBlock x:Name="minuteTextBlock" HorizontalAlignment="Left" Height="197" TextWrapping="Wrap" Text="00" VerticalAlignment="Top" Width="218" Foreground="White" FontSize="170" Margin="308.2,98,0,0" Grid.Column="1"/>
<TextBlock x:Name="weatherInfoTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="25" Margin="188.2,331,0,0" Text="Unknown" Width="314" Height="33" Grid.Column="1"/>
<TextBlock x:Name="notificationTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="No new notification" VerticalAlignment="Top" Foreground="White" FontSize="25" Margin="188.2,369,0,0" Height="30" Width="314" Grid.Column="1"/>
<Image x:Name="weatherInfoIconImage" HorizontalAlignment="Left" Height="100" Margin="67.2,321,0,0" VerticalAlignment="Top" Width="100" Grid.Column="1"/>
</Grid>
What should I do to fix this? Any suggestions? Thanks in advance!
Jackson.

Got fixed, silly me!
I've wrongly set the grid height and the margin.
Remove those two variables will fix that issue.
Change this:
<Grid RequestedTheme="Dark" Margin="0,0,0,38" Height="600" Background="Black">
to this:
<Grid RequestedTheme="Dark" Background="Black">

How to accommodate GroupBox in WPF?

I have a "GroupBox" which to maximize the window I subrepone to others "GroupBox"
No way to fix it. Anyone?
This is the XAML. This is the xml do not know if there is way to add some definition to fix, any label or something.
<UserControl x:Class="Laboratorio.Calibracion"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="490" d:DesignWidth="660">
<Grid>
<GroupBox Header="Calibracion" Margin="0,0,0,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" Header="Equipo">
<Grid>
<Label x:Name="serialLbl" Content="Serial:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<TextBox x:Name="serialTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,10,0,0"/>
<TextBox x:Name="descripcionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="144" Margin="209,10,0,0" IsEnabled="False"/>
<Label x:Name="resolucionLbl" Content="Resolucion:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
<TextBox x:Name="resolucionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,41,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="0" Grid.Column="1" Header="Patron">
<Grid>
<Label x:Name="patronLbl" Content="Patron:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="106,10,0,0"/>
<Label x:Name="patronLbl_Copy" Content="Niv. Referencia:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,80,0,0"/>
<TextBox x:Name="resolucionTxb_Copy" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="106,80,0,0"/>
<Label x:Name="patronLbl_Copy1" Content="Fluido:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
<ComboBox x:Name="comboBox_Copy" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="106,41,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="0" Header="Condificones">
<Grid>
<Label x:Name="temperaturaLbl" Content="Temperatura:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<TextBox x:Name="temperaturaTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="36" Margin="94,10,0,0"/>
<Label x:Name="humedadLbl" Content="Humedad:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="135,10,0,0"/>
<TextBox x:Name="humedadTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="35" Margin="205,10,0,0"/>
</Grid>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="0" Header="Comprobacion Inicial">
<Grid>
<DataGrid x:Name="compInicialDgv">
<DataGrid.Columns>
<DataGridTextColumn Header="Presion Patron"></DataGridTextColumn>
<DataGridTextColumn Header="Lecturas"></DataGridTextColumn>
<DataGridTextColumn Header="Error"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Segunda Secuencia">
<Grid>
<DataGrid x:Name="segSecDgv">
<DataGrid.Columns>
<DataGridTextColumn Header="Presion Patron"></DataGridTextColumn>
<DataGridTextColumn Header="Lecturas"></DataGridTextColumn>
<DataGridTextColumn Header="Error"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</GroupBox>
</Grid>
</GroupBox>
</Grid>

You are using hardcoded size attributes (Margin, Width, Height, etc). I assume you designed it with drag-and-drop from the toolbox. You can get strange results when resizing the form with such hardcoded values.
I would recommend you change all of them to get rid of the hardcoded margins, edit the parent Grid to use RowDefinitions and ColumnDefinitions with appropriate sizing information (absolutes, Auto, *), set the Grid.Row Grid.Column Grid.ColumnSpan and Grid.RowSpan properties of the GroupBox controls, and then tweak the various sizing details (Margin, Padding, MinWidth, MinHeight, etc) as needed.
Do the same thing for any child Grid elements. You may also want to use other container elements.
Here is a slimmed-down example of what I'm talking about.
<Grid>
<GroupBox Header="Calibracion" Margin="0,0,0,10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" /> <!-- Or '*', 'Auto', etc -->
<ColumnDefinition Width="5*" /> <!-- Or '*', 'Auto', etc -->
</Grid.ColumnDefinitions>
<GroupBox Header="Equipo" Grid.Column="0" Grid.Row="0">
<!-- GroupBox contents here -->
</GroupBox>
<GroupBox Header="Patron" Grid.Column="1" Grid.Row="0">
<!-- GroupBox contents here -->
</GroupBox>
<GroupBox Header="Condificones" Grid.Column="0" Grid.Row="1">
<!-- GroupBox contents here -->
</GroupBox>
</Grid>
</GroupBox>
</Grid>

C# WPF fix Grid in Scrollviewer only in one direction

I have a XAML Page where I have 4 Grids (rectGrid, dateGrid, roomGrid, optionGrid) , 3 of them (rectGrid, dateGrid, roomGrid) are created dynamically (in Code Behind)
What i want to do is that the rectGrid is scrollable Horizontal and Vertical, but the roomGrid only Horizontal and the dateGrid only vertical
Here's the Code
<ScrollViewer Height="Auto" Width="Auto" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Grid>
<Grid Name="optionsGrid">
<Label Name="lZeit" Content="Zeitraum: von" Margin="100,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpVon" Margin="192,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Label Name="lBis" Content="bis" Margin="372,7,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Label>
<DatePicker Name="dpBis" Margin="440,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="23"></DatePicker>
<Button Content="OK" Height="23" HorizontalAlignment="Left" Margin="620,6,0,0" Name="selectDates" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="selectDates_Click"/>
<Button Content="Drucken" Height="23" HorizontalAlignment="Left" Margin="740,6,0,0" Name="print" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-2.552,0.522" Click="print_Click"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Margin="100,70" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
<Grid Height="30" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="dateGrid" VerticalAlignment="Top" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="656*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="1129*"/>
</Grid.ColumnDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="Auto" Width="82" Name="roomGrid" Margin="0,70">
</Grid>
</Grid>
</ScrollViewer>
Here's a Screenshot:
enter image description here

Instead of placing the Grids in a ScrollViewer, do this;
<Grid Name="optionsGrid" ScrollViewer.HorizontalScrollBarVisibility="Visible">
OR
<Grid Name="optionsGrid" ScrollViewer.VerticalScrollBarVisibility="Visible">
I don't really understand your question or the naming of the Grids so you will need to change that as you see fit.

I have solved it.
<Grid HorizontalAlignment="Stretch" Name="rectGrid" VerticalAlignment="Stretch" OpacityMask="Black" Opacity="1" ShowGridLines="False" Height="Auto" Width="Auto">
</Grid>
</ScrollViewer>

Horizontal ListView items do not scroll when swiped in WinRT app?

I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>

I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

XAML window shows image blurred

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:
The floating controls are moved from one computer to other
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>

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>
For the blurred image, try using UseLayoutRounding="False" in your Image definition.