WPF入门 第一篇 基础布局与简单样式

news2025/7/11 13:08:51

基础布局与简单样式

首先,创建WPF项目,在自动打开的MainWindow.xaml里面,找到Grid标签,并将它替换为:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Name="t1" Grid.Row="0" Grid.Column="0" Text="t1"></TextBlock>
        <TextBlock Name="t2" Grid.Row="0" Grid.Column="1" Text="t2"></TextBlock>
        <Button Name="btn1" Grid.Row="1" Grid.Column="0" Content="btn1"></Button>
        <Button Name="btn2" Grid.Row="1" Grid.Column="1" Content="btn2"></Button>
</Grid>

修改好之后,界面会变成这样:
在这里插入图片描述

可以看到 MainWindow被分成一个“田”字,上面两个格子的左上角分别显示t1和t2,下面两个格子颜色有变化,并且中间显示btn1和btn2。

对比代码可以看出,WPF中Grid是用来布局的,我们使用RowDefinitionColumnDefinition来定义Grid有几行几列,之后再在Grid标签中定义了两个TextBlock和两个Button,它们的位置是通过Grid.RowGrid.Column确定的。同时,这四个控件的默认大小是填充了整个格子,且TextBlock中文本的显示位于左上角,Button中文本的显示位于居中位置。

下面我们写样式代码来使btn2变成我们常见的按钮样式,并且居中显示。
将btn2的代码替换为如下代码:

<Button Name="btn2" Grid.Row="1" Grid.Column="1" 
Content="btn2" Width="100" Height="40"></Button>

为了让btn1和btn2的样式一样,且不用写重复的代码,我们可以将Width=“100”,Height="40"单独拎出来,写成样式,并且给btn1和btn2引用该样式即可。

<Window x:Class="WpfTest.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:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
  <Window.Resources>
    <Style TargetType="Button" x:Key="btn">
      <Setter Property="Width" Value="100"></Setter>
      <Setter Property="Height" Value="48"></Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
      <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition></ColumnDefinition>
      <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Name="t1" Grid.Row="0" Grid.Column="0" Text="t1"></TextBlock>
    <TextBlock Name="t2" Grid.Row="0" Grid.Column="1" Text="t2"></TextBlock>
    <Button Name="btn1" Grid.Row="1" Grid.Column="0" Content="btn1" Style="{StaticResource btn}"></Button>
    <Button Name="btn2" Grid.Row="1" Grid.Column="1" Content="btn2" Style="{StaticResource btn}"></Button>
  </Grid>
  
</Window>

可以看出,样式可以在Window.Resources中定义,通过TargetType属性来限制适用类型,通过x:Key属性来被引用。
修改后效果是这样的:
在这里插入图片描述

类似Web前端的css文件,我们常常将Style写在单独的文件中,并在页面中引用。在资源管理器中右键点击项目名,添加一个资源字典文件,命名为styles。
在这里插入图片描述

将styles.xaml代码替换为以下代码:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfTest">
  <Style TargetType="Button" x:Key="btn">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="48"></Setter>
  </Style>
</ResourceDictionary>
可以看出,我们将MainWindow.xaml中定义的btn样式复制到了styles.xaml中。为了在MainWindow中使用该样式,我们需要下面两点,二选一:
ⅰ. 在App.xaml中引用styles.xaml(全局样式,所有界面都适用)
ⅱ. 在MainWindow.xaml中引用styles.xaml(仅适用给MainWindow)

在这里插入图片描述

分别对应上面的 i 和 ii。

下面我们来分别实现上面两个步骤:
①首先,打开App.xaml,将代码替换为如下代码:

<Application x:Class="WpfTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfTest"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
  </Application.Resources>
</Application>

②或者,在MainWindow.xaml文件中,将Window.Resources段代码改为如下代码:

<Window.Resources>
  <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
</Window.Resources>

如果MainWindow中需要引用两个及以上的样式文件,则需要将Window.Resources段改为下面格式:

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
      <!-- 在这里添加更多的样式文件引用 -->
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

常用的布局标签还有StackPanel(与Grid对应),它支持横向或纵向布局,我们可以将btn2的代码替换为如下代码:

<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
  <Button Name="btn2" Content="btn2" Style="{StaticResource btn}" Margin="5"></Button>
  <Button Name="btn3" Content="btn3" Style="{StaticResource btn}"></Button>
</StackPanel>

将刚才上面修改的代码添加到MainWindow中,效果是这样的:
在这里插入图片描述

巧妙地使用Grid和StackPanel,以及简单的样式设置,即可设计出漂亮的WPF界面了。关于布局还有更多的标签可以使用,样式设置也可以设置更多的属性,不过用起来都类似,所以关于布局与样式,还需要更深入的学习。
在这里插入图片描述

关于布局容器Grid、StackPanel、GroupBox、DockPanel、WrapPanel:https://www.cnblogs.com/xixixing/p/10959455.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/87854.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【案例教程】地球科学数据(ERA5、雪深、积雪覆盖、海温、植被指数、土地利用)处理实践

【查看原文】地 球 科 学 常 见 数 据 的 处 理 实 践 技 术 应 用 在地球科学中&#xff0c;不同数据根据具体学科的特色存储为多种数据格式。在科研工作中需要将多种数据进行综合使用分析&#xff0c;因此需要寻找学习通用的数据格式解决方法&#xff0c;把研究的精力聚焦到具…

芜湖~西门子低代码最新组件首发,快来围观!

热爱低代码的小伙伴们&#xff0c;我们又见面啦~ 在与大家长达1年多时间的沟通交流中&#xff0c;我们深刻感受到大家对西门子低代码的浓厚兴趣。为了不辜负大家的厚爱&#xff0c;我们潜心研制了一批前端组件。因为随着商业化的趋势&#xff0c;越来越多的企业级产品对更好的…

web前端实训作业 html+css+javascript 水果超市网页设计实例 企业网站制作

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

12.7、后渗透测试--python插件执行py脚本

加载python插件&#xff1a;meterpreter >load python查看指令集&#xff1a;meterpreter >helppython执行单条语句&#xff1a;meterpreter > python_execute "import os; cdos.getcwd()" -r cd # 将os.getcwd()赋值给 cd 这个变量&#xff0c;然后用 -…

中英翻译《The number thirteen数字13》

The number thirteen 数字13 一、Pre-reading activity 阅前思考 1.Do you have a lucky number? If so, what is it? 你有幸运数字吗&#xff1f;如果有&#xff0c;是什么&#xff1f; 2.What number is next? 10, 11, 12, ____? 下一个数字是什么&#xff1f; 10、11、1…

设计模式-迭代器模式

迭代器模式UML类图 实现代码如下&#xff08;这里使用的集合是list,也可以使用其他集合这里就不一一展示了&#xff09; public interface Iterator<T> {T next();boolean hasNext(); } 复制代码 public class ConcreteIterator<T> implements Iterator<T>…

商品企划VE课程大纲

课程信息 课程受众: 高中基层管理人员、储备干部&#xff0c;项目经理&#xff0c;商品企划人员&#xff0c;研发人员 课程时间: 2天 授课方式: 理论讲座&#xff0b;实战工作坊&#xff0b;录像观赏&#xff0b;角色扮演&#xff0b;提问互动&#xff0b;分组讨论&#xff0…

Java入门教程(29)——封装

封装是面向对象三大特征之一。 文章目录1.封装的特性2.封装的作用3.访问控制符4.实例1.封装的特性 高内聚、低耦合 2.封装的作用 提高代码的安全性。提高代码的复用性。高内聚&#xff1a;封装细节&#xff0c;便于修改内部代码&#xff0c;提高可维护性。低耦合”&#xff…

Linux常用目录操作及示例操作

文章目录一、常用权限操作1.1 常用权限操作1. chgrp命令2. chown命令3. chmod命令1.2 权限操作实战任务1 创建文件&#xff0c;设置其用户组任务2 修改文件的所有者任务3 修改文件操作权限二、常用目录操作2.1 常用目录操作2.2 目录操作实战任务1 获取命令帮助信息任务2 查看当…

IBM有望在2026年之前实现量子优势

&#xff08;图片来源&#xff1a;网络&#xff09; 目前&#xff0c;噪声是量子计算面临的最大挑战&#xff0c;限制了量子计算技术的快速发展。在未来几年内&#xff0c;IBM正努力通过各种类型的量子误差管理来减少噪声&#xff0c;直到实现真正的量子纠错 (QEC)。 这也是降低…

ANSYS Topology Optimization拓扑优化技术在轻量化设计应用概述

产品概念设计初期&#xff0c;单纯的凭借经验以及想象对零部件进行设计往往是不够的&#xff0c;在适当约束条件下&#xff0c;如果能充分利用“拓扑优化技术”进行分析&#xff0c;并结合丰富的产品设计经验&#xff0c;是有能力设计出更满足产品结构技术方案、工艺要求、而且…

通俗易懂的Redis数据结构基础教程

Redis有5个基本数据结构&#xff0c;string、list、hash、set和zset。它们是日常开发中使用频率非常高应用最为广泛的数据结构&#xff0c;把这5个数据结构都吃透了&#xff0c;你就掌握了Redis应用知识的一半了。 string 首先我们从string谈起。string表示的是一个可变的字节…

操作系统中的线程

我的GitHub&#xff1a;Powerveil GitHub 我的Gitee&#xff1a;Powercs12 (powercs12) - Gitee.com 皮卡丘每天学Java 进程就是 任务&#xff0c;跑起来的程序 系统使用 PCB 描述进程&#xff0c;使用双向链表来管理进程 进程存在的意义就是让操作系统可以同时执行多个任务&…

(node中)module.exports 和exports的区别

&#xff08;node中使用&#xff09;module.exports 和exports的区别是什么? 用一句话来说明就是&#xff0c;require只会去引用module.exports这个对象的导出&#xff0c;不会引用exports对象的&#xff0c;而我们在编写模块时&#xff08;初始化&#xff09;用到的exports对…

微服务框架 SpringCloud微服务架构 分布式缓存 44 Redis 分片集群 44.4 故障转移

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 分布式缓存 文章目录微服务框架分布式缓存44 Redis 分片集群44.4 故障转移44.4.1 故障转移44.4.2 数据迁移44 Redis 分片集群 44.4 故障转移…

[附源码]Python计算机毕业设计高等数学在线学习平台Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

零基础怎么学Python?要学多久?

首发内容&#xff0c;希望从各个角度为大家解答Python的学习方向&#xff0c;能够帮助更多入门的同学们。 一、为什么学Python 是因为铺天盖地的广告还是要转行&#xff0c;有本职工作希望自动化办公还是爱好&#xff1f; &#xff08;1&#xff09;有本职工作觉得应该学Pyt…

你一定要了解的NAT工作原理

大家好&#xff0c;我是技福的小咖老师。 前两天给大家分享了NAT策略问题的23个问题&#xff0c;有朋友私信我&#xff0c;想再普及一下NAT基础知识。今天咱们就来复习下NAT的工作原理。 随着网络应用的增多&#xff0c;IPv4地址枯竭的问题越来越严重。尽管IPv6可以从根本上解…

mybatis06:Mybatis注解开发

目录 1 MyBatis的常用注解 1.1注解完成基本的crud 例题演示 1.2mybatis的注解复杂查询映射开发 例题演示 1 MyBatis的常用注解 这几年来注解开发越来越流行&#xff0c;Mybatist也可以使用注解开发方式&#xff0c;这样我们就可以减少编写Mapper映射文件了。我们先用绕一些基…

mongoDB使用总结

windows安装 zip压缩包方式安装 下载 注意&#xff1a;因为现在最新版的mongodb不兼容win7,对windows系统的最低要求是win10。所以win7系统要安装mongodb数据库必须考虑使用旧版安装。 Download MongoDB Community Server | MongoDB 解压 将压缩包解压放在指定位置&#x…