WPF布局之让你的控件随着窗口等比放大缩小,适应多分辨率满屏填充应用

  一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个屏幕,由于存在多种不同的分辨率,所以会出现布局混乱的情况。今天我们来看看WPF中如何让我们的控件也随着分辨率放大缩小。下面来写一个例子看看效果吧~

 

 一、普通布局中的问题

   这里我们写一个简单的页面,新建WPF项目,在MainWindow里面添加按钮,如下图:

这个页面很简单,只有三个按钮,我们想的是左上角和右下角有两个按钮,中间有一个大的按钮,现在显示是没有问题的,那么我们通过改变按钮大小来模拟分辨率变化,来看看会变成什么样子,如图:

按钮的位置都变了,当然这里你会说,我们可以通过修改布局来让按钮仍然显示在指定的位置,但是当用户屏幕分辨率过小时呢?会导致某些控件显示不出来。如下图:

 

 二、问题的解决办法

   针对上面的问题,我们来看看如何布局,来解决上面的问题,下面我们修改布局代码如下,使用canvas布局:

<Window x:Class="布局篇.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Viewbox Stretch="Fill">
        <Canvas Width="520" Height="320">
            <Button Content="Button" Canvas.Left="10" Canvas.Top="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
            <Button Content="Button" Canvas.Left="435" Canvas.Top="288" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
            <Button Content="Button" Canvas.Left="164" Canvas.Top="96" HorizontalAlignment="Left" VerticalAlignment="Top" Width="182" Height="119"/>

        </Canvas>
    </Viewbox>
</Window>

主要部分是我们在Canvas最外层添加了ViewBox,由于ViewBox的stretch属性默认是Uniform,所以我们要设置为Fill,这样能保正是填充满窗体,canvas的宽度和高度必须设定,否则显示不出来。显示效果如下:

缩小时的显示效果

放大时的显示效果,虽然空间有些变形,但是布局没有乱。一般情况下显示器的比例都是有标准的,变形不会这么严重的。

 

 好了,这篇博文内容很少很简单,但相信对于一些朋友是有帮助的!

 

 作者:雲霏霏

QQ交流群:243633526

 博客地址:http://www.cnblogs.com/yunfeifei/

 声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

如果大家感觉我的博文对大家有帮助,请推荐支持一把,给我写作的动力。

 

时间: 2024-08-02 22:43:25

WPF布局之让你的控件随着窗口等比放大缩小,适应多分辨率满屏填充应用的相关文章

Android自动禁用布局里的所有子控件

 使用场景:禁用布局里所有的子控件,让界面只能看,但不能编辑,如果一个一个控件去设置肯定是很麻烦的,于是想了个好方法.可根据需要扩展更多控件,只要注意控件是ViewGroup类型还是View类型就行了. 代码如下: /** * 遍历布局,并禁用所有子控件 * * @param viewGroup * 布局对象 */ public static void disableSubControls(ViewGroup viewGroup) { for (int i = 0; i < viewGroup.

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

原文:WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二.DataGrid自定义样式 DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大): DataGrid控件样式结构包括以下几个部分

从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转

由于上周主要做了项目组产品架构.给公司新员工培训以及其他会议等事情,在OpenExpressApp对建模支持的初步计划中我列了一些建模任务还没有开展,其中参考部分在以前的blog中都已经介绍了(MetaModelEngine:元模型引擎开发思路.DSM:使用MetaEdit+编写Family Tree Modeling Language.读书笔记:Visual Studio DSL工具特定领域开发指南).今天手头上没有其他重要事情了,可以开始进行学习WPF的图形设计器了,这也就是我在WPF -

WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

原文:WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式: 树控件TreeView的自定义样式,及右键菜单实现. 二.菜单Menu的自定义样式 自定义菜单样式的效果图: Menu和Context

wpf 设计时 c#-WPF设计时无法找到用户控件类型的问题

问题描述 WPF设计时无法找到用户控件类型的问题 最近用WPF做个东西.写了一个用户控件.在这个用户控件自己的设计时它是正常的.可以显示.但是把它加到窗体里的时候报告说找不到指定类型.命名空间正常引入.还有就是在运行时它也是正常的.为什么设计时会找不到类型呢?

extjs2.02 table布局下无法动态添加控件

问题描述 extjs2.02 table布局下无法动态添加控件 Ext.onReady(function() { var form = new Ext.form.FormPanel({ id: "testForm", renderTo: "windowDiv", width: "700", autoHeight: true, layout: "table", layoutConfig: { columns: 2 }, bord

怎么样让wpf中前台已存在的控件的属性可以在后台代码中设置

问题描述 怎么样让wpf中前台已存在的控件的属性可以在后台代码中设置 怎么样让wpf中前台已存在的控件的属性可以在后台代码中设置,比如说xaml中已经存在一个border,我想要在后台代码中初始化他的旋转角度 解决方案 这些属性是可以在后台代码中设置的,直接在后台.cs文件里写就是了 解决方案二: 好像不能把,比如说 在后台代码怎么修改Angle属性呢 解决方案三: http://www.cnblogs.com/slowhand/archive/2013/05/13/3076259.html 亲

WPF自定义控件与样式(10)-进度控件ProcessBar自定义样

原文:WPF自定义控件与样式(10)-进度控件ProcessBar自定义样 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ProcessBar自定义标准样式: ProcessBar自定义环形进度样式: 二.ProcessBar标准样式 效果图:   ProcessBar的样式非常简单:   <!--ProgressBar Style--> <

android:在Activity如何写一种方法,当调用时可以永久的向原来的布局中增添或修改控件?

问题描述 android:在Activity如何写一种方法,当调用时可以永久的向原来的布局中增添或修改控件? 如题,在Activity如何写一种方法,当调用时可以永久的向原来的布局中增添或修改控件? 解决方案 不明白干嘛,添加控件,无非就是先创建或渲染出一个view,然后通过addview加入到指定的容器中 解决方案二: 可控的话 先写在xml中设visible为gone. 需要的时候设置为visible 解决方案三: 不太清楚你的意思.如果就是添加界面的话,可以用两种方法,一种是楼上说的,可以