XAML design: drawing a line from button to button - c#

I am trying to learn XAML and am creating a simple app based off this:
I have created the buttons for each of the circles, but where I am running into an issue is the drawing of the lines and autosizing them to the button positions. I was wondering if there is a way to bind the start/end point of a path to a button location? Is there a better way doing this in XAML?
Here is what my current XAML code is...
<Page
x:Class="PennyGame.GameControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PennyGame"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Width="100" Height="100" Margin="540,133,0,535" Name="Button_Top1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
<Path Data="M49,100 L48,401" Fill="Gold" Height="302" Stretch="Fill" Stroke="Gold" UseLayoutRounding="False" Width="2"/>
</Button>
<Button Width="100" Height="100" Margin="725,133,0,535" Name="Button_Top2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="725,534,0,134" Name="Button_Bottom2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="540,534,0,134" Name="Button_Bottom1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,244,0,424" Name="Button_Left1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,423,0,245" Name="Button_Left2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,244,0,424" Name="Button_Right1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,423,0,245" Name="Button_Right2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Path Data="M526,475 L826,475" Fill="White" Margin="534,0,539,292" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition" Height="10" />
<Path Data="M526,295 L826,295" Fill="White" Margin="534,294,538,0" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition" Height="2" />
<Path Data="M590,235 L590,535" Fill="White" Margin="590,233,0,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="2" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Left" />
<Path Data="M775,235 L775,535" Fill="White" Margin="0,233,590,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="3" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Right" />
<Path Data="M590,535 L826,295" Fill="White" Margin="590,294,539,238" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M775,535 L526,295" Fill="White" Margin="534,296,589,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M526,475 L775,235" Fill="White" Margin="534,233,589,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M590,235 L826,475" Fill="White" Margin="590,233,540,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
</Grid>


If you stick to handle it in XAML using grids you can use a canvas for each button-line-button constellation.
I'd recommend to handle it in code.
See my example bellow.
I bound actual Canvas properties to each button and the connector line.
It should properly if you resize the container grid, or reposition your canvas.
RESULT:
CODE:
<Grid Width="300" Height="300">
<Canvas x:Name="lineCanvas1">
<Line x:Name="line" Fill="Green" Stroke="Green" UseLayoutRounding="False" X1="1" Y1="1" X2="{Binding ActualWidth, ElementName=lineCanvas1}" Y2="{Binding ActualHeight, ElementName=lineCanvas1}" />
<Button x:Name="button1" Content="Button One" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Background="Red" RenderTransformOrigin="1,1" Height="100" Width="100"/>
<Button x:Name="button2" Content="Button Two" HorizontalAlignment="Stretch" Margin="-100,-100,0,0" VerticalAlignment="Stretch" Background="Red" Canvas.Left="{Binding ActualWidth, ElementName=lineCanvas1}" Canvas.Top="{Binding ActualHeight, ElementName=lineCanvas1}" RenderTransformOrigin="1,1" Height="100" Padding="0" Width="100"/>
</Canvas>
</Grid>

Related

Issue with button with image not showing in Windows Server 2012

i've made an application in WPF with custom minimize, maximize and close buttons. In Windows 10 all works fine but when i install the application on an Windows 2012 server the Images in the button are gone. When you click on the the place where the buttons ment to be the actions work fine only no Images.
When i resize the app the images appear to be stuk in the middel of the application. when i resize smaller the image stay in the button when i go bigger the images leave the buttons.
What is going on. Is there anyone who had the same issue?
<Button x:Name="MinimizeButton" Padding="3" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,55,0" Click="MinimizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/minimizeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="MaximizeButton" Padding="4" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,30,0" Click="MaximizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/maximizeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="25" Padding="4" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,5,0" HorizontalAlignment="Right" Click="Button_Click_1" Grid.Column="1" Background="{x:Null}">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/closeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>

The problem is with the default LowQuality BitmapScalingMode (default changed in 4.0)
Changing to RenderOptions.BitmapScaling="HighQuality" seemed to fix the issue for me.
<Button x:Name="MinimizeButton" Padding="3" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,55,0" Click="MinimizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/minimizeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="MaximizeButton" Padding="4" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,30,0" Click="MaximizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/maximizeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="25" Padding="4" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,5,0" HorizontalAlignment="Right" Click="Button_Click_1" Grid.Column="1" Background="{x:Null}">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/closeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

WPF White screen and 1 GB of umanaged RAM usage on Windows 8.1 and Windows 7

I have a problem with WPF Application. It runs perfectly on Windows 10, tested on latest update 1803 and latest Insider Fast, but when application is run on Windows 8 or 7, application starts, uses 1 GB of unamanged RAM for few milliseconds and then renders only white screen. App is running and I can see cursor changing and code running in background, but when I try to move Window for example, application crashes with Out Of Memory exception and Application does not have enough memory to execute.
I do not understand this problem, I tried removing code from it... It can be libraries or XAML.
I tried different .NET versions. I am out of ideas.
Did anyone ever had this problem? How to solve it? I can publish code if required to get help... I am really lost.
<Window x:Name="mainWindow" x:Class="GameV2.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:local="clr-namespace:GameV2"
xmlns:GameEngine="clr-namespace:GameEngine;assembly=GameEngineV2"
xmlns:zp="clr-namespace:ZoomAndPan;assembly=ZoomAndPan"
mc:Ignorable="d" TextElement.Foreground="{DynamicResource MaterialDesignBody}" Background="Black"
Title="MainWindow" Height="640" Width="1280" PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid Margin="0,0,0,0">
<materialDesign:DialogHost IsTabStop="False">
<Grid>
<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" Grid.Row="1">
<zp:ZoomAndPanControl UseAnimations="True" MinimumZoomType="FitScreen" ZoomAndPanInitialPosition="FitScreen" x:Name="zoomBorder">
<Grid x:Name="maingrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" UseLayoutRounding="True" SnapsToDevicePixels="True" Width="Auto" Height="Auto">
</Grid>
</zp:ZoomAndPanControl>
</ScrollViewer>
<!--GUI-->
<Grid Panel.ZIndex="3">
<!--TOP PANEL-->
<Grid x:Name="menuControlGrid" Margin="0,0,0,0" Width="Auto" Height="50" VerticalAlignment="Top" Panel.ZIndex="9999" Background="#99000000" RenderOptions.BitmapScalingMode="HighQuality">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="485"/>
<ColumnDefinition Width="1*" MinWidth="250"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<Button x:Name="menuButton" HorizontalAlignment="Right" Margin="0,10,5,10" Width="30" Height="Auto" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Grid.Column="2" Click="menuButton_Click"/>
<Image HorizontalAlignment="Right" Margin="0,10,5,10" Width="30" Height="Auto" Grid.Column="2" Source="Resources/Icons/menu.png" IsHitTestVisible="False"/>
<ToggleButton x:Name="buildButton" Content="BUILD" HorizontalAlignment="Center" Margin="-30,10,0,10" Width="105" Height="Auto" Style="{DynamicResource MaterialDesignRaisedLightButton}" Grid.Column="2" Checked="buildButton_Checked" Unchecked="buildButton_Unchecked"/>
<Grid HorizontalAlignment="Left" Margin="5,7,0,3" Width="105" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/Status/happy.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="65 535" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="50" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"></TextBox>
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="115,7,0,3" Width="155" Grid.Column="0">
<materialDesign:Card>
<Grid>
<Image Source="Resources/Icons/balance.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="2 147 483 647" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="100" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold" />
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="275,7,0,3" Width="115" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/profit.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="999 999" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="60" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
</Grid>
</materialDesign:Card>
</Grid>
<Grid HorizontalAlignment="Left" Margin="395,7,0,3" Width="85" Grid.Column="0">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/quests.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" Cursor="Arrow" Text="255" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="30" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
</Grid>
</materialDesign:Card>
</Grid>
<Grid Margin="25.2,7,25.4,3" Grid.Column="1">
<materialDesign:Card >
<Grid>
<Image Source="Resources/Icons/calendar.png" Margin="5,0,0,6" HorizontalAlignment="Left" Width="25" Height="25" VerticalAlignment="Bottom"/>
<TextBox TextWrapping="NoWrap" x:Name="clockText" Cursor="Arrow" Text="{Binding Path=ClockMessageText, ElementName=mainWindow}" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="40,5,0,5" Width="120" IsReadOnly="True" Focusable="False" IsTabStop="False" TextAlignment="Center" FontSize="15" FontFamily="{StaticResource MaterialDesignFont}" FontWeight="DemiBold"/>
<Border BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="170,5,5,5">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="12*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="0" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="1" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="2" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="3" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="4" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="5" />
<Rectangle Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" Fill="Black" Grid.Column="6" />
</Grid>
</Border>
</Grid>
</materialDesign:Card>
</Grid>
</Grid>
<Path Width="10" Height="10" Margin="500.35,49.75,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#99000000" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
<Path Width="10" Height="10" Margin="656,50,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="#99000000" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased">
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
<Border BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="0,0,0,0" CornerRadius="0,0,9,9" Margin="510,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Height="33" Width="146" Background="#99000000" Panel.ZIndex="10000" RenderOptions.BitmapScalingMode="HighQuality" RenderOptions.EdgeMode="Aliased">
<Grid x:Name="menuTimeGrid">
<Grid Margin="10,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left">
<Button x:Name="pause" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled" Click="pause_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/pause.png"/>
</Grid>
<Grid Margin="43,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="play" Style="{DynamicResource MaterialDesignFloatingActionButton}" Width="26" Height="26" Click="play_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/Play.png"/>
</Grid>
<Grid Margin="76,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="playFast" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" Click="playFast_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/fast.png"/>
</Grid>
<Grid Margin="109,0,0,0" Height="28" Width="28" VerticalAlignment="Top" HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="playFastest" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Width="26" Height="26" Click="playFastest_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/Time/fastest.png"/>
</Grid>
</Grid>
</Border>
<!--RIGHT PANEL-->
<Grid x:Name="buildGrid" VerticalAlignment="Stretch" HorizontalAlignment="Right" Margin="0,50,0,0" Width="220" Visibility="Hidden">
<Grid.RowDefinitions>
<RowDefinition Height="100px"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border x:Name="buttonsBorder" Grid.Row="0" Background="#99000000" BorderBrush="{DynamicResource MaterialDesignBody}" BorderThickness="0,0,0,0" CornerRadius="0,0,0,9">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Width="100" Height="1" RenderTransformOrigin="0.5,0.5" Margin="130.5,49,-10,49" TextWrapping="NoWrap" IsHitTestVisible="False" IsEnabled="False" Cursor="Arrow" HorizontalAlignment="Left" Grid.RowSpan="2">
<TextBox.RenderTransform>
<TransformGroup>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</TextBox.RenderTransform>
</TextBox>
<Grid Grid.Row="0">
<Grid HorizontalAlignment="Left" Margin="5,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="roadButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="RoadButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/road.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="40,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="structureButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="StructureButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/foundaments.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="75,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="wallButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="WallButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/walls.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="110,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="objectButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="ObjectButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/objects.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="145,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="floorButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="FloorButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/floors.png" ></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="185,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="zoneButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="ZoneButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/Planning.png"></Image>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Grid HorizontalAlignment="Left" Margin="5,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disRoadButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisRoadButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/noroad.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="40,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disStructureButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisStructureButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nofoundaments.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="75,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disWallButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisWallButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nowalls.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="110,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disObjectButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisObjectButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/noobjects.png"></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="145,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="disFloorButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="DisFloorButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/nofloors.png" ></Image>
</Grid>
<Grid HorizontalAlignment="Left" Margin="185,10,0,0" VerticalAlignment="Top" Width="30" Height="30" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" RenderOptions.ClearTypeHint="Enabled">
<Button x:Name="assignJobButton" Width="30" Height="30" Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Click="AssignJobButton_Click"/>
<Image Margin="5,5,5,5" IsHitTestVisible="False" Source="Resources/Icons/RightPanel/Assigment.png"></Image>
</Grid>
</Grid>
</Grid>
</Border>
<Border x:Name="contentBorder" Grid.Row="1" Background="#99000000" Visibility="Hidden">
<ContentControl x:Name="buildMenuContent"/>
</Border>
</Grid>
<Path Height="10" Margin="0,50,220,0" VerticalAlignment="Top" Fill="#99000000" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False" HorizontalAlignment="Right" Width="10" Visibility="{Binding ElementName=buildGrid, Path=Visibility}" RenderOptions.EdgeMode="Aliased">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry PresentationOptions:Freeze="True" Figures="M 10,0 5,0 Q 0,0 0,5 L 0,10 L 0,0 L 10,0" />
</Path.Data>
</Path>
</Grid>
<Grid Panel.ZIndex="2" Background="{Binding Path=DayNightBrush, ElementName=mainWindow}" Opacity="{Binding Path=DayNightOpacity, ElementName=mainWindow}" IsHitTestVisible="False"/>
</Grid>
</materialDesign:DialogHost>
</Grid>
</Window>
And background code https://pastebin.com/gbBqLeWH

You must have set these two properties to your Window:
window.AllowsTransparency = true;
window.WindowStyle = WindowStyle.None;
This two properties will change your window into a layered window and will take much more memory than a normal one.
If you have done so, remove it. If you want a custom title bar, try to use a WindowChrome.
Read more about window style customize using WindowChrome:
WindowChrome Class (System.Windows.Shell) - Microsoft Docs
WPF 使用 WindowChrome，在自定义窗口标题栏的同时最大程度保留原生窗口样式（类似 UWP/Chrome） - walterlv

XAML, Secondary Button isn't showing

so I'm trying to use 2 buttons in the same spot using xaml, one is going to be a play button and the other a pause button, but for some reason, not entirely sure as to why just yet, but only the first button in XAML will show, and if i set this given button to hidden the secondary button never gets rendered.
any ideas?
Here's the code.
<DataGridTemplateColumn Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<DockPanel Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Hidden" Name="PlayButton"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPlayButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_play}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
<Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Visible" Name="PauseButton"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPauseButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_pause}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
</DockPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Use a Grid instead of a DockPanel:
<Grid Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Hidden" Name="PlayButton"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPlayButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_play}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
<Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Visible" Name="PauseButton"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPauseButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_pause}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
</Grid>

Coordinates in WPF Canvas

when defining coordinates for canvas shapes in XAML files, is it possible to do something like this:
<Canvas x:Name="myCanvas"
DockPanel.Dock="Bottom"
VerticalAlignment="Stretch">
<Canvas.Background>
<SolidColorBrush Color="White" Opacity="100" />
</Canvas.Background>
<Ellipse x:Name="ell1"
Width="30"
Height="30"
Stroke="Black"
StrokeThickness="1"
Fill="Red"
Canvas.Left="100"
Canvas.Top="50" />
<Ellipse x:Name="ell2"
Width="30"
Height="30"
Stroke="Black"
StrokeThickness="1"
Fill="Red"
Canvas.Right="100"
Canvas.Top="50" />
<Line Stroke="Black"
StrokeThickness="1"
X1="ell1.Canvas.Right" *** look here ***
Y1="ell1.Canvas.Top + ell1.Height/2" *** look here ***
X2="ell2.Canvas.Left" *** look here ***
Y2="ell2.Canvas.Top + ell2.Height/2" /> *** look here ***
</Canvas>
Or the only way of doing it is through C#?
Thanks,
Massimo

You can indeed bind to an attached property like this:
<Line ... X2="{Binding Path=(Canvas.Left), ElementName=ell1}" />
But there is no + or / operators defined in XAML so you will have to write some code to be able to set the Y1 property to 50 + 30 / 2.
After all XAML is a markup language and C# is a programming language.

This should generate the desired result without too much hassle. You may have to adjust the Margin of the Grid.
<Grid DockPanel.Dock="Bottom" Margin="100,50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Ellipse Grid.Column="2" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Rectangle Grid.Column="1" Fill="Black" Height="1"/>
</Grid>
This is even simpler:
<DockPanel DockPanel.Dock="Bottom" Margin="100,50">
<Ellipse DockPanel.Dock="Left" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Ellipse DockPanel.Dock="Right" Grid.Column="2" Width="30" Height="30"
Stroke="Black" StrokeThickness="1" Fill="Red"/>
<Rectangle Fill="Black" Height="1"/>
</DockPanel>

Need images with lower resolution "stretched" to screen size

I am making a video game using C# WPF.
What I am trying to implement now, is to add additional resolutions.
My default monitor resolution is 1600x900.
I am using the same size for game's window and grids.
Now, I want to add more resolutions. I already found an easy way to change values in code, the problem is on another topic.
That's how the game looks on 1600x900.
Then, I am trying to set resolution 800x600.
What I want to achieve, is to make images with resolution lower then the one set in Windows, to get "stretched" and still cover the all screen.
That's what I get. The game only takes a part of the screen, and white background on the remaining part.
The stretched window, what I am trying to achieve looks like that. To create this image I stretched the previous image in graphics editor. I want the game do it by itself.
If you look at first and third screens at full size, you'll notice they are different, and that lower image has worse detail.
How can the window or grid has resolution lower that one in Windows, but still cover full screen?
UPDATE: Code for one of game screens - the main menu
<Grid x:Name="areaMenu" Panel.ZIndex="1010" HorizontalAlignment="Left" Height="786" Margin="0,-813,0,0" VerticalAlignment="Top" Width="1366" IsVisibleChanged="areaMenu_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/Menu_main.jpg"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Grid x:Name="areaLoad" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-556,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_Load_Game.jpg" Stretch="Uniform"/>
</Grid.Background>
<Button x:Name="btnLoad1" Panel.ZIndex="100" HorizontalAlignment="Left" Height="98" VerticalAlignment="Top" Width="170" Click="btnLoad1_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="45,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad2" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Click="btnLoad2_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="263,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad3" Panel.ZIndex="100" HorizontalAlignment="Left" Height="103" VerticalAlignment="Top" Width="170" Click="btnLoad3_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="480,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgLoad1" HorizontalAlignment="Left" Height="101" Margin="44,144,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad2" HorizontalAlignment="Left" Height="101" Margin="262,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad3" HorizontalAlignment="Left" Height="101" Margin="477,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad4" HorizontalAlignment="Left" Height="101" Margin="694,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad5" HorizontalAlignment="Left" Height="101" Margin="913,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Button x:Name="btnLoad4" Panel.ZIndex="100" HorizontalAlignment="Left" Height="103" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="695,133,0,0" Click="btnLoad4_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad5" Panel.ZIndex="100" HorizontalAlignment="Left" Height="98" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="914,133,0,0" Click="btnLoad5_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoadCancel" Panel.ZIndex="100" HorizontalAlignment="Left" Height="86" VerticalAlignment="Top" Width="162" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="1131,139,0,0" Click="btnLoadCancel_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid x:Name="areaSave" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-285,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaSave_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_Save_Game.jpg" Stretch="Uniform"/>
</Grid.Background>
<Button x:Name="btnSaveEmpty1" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Click="btnSave1_Click" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="47,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty2" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="159" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="270,137,0,0" Click="btnSave2_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty3" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="480,139,0,0" Click="btnSave3_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty4" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="164" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="700,133,0,0" Click="btnSave4_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty5" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="164" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="917,139,0,0" Click="btnSaveEmpty5_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgSave1" HorizontalAlignment="Left" Height="101" Margin="43,143,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave2" HorizontalAlignment="Left" Height="101" Margin="263,131,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave3" HorizontalAlignment="Left" Height="101" Margin="478,131,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave4" HorizontalAlignment="Left" Height="101" Margin="693,131,0,0" VerticalAlignment="Top" Width="173" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave5" HorizontalAlignment="Left" Height="101" Margin="913,131,0,0" VerticalAlignment="Top" Width="173" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Button x:Name="btnSaveCancel" Panel.ZIndex="100" HorizontalAlignment="Left" Height="86" VerticalAlignment="Top" Width="162" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="1131,139,0,0" Click="btnSaveCancel_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Image x:Name="imgResume" HorizontalAlignment="Left" Height="215" Margin="469,105,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_resume_g.png"/>
<Image x:Name="imgSave" HorizontalAlignment="Left" Height="215" Margin="469,205,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_save_g.png"/>
<Image x:Name="imgLoad" HorizontalAlignment="Left" Height="215" Margin="469,306,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_load_g.png"/>
<Image x:Name="imgOptions" HorizontalAlignment="Left" Height="215" Margin="469,406,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_options.png"/>
<Image x:Name="imgCredits" HorizontalAlignment="Left" Height="215" Margin="469,506,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_credits.png"/>
<Image x:Name="imgQuit" HorizontalAlignment="Left" Height="215" Margin="469,587,0,-11" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_quit.png" Grid.RowSpan="2"/>
<Button x:Name="btnResume_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,180,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnResume_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSave_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,280,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnSave_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,379,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnLoad_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnOptions" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,479,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnOptions_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnCredits" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,581,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnCredits_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnQuit" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,679,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnQuit_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<MediaElement x:Name="musTheme3" Panel.ZIndex="1001" HorizontalAlignment="Left" Height="47" Margin="1290,21,0,0" VerticalAlignment="Top" Width="50" Source="Resources/Music/theme_3.wav" LoadedBehavior="Manual" RenderTransformOrigin="3.464,0.571" MediaOpened="AnySoundStart" MediaEnded="musTheme3_MediaEnded"/>
<Image x:Name="imgNew" HorizontalAlignment="Left" Height="215" Margin="469,105,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_new_g.png" d:IsHidden="True"/>
<Button x:Name="btnNew_Game" Panel.ZIndex="200" HorizontalAlignment="Left" Height="72" Margin="534,180,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnNew_Game_Click_1">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgNew_Pressed" HorizontalAlignment="Left" Height="215" Margin="469,107,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_new_g.png" d:IsHidden="True" Visibility="Hidden"/>
<Grid x:Name="areaGameSaved" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-839,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_GAME_SAVED.jpg" Stretch="Uniform"/>
</Grid.Background>
<Image x:Name="imgBackSaved" HorizontalAlignment="Left" Height="215" Margin="478,76,0,-53" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/img_back.png"/>
<Button x:Name="btnBackSaved" Panel.ZIndex="100" HorizontalAlignment="Left" Height="58" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="547,149,0,0" Click="btnBackSaved_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid x:Name="areaNotAvailable" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-1114,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_NOT_AVAILABLE_YET.jpg" Stretch="Uniform"/>
</Grid.Background>
<Image x:Name="imgBackNotAvailable" HorizontalAlignment="Left" Height="215" Margin="478,76,0,-53" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/img_back.png"/>
<Button x:Name="btnBackNotAvailable" Panel.ZIndex="100" HorizontalAlignment="Left" Height="58" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="547,149,0,0" Click="btnBackNotAvailable_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Label Content="0.7.1" HorizontalAlignment="Left" Height="46" Margin="1258,724,0,0" VerticalAlignment="Top" Width="53" FontSize="24" Foreground="#FFFBEEEE"/>
<Button x:Name="btnResolution" Content="Button" HorizontalAlignment="Left" Height="104" Margin="1040,644,0,0" VerticalAlignment="Top" Width="181" Click="btnResolution_Click"/>
</Grid>
Xaml at the start:
<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:Name="wdwMain" x:Class="RealityIncognita.MainWindow"
Height="900" Width="1600" ResizeMode="NoResize" WindowState="Maximized" Cursor="Cross" WindowStyle="None" Loaded="wdwMain_Loaded">
<Grid x:Name="areaContainer" HorizontalAlignment="Left" Height="900" VerticalAlignment="Top" Width="1600">
How it looks now:
How it should look:
Thank you,
Evgenie

Just remove the HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="800" from your grid so that grid can stretch to the whole window,
if you need these values use it on the window itself
Edit:
Okay, I see that you're setting the height and width for each element(like the buttons) inside the grid , and you're setting the margin to move them to the correct place,
This will not work with different resolutions. lets say you set the window width to 800 and your button is set to be 200. if you change the window width to 1024, this change will not be reflected automatically to the buttons, it will always be 200 (and same goes for the margin)
The correct solution is to rewrite the xaml code in the correct way, (you will use Grids with Grid.ColumnsDefinition/RowDefinition, Stackpanels ..etc) without setting the values in pixels.
But if you're in hurry you can put all elements in a Viewbox:
<Window ....
<Viewbox Stretch="Fill">
<Grid x:Name="areaContainer" ....
</Grid>
</Viewbox>
</Window>
Now note that using viewbox will stretch your content based on the Viewbox's width and height (so its like what you did in the graphics editor).
Also note that Viewbox should be avoided as it's very expensive in terms of resources

Categories

Resources