XAML, Secondary Button isn't showing - c#

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>

Related

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

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

Storyboard inside Grid which is part of a Listbox Itemtemplate not animating

I've got an storyboard which lies inside a grids resources. The grid is inside a Listbox, and I can find the storyboard and call the storyboard.Begin(), However nothing happens when I do this, even though it is supposed to. Here is what I've got so far:
<ListBox x:Name="Defense_Units_LB" Margin="168,92,471,83" ItemsSource="{Binding DefendersUnits}">
<ListBox.ItemTemplate>
<DataTemplate x:Name="Def_Datatemplate">
<Grid x:Name="Grid_animation" Background="Green">
<Grid.Resources>
<Storyboard x:Key="test_stb">
<ColorAnimation Storyboard.TargetName="Grid_animation" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Duration="0:0:1" To="Red"/>
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Height="50" Width="50" Stretch="Uniform">
<Units:UnitSelector DataContext="{Binding}"/>
</Viewbox>
<Rectangle Fill="#FFF7C85F" HorizontalAlignment="Left" Height="16" Margin="1,32,0,0" Stroke="#FF000000" StrokeLineJoin="Round" VerticalAlignment="Top" Width="33" Grid.Column="1"/>
<TextBlock x:Name="Amount" HorizontalAlignment="Left" Height="16" TextWrapping="Wrap" Text="{Binding Amount}" VerticalAlignment="Top" Width="33" FontFamily="Andalus" FontSize="21.333" Foreground="#FF004F24" TextAlignment="Center" Margin="1,32,0,0" Grid.Column="1"/>
<Rectangle x:Name="rectangle1" Grid.Column="1" Margin="53,0,0,0" StrokeLineJoin="Round">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="Units_Killed" HorizontalAlignment="Right" Height="19" TextWrapping="Wrap" Text="{Binding Lost}" VerticalAlignment="Top" Width="33" FontFamily="Andalus" FontSize="14.667" Foreground="#FF900000" Margin="51,16,0,0" Grid.Column="1" Opacity="0"/>
<Rectangle x:Name="rectangle" Grid.Column="1" Fill="#FF900000" HorizontalAlignment="Left" Height="3" Margin="53,24,0,0" StrokeLineJoin="Round" VerticalAlignment="Top" Width="14" Opacity="0"/>
<!--<Path Data="M54.5312,22.8125 L65.157,22.8125" Fill="#FFF7C85F" HorizontalAlignment="Left" Height="3" Margin="53.954,24.562,0,0" Stretch="Fill" Stroke="#FFA70000" StrokeThickness="2" StrokeLineJoin="Round" UseLayoutRounding="False" VerticalAlignment="Top" Width="8.126" StrokeEndLineCap="Triangle" StrokeStartLineCap="Triangle" Grid.Column="1"/>-->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I find the storyboard from the code behind by doing:
private void Fight_Button_Click(object sender, RoutedEventArgs e)
{
Damage_FadeIn.Begin();
ListBoxItem LBI = Defense_Units_LB.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem;
Grid Gr = FindDescendant<Grid>(LBI);
System.Windows.Media.Animation.Storyboard stb = Gr.Resources["test_stb"] as System.Windows.Media.Animation.Storyboard;
//System.Windows.Media.Animation.Storyboard stb = Gr.Resources["storyboard_UKF"] as System.Windows.Media.Animation.Storyboard;
//System.Windows.Media.Animation.Storyboard stb1 = Gr.Resources["storyboard_DFU"] as System.Windows.Media.Animation.Storyboard;
string name = Gr.Name;
stb.Begin();
// stb1.Begin();
}
Anyone knows why nothing happen when the storyboard.begin() function is called?

XAML design: drawing a line from button to button

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>

Why the Visual brush that is based on the Grid shows horizontal and vertical grid lines

If you test the code below and any bright image you will see 4 columns and 4 rows painted over the used image. I need this configuration to use for some kind of effect.
Basically I made it and it works but these grid lines I would like to remove and do not know how. Is it maybe related to the implementation of the Grid control itself ?
Grid's property ShowGridlines is false.
There is a possibility to use the Canvas instead of the grid and do the placement manually but I would like to stay with the Grid and use the Canvas as the last solution.
<Image Source="/Image1.tif" Visibility="Visible" >
<Image.OpacityMask>
<VisualBrush x:Name="DissolveInBrush" TileMode="None" >
<VisualBrush.Visual>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="0" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="1" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="2" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="3" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
<Rectangle Grid.Column="4" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Image.OpacityMask>
</Image>

You may set the RenderOptions.EdgeMode property to Aliased on the Grid to avoid this effect:
<VisualBrush x:Name="DissolveInBrush" TileMode="None" >
<VisualBrush.Visual>
<Grid RenderOptions.EdgeMode="Aliased">
...
</Grid>
</VisualBrush.Visual>
</VisualBrush>

Categories

Resources