概述

做客户端有时为了让界面适用各种不同的系统分辨率,让界面内控件布局大小始终保存比例是一种方法。一般可以使用配置文件做不同分辨率的适配实现,或者通过代码根据不同的分辨率重新计算控件大小及位置实现。在wpf有一种更简单的方法,使用viewbox

方法

ViewBox可以自动缩放其内部的元素,无论是控件、容器、文本都可以按比例自动缩放。想要实现整个窗口按比例缩放需要如下步骤:

  1. ViewBox作为一级容器
    一级容器即<Window>标签下第一个元素
  2. 设置二级容器大小
    将窗口本身需要的容器设在ViewBox标签下,即成为二级容器,设置其大小。这个大小通常是设计图上的窗口大小。需要注意的是,二级容器大小必须大于等于适配的所有分辨率,比如适配的最大分辨率是1080p,则二级容器大小至少设为1080p。
  3. 二级容器大小为基准布局
    其他控件大小都将相对于二级容器来布局。

代码如下:
下面代码中,窗口是按照1920x1080设计的,但实际的窗口只有640x360,但其显示的效果控件比例始终是一样的。

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="360" Width="640">
    <Viewbox>
        <Grid Width="1920" Height="1080">
            <Border CornerRadius="20" Width="1280" Height="720"   Background="#666666"></Border>
    </Grid>
    </Viewbox>
</Window>

效果

上述代码的显示效果如下

  1. 窗口大小640x360
    在这里插入图片描述
  2. 窗口大小1280x720

在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐