Need images with lower resolution "stretched" to screen size - c#
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
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>
Remove black screen upon application launch
I have created a C# WPF application. In that i have limited UI components (label, MediaElement, Image sources(4)). I am loading my application with maximized window. When I launch my exe, a Black screen is shown for a second and the actual UI appears. I set one property i.e., AllowsTranparency = True. It solves the above problem but on cost of a new one i.e., If this property is set to true, the Video played in MediaElement lags a lot. So, this solution is ruled out. App.xaml: <Application x:Class="MainWin.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MainWin" Startup="MainWindow.xaml"> </Application> Main Window.xaml: <Window x:Class="MainWin.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MainWin" mc:Ignorable="d" Title="" Width="width" Height="height" Loaded="Window_Load" WindowState="Maximized" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="False" Topmost="True" Opacity="0"> <Grid x:Name="grid" Width="0" Height="0"> <MediaElement x:Name="name" Opacity="0" Visibility="Visible" LoadedBehavior="Play" MediaEnded="Media_Ended" Source="loc" Margin="0,0,0,0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="" Visibility="Hidden" Width="1400" Height="660" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="" Stretch="Fill" Visibility="Hidden" Width="20" Height="12" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="" Stretch="Fill" Visibility="Hidden" InkCanvas.Top="530" InkCanvas.Left="2330" Width="2000" Height="12" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="" Stretch="Fill" Visibility="Hidden" InkCanvas.Top="530" InkCanvas.Left="2330" Width="20" Height="12" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="" Stretch="Fill" Visibility="Hidden" Width="20" Height="12" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="loc" Stretch="Fill" Visibility="Hidden" Width="0" Height="12" Opacity="0"/> <Image Name="name" RenderOptions.BitmapScalingMode="HighQuality" Source="loc" Stretch="Fill" Visibility="Hidden" Width="20" Height="12" Opacity="0"/> <Label x:Name="name" Content="text" Width="712" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Visibility="Hidden" Foreground="White" FontSize="font" FontFamily="font" FontWeight="Regular" Opacity="0"/> <Label x:Name="name" Content="text" Width="1248" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Foreground="White" FontSize="font" Visibility="Hidden" FontFamily="font" FontWeight="Regular" Opacity="0"/> <Label x:Name="name" Content="text" Width="710" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Visibility="Hidden" Foreground="White" FontSize="font" FontFamily="font" FontWeight="Regular" Opacity="0"/> <Label x:Name="name" Content="text" Width="710" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Visibility="Hidden" Foreground="White" FontSize="font" FontFamily="font" FontWeight="Regular" Opacity="0"/> </Grid> </Window> I want to remove the Black screen that comes on launch of the application.
Change the Background="Color you want" or Transparent of Window tag.
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 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>
XAMLparse exceoption error
Please I need assistance... My program which i am using c# and post relational database but i keep getting this error it says the xaml parse exception error was unhandled , please where am i going wrong the code is <Window x:Class="zooSystemWorking.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="442" Width="884" Loaded="Window_Loaded" ResizeMode="NoResize"> <Grid Background="#F2C1D42D" Height="405"> <Image Height="139" HorizontalAlignment="Left" Margin="1,1,0,0" Source="/zooSystemWorking;component/Images/ZooLogo.jpg" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="104" /> <Border BorderBrush="#FF0A0A09" BorderThickness="1" Height="25" HorizontalAlignment="Left" Margin="6,145,0,0" Name="border1" VerticalAlignment="Top" Width="93" CornerRadius="10" Background="#95005202"> <Button Content="Add Animal" Height="23" Name="addAnimal" Click="addAnimal_Click" Width="87" Background="#95005202" Padding="0" BorderBrush="#95005202" Foreground="#F2C1D42D" /> </Border> <Border BorderBrush="#FF101010" BorderThickness="1" Height="25" Name="border2" Width="93" Margin="6,185,764,195" CornerRadius="10" Background="#95005202"> <Button Content="View Animal" Height="23" Name="viewAnimal" Click="viewAnimal_Click" Width="86" Background="#95005202" Foreground="#F2C1D42D" /> </Border> <Border BorderBrush="#FF0A0A09" BorderThickness="1" Height="25" Name="border3" Width="93" Margin="6,227,764,153" CornerRadius="10" Background="#95005202"> <Button Content="Update Animal" Height="23" Name="updateAnimal" Click="updateAnimal_Click" Width="84" Background="#95005202" Foreground="#F2C1D42D" /> </Border> <Border BorderBrush="#FF0D0D0C" BorderThickness="1" Height="25" Name="border4" Width="93" Margin="6,268,764,112" CornerRadius="10" Background="#95005202"> <Button Content="Archive Animal" Height="23" Name="archiveAnimal" Click="archiveAnimal_Click" Width="84" Background="#95005202" BorderBrush="#95005202" Padding="0" Foreground="#F2C1D42D" /> </Border> <ContentControl Height="326" HorizontalAlignment="Left" Margin="105,-1,0,0" Name="contentArea" VerticalAlignment="Top" Width="758" /> <Image Height="72" HorizontalAlignment="Left" Margin="1,333,0,0" Name="image2" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Image Height="72" HorizontalAlignment="Left" Margin="142,333,0,0" Name="image3" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Image Height="72" HorizontalAlignment="Left" Margin="286,333,0,0" Name="image4" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Image Height="72" HorizontalAlignment="Left" Margin="429,333,0,0" Name="image5" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Image Height="72" HorizontalAlignment="Left" Margin="572,333,0,0" Name="image6" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Image Height="72" HorizontalAlignment="Left" Margin="717,333,0,0" Name="image7" Source="/zooSystemWorking;component/Images/grass.png" Stretch="Fill" VerticalAlignment="Top" Width="145" /> <Border Background="#95005202" BorderBrush="#FF0D0D0C" BorderThickness="1" CornerRadius="10" Height="25" Margin="6,305,763,75" Name="border5" Width="93"> <Button Background="#95005202" BorderBrush="#95005202" Click="reportGen_Click" Content="Report" Foreground="#F2C1D42D" Height="23" Name="reportGen" Padding="0" Width="84" /> </Border> </Grid> </Window>