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">
Related
in this Code window state is maximize and that's fine, but when i run this code
window is on Fullscreen but stackpanel and grid not on full screen.
here is my Code
<Window x:Class="POSApplication.POSSystem"
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"
xmlns:local="clr-namespace:POSApplication"
mc:Ignorable="d"
Title="POS System" Height="600.857" Width="908.571" Background="#04c582" Loaded="OnloadPage" ResizeMode="NoResize" WindowState="Maximized" WindowStyle="None">
<Grid Name="MainGrid" Margin="0,0,-6,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left" Height="346" Margin="0,68,0,0" VerticalAlignment="Top" Width="171">
<Button Content="Customers" Height="54" FontSize="20" FontWeight="Bold" Name="Customers_Btn" Click="Customers_Btn_Click"/>
<Button Content="Products" Height="54" FontSize="20" FontWeight="Bold" Name="Products_Btn" Click="Products_Btn_Click"/>
<Button Content="Users" Height="54" FontSize="20" FontWeight="Bold" Name="User_Btn" Click="User_Btn_Click"/>
<Button Content="Sale" Height="54" FontSize="20" FontWeight="Bold" Click="Sale_Btn"/>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Height="63" VerticalAlignment="Top" Width="892" Background="#04b550">
<Label Content="POS Sytem" Margin="0,20,0,0" Width="120" Height="40" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"/>
<Button Content="Log Out" HorizontalAlignment="Left" Margin="770,-40,0,0" VerticalAlignment="Top" Width="100" FontWeight="Bold" Click="LogOut_Button_Click" Height="40" FontSize="20"/>
</StackPanel>
<WrapPanel HorizontalAlignment="Left" Height="440" Margin="176,68,0,0" VerticalAlignment="Top" Width="700" Background="White" Name="main_panel" />
</Grid>
I have started learning wpf. I am trying to use line element but whenever i try to run this code line is not visible at all. Same case with rectangle, I have used rectangle element as well but it is also not showing up. What is the problem? I don't understand. I am able to see that in designer view but not in the runtime.
<Window x:Class="Mi_Express.Product_Details"
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"
xmlns:local="clr-namespace:Mi_Express"
mc:Ignorable="d"
Title="Product_Details" Height="1920" Width="1080" WindowState="Maximized" ResizeMode="NoResize" WindowStyle="None"
Foreground="White" FontSize="30" FontWeight="Bold" Topmost="True" Background="White">
<Grid>
<Line HorizontalAlignment="Stretch" X1="10" Y1="10" X2="870" Y2="10" Stroke="Black" StrokeThickness="4" Margin="120,180,79,1712"/>
<Label Content="Shopping Cart:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="157,125,0,0" FontSize="30" FontWeight="DemiBold"/>
<Rectangle HorizontalAlignment="center" Height="73" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="1017" Margin="28,1663,35,0"
/>
<Image HorizontalAlignment="Left" Height="102" VerticalAlignment="Top" Width="139" Margin="157,270,0,0"/>
<Button Content="Go Back" ClickMode="Press" Background="#FFE87E04" BorderBrush="#e87e04" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top" Width="174" Margin="157,1786,0,0" Height="61"/>
<Button Content="Continue" ClickMode="Press" Background="#e87e04" BorderBrush="#e87e04" FontSize="18" Foreground="white" HorizontalAlignment="Right" VerticalAlignment="Top" Width="160" Margin="0,1786,159,0" Height="61"/>
</Grid>
</Window>
The problem here is with the structure of your grid ..Dont apply margin to any of the UI elements over here.. instead remove it and use grid.column to position your UI elements..I have modified your code a litte
<Window x:Class="WpfApp1.MainWindow"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Line Grid.Column="0" HorizontalAlignment="Stretch" X1="10" Y1="10" X2="870" Visibility="Visible" Y2="10" Stroke="Red" StrokeThickness="4" Margin="12,18,79,171"/>
<Label Grid.Column="1" Content="Shopping Cart:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="157,125,0,0" FontSize="30" FontWeight="DemiBold"/>
<Rectangle Grid.Column="2"
Visibility="Visible"
Fill="Blue"
HorizontalAlignment="center" Height="73" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="1017" Margin="28,166,35,0"
/>
<Image HorizontalAlignment="Left" Height="102" VerticalAlignment="Top" Width="139" Margin="157,270,0,0"/>
<Button Content="Go Back" ClickMode="Press" Background="#FFE87E04" BorderBrush="#e87e04" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top" Width="174" Margin="157,1786,0,0" Height="61"/>
<Button Content="Continue" ClickMode="Press" Background="#e87e04" BorderBrush="#e87e04" FontSize="18" Foreground="white" HorizontalAlignment="Right" VerticalAlignment="Top" Width="160" Margin="0,1786,159,0" Height="61"/>
</Grid>
For more information on how to use grid in wpf .. please follow this links:
1) http://www.c-sharpcorner.com/UploadFile/1e050f/grid-layout-in-wpf/
2) http://www.wpf-tutorial.com/panels/grid-rows-and-columns/
3) https://wpftutorial.net/GridLayout.html
The problem is in the margin. Bottom margin is way too high and line goes out of the window
I guess you mistaken height with width and you ment Width="1920" Height="1080". Even so the actually height of the grid it would not be 1080, you can check it using this line
<Label Content="{Binding ElementName=grid,Path=ActualHeight}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="157,175,0,0" FontSize="30" FontWeight="DemiBold"/>
When I view my app in the Windows Phone 8.1 wvga 4 " the screen works fine as you see in the following screen shot
But when I view it on my 5"lumia it seems messaged up as in screenshot
I know the iPhone uses a constraints system to keep items in place on all resolutions is their something similiar in windows phone 8.1
<Page
x:Class="findaPhysio.findaPhysioSearchDetails"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:findaPhysio"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:drawerLayout="using:DrawerLayout"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Title bar -->
<Grid x:Name="TitleBar" Background="#373A36" Grid.Row ="0" Height="60">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="5" x:Name="DrawerIcon" Grid.Column="0" Source="/Assets/ic_drawer.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />
<TextBlock Grid.Column="1" Text="findaPhysio" Foreground="White" VerticalAlignment="Center" FontSize="18"/>
</Grid>
<!--DrawerLayout bar -->
<drawerLayout:DrawerLayout Grid.Row="1" x:Name="DrawerLayout">
<!--MainPage -->
<Grid x:Name="MainFragment" Background="White">
<local:MapView x:Name="MyMap" Background="Black" Zoom="5" ShowTraffic="True" Margin="10,51,0,325" Loaded="MyMap_Loaded"/>
<TextBlock HorizontalAlignment="Left" Margin="18.167,281.833,0,0" FontSize="18" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="85" Foreground="Black" Height="31" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform SkewX="4.332" TranslateX="1.174"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="txtAddress" HorizontalAlignment="Left" FontSize="18" Margin="116,282,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="175" Foreground="Black" RenderTransformOrigin="2.554,0.897"/>
<TextBlock HorizontalAlignment="Left" Margin="22,257,0,0" FontSize="18" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" RenderTransformOrigin="0,0.256" Foreground="Black" IsTextSelectionEnabled="True"/>
<TextBlock x:Name="txtTelephone" HorizontalAlignment="Left" FontSize="18" Margin="116,331,0,0" TextWrapping="Wrap" Text="Telephone" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="143"/>
<TextBlock HorizontalAlignment="Left" Margin="16,331,0,0" FontSize="18" TextWrapping="Wrap" Text="Telephone" VerticalAlignment="Top" Foreground="Black"/>
<TextBlock HorizontalAlignment="Left" Margin="16,325,0,0" FontSize="18" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Foreground="Black"/>
<Button x:Name="btnBookNow" Content="Book Now" HorizontalAlignment="Left" Margin="108,427,0,0" VerticalAlignment="Top" Foreground="#FF589E5B" Background="#FF71C975" Tapped="btnBookNow_Tapped"/>
<TextBlock HorizontalAlignment="Left" Margin="16,304,0,0" FontSize="18" TextWrapping="Wrap" Text="Town" VerticalAlignment="Top" Foreground="Black"/>
<TextBlock x:Name="txtName" HorizontalAlignment="Left" Margin="116,257,0,0" FontSize="18" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Top" RenderTransformOrigin="0,0.256" Foreground="Black" IsTextSelectionEnabled="True"/>
<TextBlock x:Name="txtTown" HorizontalAlignment="Left" Margin="116,304,0,0" FontSize="18" TextWrapping="Wrap" Text="Town" VerticalAlignment="Top" Foreground="Black"/>
<TextBlock HorizontalAlignment="Left" Margin="16,358,0,0" FontSize="18" TextWrapping="Wrap" Text="Web" VerticalAlignment="Top" Foreground="Black"/>
<TextBlock x:Name="txtWeb" HorizontalAlignment="Left" FontSize="12" Margin="116,358,0,0" TextWrapping="Wrap" Text="Web" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="263" Height="22"/>
<TextBlock x:Name="lblsp" HorizontalAlignment="Left" Margin="16,385,0,0" FontSize="18" TextWrapping="Wrap" Text="Speciality" VerticalAlignment="Top" Foreground="Black"/>
<TextBlock x:Name="txttxtSpeciality" HorizontalAlignment="Left" FontSize="18" Margin="116,385,0,0" TextWrapping="Wrap" Text="Speciality" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="143"/>
</Grid>
<!--Favorites List Section -->
<Grid x:Name="ListFragment">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="#5490CC">
<TextBlock HorizontalAlignment="Center" Margin="0,5,0,5" Text="Physio Details"
FontSize="25"/>
</Border>
<ListView Grid.Row="1" VerticalAlignment="Center" x:Name="ListMenuItems">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="White" Margin="0,0,0,1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding}" Margin="10" VerticalAlignment="Center" FontSize="18" Foreground="Black" />
<Rectangle Grid.Row="1" HorizontalAlignment="Left" Fill="Gray" Width="500" Height="0.5"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</drawerLayout:DrawerLayout>
</Grid>
You should use GridColumns and GridRows property of Grid control for you XAML. You have problem with resolution, because you hardcode margins of you TextBlocks. You should write:
<Grid>
<Grid.RowDefinitions>
<RowDefition />
......
</Grid.RowDefinitions/>
<Grid.ColumnDefinitions>
....
</Grid.ColumnDefinitions/>
.....
</Grid>
And after insert your TextBlock to need column and row, for ex.:
<TextBlock Grid.Row="1" Grid.Column="1" />
I have a ListBox with text and a corresponding Image. I would Like the Image to align right. How would i alter my XAML to achieve this? We are mainly looking at lbxBuiltInLevels. Thanks.
<Page x:Class="TheseusAndTheMinotaur.ChooseLevelPage"
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"
xmlns:local="TheseusAndTheMinotaur"
mc:Ignorable="d"
Title="ChooseLevelPage">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/TheseusAndTheMinotaur;component/Images/MainBackground.jpg"/>
</Grid.Background>
<ListBox x:Name="lbxLevels" HorizontalAlignment="Left" Height="100" Margin="10,78,0,0" VerticalAlignment="Top" Width="100"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" Margin="10,208,0,0" VerticalAlignment="Top" Width="75" Click="btnExit_Click"/>
<Button x:Name="btnLoad" Content="Load" HorizontalAlignment="Left" Margin="10,183,0,0" VerticalAlignment="Top" Width="75" Click="btnLoadCustomLevel_Click"/>
<Label x:Name="lblSavedLevels" Content="Custom Levels" HorizontalAlignment="Left" Margin="10,20,0,0" VerticalAlignment="Top" FontSize="34" FontFamily="Papyrus" FontWeight="ExtraBold"/>
<Label x:Name="lblBuiltInLevels" Content="Built-in Levels" Grid.Column="1" HorizontalAlignment="Left" Margin="44,20,0,0" VerticalAlignment="Top" FontSize="34" FontWeight="ExtraBold" FontFamily="Papyrus"/>
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" Margin="10,78,0,0" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid x:Name="gridForLevels">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="3" Text="{Binding Str}"/>
<ContentControl Grid.Column="1" Margin="0,0,10,0" Content="{Binding Image}" HorizontalAlignment="Right" HorizontalContentAlignment="Right" FlowDirection="RightToLeft"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>
Set this code in your listbox:
HorizontalContentAlignment="Stretch"
Should look like:
<ListBox x:Name="lbxBuiltInLevels" Grid.Column="1" HorizontalContentAlignment="Stretch" Margin="10,78,0,0" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"
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.