Need images with lower resolution “stretched” to s

Question

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

Answer 1

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