制作选项以选择正确的分辨率

Question

我正在制作视频游戏，但屏幕分辨率有问题。 早些时候，几个月前，我问了非常相似的问题。

Need images with lower resolution "stretched" to screen size

当时，我（使用 ViewBox）得到的答案似乎很完美，但现在我遇到了问题。

我希望我的游戏中的每一个图像和控件都有一些适合分辨率的不同可能变化。 例如，如果用户将分辨率设置为 800x600，则所有图像和按钮都会缩小到正确的大小。但我确实希望我的游戏只能是全屏的，而不是窗口的。

因此，如果分辨率低于最终用户显示器的分辨率，则所有图像都必须被拉伸并且看起来“模糊”。如果更高，它的一部分必须在屏幕之外。

目前，我的代码只是将分辨率设置为最终用户监视器，无论它是什么。这绝对不是我想要的。

我得到了什么：

我需要的一个非常粗略的例子：

我现在将 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">

<Viewbox x:Name="viewMain" Stretch="Fill">
    <Grid x:Name="areaContainer" HorizontalAlignment="Left" Height="900" VerticalAlignment="Top" Width="1600">

      <Grid x:Name="areaMain">
            <Grid.Background>
                <ImageBrush ImageSource="Resources/Images/Interface/main_interface.jpg"/>
            </Grid.Background>
            <Label x:Name="lblTextOutput" Content="Label" HorizontalAlignment="Center" Height="52" Margin="55,726,31,0" VerticalAlignment="Top" Width="1514" FontFamily="Arial" FontSize="22" FontWeight="Bold" HorizontalContentAlignment="Center"/>
            <Button x:Name="btnExit" HorizontalAlignment="Left" Height="106" Margin="1464,771,0,0" VerticalAlignment="Top" Width="126" Click="btnExit_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
                <Button.Template>
                    <ControlTemplate>
                        <Image Source="/Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
                    </ControlTemplate>
               </Button.Template>
            </Button>

            <Grid x:Name="areaShowers" HorizontalAlignment="Left" Height="700" Margin="1653,790,-1561,-590" VerticalAlignment="Top" Width="1508"  IsVisibleChanged="areaShowers_IsVisibleChanged">
                <Grid.Background>
                    <ImageBrush ImageSource="Resources/Images/Rooms/Showers/shower_room.jpg" />
                </Grid.Background>


                <Button x:Name="objShowersSoap" HorizontalAlignment="Left" Height="29" Margin="613,423,0,0" VerticalAlignment="Top" Width="17" MouseLeave="MouseLeaveAnyObject" RenderTransformOrigin="11.706,1.897" Click="objShowersSoap_Click" MouseEnter="objShowersSoap_MouseEnter">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="Resources/Images/Rooms/Showers/soap.png" Stretch="Fill" Margin="0,0,0,0"/>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Image x:Name="imgShowersOpenMachine" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Source="Resources/Images/Rooms/Showers/drying_machine_open.png" RenderTransformOrigin="0.808,0.471" Stretch="Fill"/>
                </Button>                   
            </Grid>

            <Grid x:Name="areaLockerRoom" Height="700" VerticalAlignment="Top" Width="1508" IsVisibleChanged="areaLockerRoom_IsVisibleChanged" Margin="1653,17,-1561,0" MouseDown="areaLockerRoom_MouseDown" MouseEnter="areaLockerRoom_MouseEnter" MouseMove="areaLockerRoom_MouseMove">
                <Grid.Background>
                    <ImageBrush ImageSource="Resources/Images/Rooms/LockerRoom/locker_room_ready.png"/>
                </Grid.Background>

                <Button x:Name="objLockerRoomCrowbar" Content="" HorizontalAlignment="Left" Height="243" Margin="604,328,0,0" VerticalAlignment="Top" Width="51" MouseEnter="objCrowbar_MouseEnter" Panel.ZIndex="1" Click="objCrowbar_Click" MouseLeave="MouseLeaveAnyObject">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="Resources/Images/Rooms/LockerRoom/crowbar_only.png" Stretch="Fill" Margin="0,0,0,0"/>
                        </ControlTemplate>
                    </Button.Template>
                </Button>

                <Button x:Name="objLockerRoomOdyssey" HorizontalAlignment="Left" Height="53" Margin="797,638,0,0" VerticalAlignment="Top" Width="61" Click="objBookOdyssey_Click" MouseLeave="MouseLeaveAnyObject" MouseEnter="objBookOdyssey_MouseEnter">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="Resources/Images/Rooms/LockerRoom/img_book_odyssey.png" Stretch="Fill" Margin="0,0,0,0"/>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Button x:Name="objLockerRoomEdda" HorizontalAlignment="Left" Height="53" Margin="1335,549,0,0" VerticalAlignment="Top" Width="61" MouseLeave="MouseLeaveAnyObject" Click="objBookEdda_Click" MouseEnter="objBookEdda_MouseEnter">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="Resources/Images/Rooms/LockerRoom/img_book_edda.png" Stretch="Fill" Margin="0,0,0,0"/>
                        </ControlTemplate>
                    </Button.Template>
                </Button>

总结一下结构是这样的：

主窗口 - Viewbox - areaContainer（主网格） - 游戏区域（网格） - 每个网格的图像和按钮

总结一下： 我得到了什么：游戏屏幕设置为最终用户显示器分辨率。 我需要的是：游戏将所有图像设置为特定的分辨率，如果分辨率低于最终用户的分辨率，则使其“模糊”，如果分辨率较高，则将其“剪切”。

提前谢谢你， 叶甫盖尼

添加： 如果我正确理解它的工作原理 - 包含所有其他项目的容器网格应该调整大小，如果需要，图像应该变小（默认情况下它们是 1600x900）。然后，这个容器网格必须适合用户的屏幕分辨率，保持小图像质量。

为了进一步简化：我可以将大图像缩小，然后直接在 Visual Studio 中将它们再次变大（并降低质量）吗？

Answer 1

实际上，只需调整视图框就可以了。

<Viewbox x:Name="viewMain" VerticalAlignment="Center" HorizontalAlignment="Center">

在代码中，我不得不更改 MaxWidth 和 MaxHeight，而不是常规的。

viewMain.MaxWidth = 1024;
viewMain.MaxHeight = 768;