当前位置: 首页 > ai >正文

关于wpf的自适应

案例代码:关于wpf的自适应-CSDN博客

1.案例申明

目前该案例是将自适应的代码放在自定义控件里面,将控件作为界面来使用,然后再将控件布置到界面,拉动界面的大小,可以实现布局的自动补偿。

2.自适应控件的xaml代码

<UserControl x:Class="WpfApp13.UserControl1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfApp13"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><!-- 使用Grid作为根布局容器 --><Grid><!-- 定义行和列的比例,使用*表示按比例分配剩余空间 --><Grid.RowDefinitions><RowDefinition Height="Auto"/><!-- 自动高度,适应内容 --><RowDefinition Height="*"/><!-- 占据剩余空间 --><RowDefinition Height="2*"/><!-- 占据剩余空间的2倍 --><RowDefinition Height="Auto"/><!-- 自动高度,适应内容 --></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><!-- 占据剩余空间 --><ColumnDefinition Width="2*"/><!-- 占据剩余空间的2倍 --><ColumnDefinition Width="Auto"/><!-- 自动宽度,适应内容 --></Grid.ColumnDefinitions><!-- 标题区域 --><Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Content="自适应布局演示" HorizontalAlignment="Center" FontSize="20" FontWeight="Bold"Margin="10"/><!-- 内容区域1 --><Border Grid.Row="1" Grid.Column="0" Background="LightBlue" Margin="5" CornerRadius="5"><TextBlock Text="区域1 (1x)" HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16"/></Border><!-- 内容区域2 --><Border Grid.Row="1" Grid.Column="1" Background="LightGreen" Margin="5" CornerRadius="5"><TextBlock Text="区域2 (2x宽度)" HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16"/></Border><!-- 内容区域3 --><Border Grid.Row="1" Grid.Column="2" Background="LightSalmon" Margin="5" CornerRadius="5"><TextBlock Text="固定宽度" HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16"/></Border><!-- 跨多列的内容区域 --><Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Background="LightGoldenrodYellow" Margin="5" CornerRadius="5"><TextBlock Text="跨三列区域 (高度是上面的2倍)" HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16"/></Border><!-- 底部按钮区域 --><StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Center"Margin="10"><local:UserControl2>111111111</local:UserControl2><Button Content="确定" Width="100" Margin="5" Padding="10,5"/><Button Content="取消" Width="100" Margin="5" Padding="10,5"/></StackPanel></Grid>
</UserControl>

3.grid应用于window界面

该模式,可以实现布局的自动调整,但是无法实现字体和空间的同等缩放。

<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp13" x:Class="WpfApp13.MainWindow"Title="自适应布局演示" Height="450" Width="800" MinWidth="400" MinHeight="300"><!-- 使用Grid作为根布局容器 --><Grid><!--<Viewbox Stretch="Uniform"><local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /></Viewbox>--><local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /></Grid></Window>

4.grid应用于window界面的效果

5.补充viewbox,除了可以自动布局适应,还能自动实现字体的缩放

在window的xmal补充viewbox

<Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp13" x:Class="WpfApp13.MainWindow"Title="自适应布局演示" Height="450" Width="800" MinWidth="400" MinHeight="300"><!-- 使用Grid作为根布局容器 --><Grid><Viewbox Stretch="Uniform"><local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /></Viewbox></Grid></Window>

6.补充viewbox后的效果

http://www.xdnf.cn/news/15152.html

相关文章:

  • Elasticsearch 线程池
  • 【八股消消乐】Kafka集群 full GC 解决方案
  • 数据湖和数据库对比
  • Linux->基础IO
  • DVWA靶场通关笔记-反射型XSS(Reflected High级别)
  • 亚矩阵云手机:重构物流供应链,让跨境包裹“飞”得更快更准
  • (C++)STL标准库(vector动态数组)(list列表)(set集合)(map键值对)相关对比,基础教程
  • Linux中Gitee的使用
  • 杭州乐湾科技有限公司的背景、产品体系与技术能力的全方位深度分析
  • 三维点云Transformer局部感受野构建:理论、方法与挑战
  • C++类模版1
  • Redis Cluster 手动部署(小白的“升级打怪”成长之路)
  • Vue》》总结
  • 用YOLOv5系列教程(1)-用YOLOv5轻松实现设备状态智能监控!工业级教程来了
  • 11. JVM中的分代回收
  • C语言习题三
  • 玩转rhel9 Apache
  • 贪心算法题解——划分字母区间【LeetCode】
  • Tom 和 Jerry 的网格迷宫大冒险
  • 深入理解设计模式:原型模式(Prototype Pattern)
  • Spring Boot 应用中,配置的加载优先级
  • 前端MQTT入门指南:从零到实战的完整流程
  • 利用scale实现图片放大案例
  • 家用智能摄像机PRV文件删除的恢复方法
  • 设计模式 - 反转原则:DIP(Dependence Inversion Principle)最佳实践
  • 手机识别数据集,2628张原始图片,支持yolo,coco json,pasical voc xml等格式的标注
  • Nginx 中的负载均衡策略
  • TensorFlow2 study notes[1]
  • NW710NW713美光固态闪存NW719NW720
  • 【每日刷题】回文数