WPF自适应窗体实现小结

WPF自适窗体实现

这几天,因工作需要,要对一个小软件进行UI调整。主要内容就是让其能够实现自适应窗体(包括文字和图标),做成像WIN7下的Media Center一样的UI。自适应窗体,顾名思义,就是窗口内容的显示大小能够随着窗口的大小变化而变化。今天我来说说如何用WPF来实现自适应窗体。

首先WPF是微软推出的新一代视窗系统,用来代替MFC。用MFC来实现自适应窗体,需要捕获Resizing事件,然后对窗口内容大小进行逐一调整,还是比较麻烦的。但是WPF不同,因为WPF自带的Layout(WPF布局系统)就支持自适应窗体。

WPF要实现自适应窗体主要靠Grid和DockPanel这2个控件。这2个控件简单来说就是容器,用来承载其它控件。不同的是Grid是定义由行和列组成的灵活网格区域,而DockPanel是定义可水平或垂直排列子元素的区域。

下面我来举个例子说明如何用Grid或DockPanel来实现自适应窗体。

让我们新建一个WPF工程,完成后我们打开对应的XAML文件,可以看到VS已经自动添加了<Grid></Grid>这一对标签,下面我就以Grid为例展示如何实现窗体自适应(如果需要使用DockPanel只需把<Grid></Grid>换成<DockPanel></DockPanel>即可)。

<Window x:Class="Auto_Match_Window.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">

<Grid>

</Grid>

</Window>

下面往Grid里面添加2个控件TextBlock和Button,如下:

<Window x:Class="Auto_Match_Window.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">

<Grid>

<TextBlock Text="Hello World!" Margin="100,100,100,100"/>

<Button Content="Button" Margin="100,120,100,100"/>

</Grid>

</Window>

注意:这里不能给TextBlock和Button定义高度和宽度,因为这样会把控件的高度和宽度定死,结果就是不能随着窗口大小的变化而变化。那要怎么调整控件的初始大小呢?用Margain!!Margain不是只能调整位置,它也可以调整控件大小哦。

让我们来看看效果怎样:

通过上面2张图,我们可以看到控件确实随着窗口大小的变化而变化,但是我们又发现无论是TextBlock还是Button的文字并没有随着窗口变化,这是为什么呢?那是因为Grid和DockPanel不支持文本的自动变化。

那文本是不是就没办法自动变化了呢?放心WPF提供另外一个控件Viewbox,用于支持文本变化。让我们修改一下刚才的代码,如下:

<Window x:Class="Auto_Match_Window.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">

<Grid>

<Viewbox VerticalAlignment="Top">

<TextBlock Text="Hello World!" VerticalAlignment="Top"/>

</Viewbox>

<Viewbox VerticalAlignment="Bottom">

<Button Content="Button"/>

</Viewbox>

</Grid>

</Window>

效果如下:

如果加了Viewbox,画面的布局可能比较难以调整,这个时候就需要用到Width和Height这2个属性了。读者可能有疑问了,为什么不加Viewbox只用Grid或DockPanel不能指定Width和Height,而Viewbox就可以。那是因为Viewbox其实是靠stretch这个属性实现文本的自动变化,这也意味着Viewbox是通过拉伸或平铺来达到缩放文本的效果,就好比位图。而Grid和DockPanel就好比矢量图。

代码如下:

<Window x:Class="Auto_Match_Window.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">

<Grid>

<Viewbox>

<TextBlock Text="Hello World!" Margin="100,100,100,100"/>

</Viewbox>

<Viewbox>

<Button Content="Button" Margin="100,120,100,100" Height="92" Width="118"/>

</Viewbox>

</Grid>

</Window>

效果:

好了,让我们来总结一下:

1、  WPF采用Grid和DockPanel来实现窗体自适应,通过控件的Margain属性来调整控件的起始位置和大小,不能使用Height和Width属性;

2、  如果要实现文本自动变化,采用Viewbox控件,可以使用Height和Width来调整控件大小;

3、  想偷懒的话,可以把MainWindow的最外面一层Grid放入Viewbox中,这样只需稍微调整一下某些控件的布局即可达到整个窗体的自适应效果。

时间: 2024-09-29 15:42:26

WPF自适应窗体实现小结的相关文章

[小结][N种方法]实现WPF不规则窗体

原文:[小结][N种方法]实现WPF不规则窗体 WPF实现不规则窗体,方法很多很多多.... 本文总结DebugLZQ认为简洁高效的几种方法 实现WPF不规则窗体的几种常用的方法如下: 1.使用Blend等工具绘制一想要的窗体.这个可以参考xiaowei0705的这篇博文:WPF制作不规则的窗体 . 2.给window的Clip属性赋Path值.这个可以参考DebugLZQ前面的博文:WPF Effect Clip以及Transform . 3.使用透明背景的PNG图像. 4.为Window主容

WPF随笔之 控件根据设定的显示行数列数填充控件并自适应窗体大小(多绑定MVVM方式实现)

(效果图,如见最下面) 需求:根据设置的行数列数,控制展示控件个数,并且填充的控件们大小刚刚好自适应填充满固定的区域,并且调整窗体大小的时候控件动态自适应窗体大小,即自适应大小并不显示滚动条(比如,设置了1行1列,则第一页显示一个控件,如设置了2行2列,则第一页显示第一行2个控件,第二行2个控件). 解决方案,我总结有3 1.在cs代码里面动态生成Grid控件,根据设定的行列动态生成行列,将控件自适应宽高填充进去 2.固定Grid.使用WrapPanel排序,当Grid实际宽高发生改变时,动态计

WPF中窗体最大化问题处理

遇到的问题信息 问题:当WindowStyle=None时,窗口最大化,不显示任务栏 -- 即窗体是全屏效果. 解决中遇到的问题列表[主要涉及到任务栏发生改变后的一些问题处理]: 最大化时,任务栏被遮盖: 最大化后,拖动任务栏,无法自适应窗体: 最大化后,拖动任务栏,窗体还原,还原数据丢失,始终显示最大: 最大化后,拖动任务栏,窗体还原,设置之前保存的窗体位置数据,再次设置,由于和之前一样,窗体位置信息不生效: 解决方案 思路:窗体最大化时,将窗体透明化,设置内部元素Grid的Margin属性,

WPF 子窗体关闭,刷新父窗体

父窗体代码 private void DGUserEdit() { if(DGUser.SelectedItem!=null) { DataRow dr = (DGUser.SelectedItem as DataRowView).Row; Page.UserEdit UE = new UserEdit(UserGrade, dr["UserName"].ToString());//声明子窗体 UE.Closed += new EventHandler(UE_Closed);//注册关

.NET CORE(C#) WPF亚克力窗体

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF亚克力窗体 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 本文介绍使用FluentWPF控件库实现亚克力效果的窗体. 2. 代码实现 使用 .Net Core 3.1 创建名为 "AcrylicWindow" 的WPF模板项目,添加三个Nuget库:MaterialDesignThemes.MaterialDesignColors和

WPF自适应可关闭的TabControl 类似浏览器的标签页

效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时候在TabControl中移除自身.在添加,移除TabItem和TabControl尺寸变化时,通过Items的个数计算合适的Width. 新建用户控件 新建用户控件,并继承自TabItem,这样它就拥有TabItem所有的属性和事件.而这个功能不需要自定义依赖属性和事件.它的用法就和TabItem

WPF自适应可关闭的TabControl 类似浏览器的标签页(转)

效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大体思路:建一个用户控件,继承自TabItem,里面放个按钮,点击的时候在TabControl中移除自身.在添加,移除TabItem和TabControl尺寸变化时,通过Items的个数计算合适的Width. 新建用户控件 新建用户控件,并继承自TabItem,这样它就拥有TabItem所有的属性和事件.而这个功能不需要自定义依赖属性和事件.它的用法就和TabItem

C# Winform WPF DeskBand 窗体嵌入任务栏,在任务栏显示文字

最近写了个小程序,用于将固态硬盘的写入量等信息显示在任务栏,最开始使用Windows API也可以实现,但是当任务栏托盘增加的时候,会被遮盖,最终采用了DeskBand来实现,填了很多坑. 参考的GitHub地址:https://github.com/dsafa/CSDeskBand DeskBand相关代码如下: COLORREF: // This code snippet was used by SharpShell. // using System.Drawing; using Syste

WPF 自适应布局控件

public class KDLayoutGroup : Grid { public double LabelWidth { get; set; } public double GetLabelWidth() { return LabelWidth; } public void SetLabelWidth(double value) { if (this.Parent is KDLayoutControl) { double w = (this.Parent as KDLayoutControl