需要将分辨率较低的图像“拉伸”到屏幕尺寸答案

【问题标题】：Need images with lower resolution "stretched" to screen size需要将分辨率较低的图像“拉伸”到屏幕尺寸
【发布时间】：2016-08-31 05:08:48
【问题描述】：

我正在使用 C# WPF 制作视频游戏。我现在想要实现的是添加额外的解决方案。

我的默认显示器分辨率是 1600x900。我使用相同大小的游戏窗口和网格。

现在，我想添加更多分辨率。我已经找到了一种在代码中更改值的简单方法，问题出在另一个话题上。

这就是游戏在 1600x900 上的外观。

然后，我尝试将分辨率设置为 800x600。

我想要实现的是使分辨率低于 Windows 中设置的图像，以“拉伸”并仍然覆盖整个屏幕。

这就是我得到的。游戏只占用屏幕的一部分，其余部分为白色背景。

拉伸的窗口，我想要达到的效果是这样的。为了创建这个图像，我在图形编辑器中拉伸了前一个图像。我希望游戏自己做。

如果您以全尺寸查看第一个和第三个屏幕，您会发现它们是不同的，并且较低的图像具有更差的细节。

窗口或网格的分辨率如何低于 Windows 中的分辨率，但仍覆盖全屏？

更新：游戏屏幕之一的代码 - 主菜单

        <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 开头：

<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">

现在的样子：

它应该是什么样子：

谢谢你，叶甫盖尼

【问题讨论】：

标签： c# wpf xaml graphics resolution

【解决方案1】：

只需从网格中删除 HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="800" 以便网格可以拉伸到整个窗口，

如果您需要这些值，请在窗口本身上使用它

编辑： 好的，我看到您正在为 grid 中的每个元素（如按钮）设置高度和宽度，并且您正在设置边距以将它们移动到正确的位置，这不适用于不同的分辨率。假设您将窗口宽度设置为 800，而您的按钮设置为 200。如果您将窗口宽度更改为 1024，则此更改不会自动反映到按钮上，它将始终为 200（边距也是如此)

正确的解决方案是以正确的方式重写 xaml 代码（您将使用带有 Grid.ColumnsDefinition/RowDefinition、Stackpanels 等的网格）而不以像素为单位设置值。

但如果你赶时间，你可以将所有元素放在一个 Viewbox 中：

<Window ....
    <Viewbox Stretch="Fill">
           <Grid x:Name="areaContainer" ....
           </Grid>
    </Viewbox>
</Window>

现在请注意，使用 viewbox 将根据 Viewbox 的宽度和高度来拉伸您的内容（所以它就像您在图形编辑器中所做的那样）。另请注意，应避免使用 Viewbox，因为它在资源方面非常昂贵

【讨论】：

您好，抱歉，还有一些问题。提供的解决方案适用于整个网格，我的意思是好像网格只有一个图像。但是每个网格上都有更多更小的图像和按钮，我需要给它们设置什么属性，这样它们就不会移动了？
完整的xml？它大约有 2500 行，这里放不下。我可以通过其他方式上传吗？
现在我只为一个网格上传 xaml - 主菜单。
如果性能变差，我会开始寻找替代品。现在 ViewBox 工作正常。再次感谢！