WPF自适应、 简单适应性布局

2023-11-20 20:40

本文主要是介绍WPF自适应、 简单适应性布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

了解bootstrap的人知道,它的栅格系统或者说网格系统。将屏幕宽度均为12部分。

模拟这种网格,可以快速实现WPF的布局自适应。

定义全局Grid。在按自己的排版布置,设置行,设置列。分别设置各自的比例。比如:我设置行1:2:3:4。设置列1:2:2:3:1。

然后布局中的每个控件设置对应的Grid行,Grid列,以及占的行数或者列数。

代码如下:

    <Grid><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="3*"></RowDefinition><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="3*"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="按钮1"></Button><Button Grid.Row="0" Grid.Column="3"  Content="按钮2"></Button><Button Grid.Row="1" Grid.Column="0" Content="按钮3"></Button><Button Grid.Row="2" Grid.Column="2" Content="按钮4"></Button><Button Grid.Row="2" Grid.Column="1" Content="按钮5"></Button><Button Grid.Row="3" Grid.Column="4" Content="按钮6"></Button><Button Grid.Row="3" Grid.Column="2" Content="按钮7"></Button></Grid>

不需要设置任何高宽。界面显示如下:


加上DevExpress,再稍微布置一下,所有控件没有设置任何高度和宽度:

<dx:DXWindowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"xmlns:dxnav="http://schemas.devexpress.com/winfx/2008/xaml/navigation"xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="TestDev003.MainWindow"Title="MainWindow" MinHeight="800" MinWidth="1000"><Grid><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="8*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="7*" /></Grid.ColumnDefinitions><dxnav:OfficeNavigationBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"><dxnav:NavigationBarItem Content="开始" /><dxnav:NavigationBarItem Content="编辑" /><dxnav:NavigationBarItem Content="设置" /><dxnav:NavigationBarItem Content="帮助" /></dxnav:OfficeNavigationBar><dxn:NavBarControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"><dxn:NavBarGroup Header="navBarGroup1"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup><dxn:NavBarGroup Header="navBarGroup2"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup><dxn:NavBarGroup Header="navBarGroup3"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup></dxn:NavBarControl><dx:DXTabControl Grid.Row="1" Grid.Column="1"><dx:DXTabItem Header="Tab1"><Grid Background="Transparent"><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><dxg:GridControl Grid.Row="0" Grid.Column="0" Margin="0" AutoGenerateColumns="AddNew"EnableSmartColumnsGeneration="True" SelectionMode="MultipleRow"><dxg:GridControl.Columns><dxg:GridColumn FieldName="Column1" /><dxg:GridColumn FieldName="Column2" /><dxg:GridColumn FieldName="Column3" /></dxg:GridControl.Columns><dxg:GridControl.View><dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True" AutoWidth="True" /></dxg:GridControl.View></dxg:GridControl><dxe:SparklineEdit Grid.Row="0" Grid.Column="1" Margin="0" /><dxc:ChartControl Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Margin="0"VerticalAlignment="Top"><dxc:ChartControl.Legend><dxc:Legend /></dxc:ChartControl.Legend><dxc:XYDiagram2D><dxc:BarSideBySideSeries2D DisplayName="Series 1" /><dxc:BarSideBySideSeries2D DisplayName="Series 2" /></dxc:XYDiagram2D></dxc:ChartControl></Grid></dx:DXTabItem><dx:DXTabItem Header="Tab2"><Grid Background="Transparent" /></dx:DXTabItem><dx:DXTabItem Header="Tab3"><Grid Background="Transparent" /></dx:DXTabItem></dx:DXTabControl></Grid>
</dx:DXWindow>

这篇关于WPF自适应、 简单适应性布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/397309

相关文章

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构

C/C++ chrono简单使用场景示例详解

《C/C++chrono简单使用场景示例详解》:本文主要介绍C/C++chrono简单使用场景示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录chrono使用场景举例1 输出格式化字符串chrono使用场景China编程举例1 输出格式化字符串示

windows和Linux安装Jmeter与简单使用方式

《windows和Linux安装Jmeter与简单使用方式》:本文主要介绍windows和Linux安装Jmeter与简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows和linux安装Jmeter与简单使用一、下载安装包二、JDK安装1.windows设

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

《全解析CSSGrid的auto-fill和auto-fit内容自适应》:本文主要介绍了全解析CSSGrid的auto-fill和auto-fit内容自适应的相关资料,详细内容请阅读本文,希望能对你有所帮助... css  Grid 的 auto-fill 和 auto-fit/* 父元素 */.gri

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要