首页 > 其他分享 >Wpf基础入门——控件介绍

Wpf基础入门——控件介绍

时间:2023-05-29 20:44:05浏览次数:37  
标签:控件 布局 入门 元素 内容 UI Wpf 属性

本篇文章学习于: 刘铁猛老师《深入浅出WPF》

控件到底是什么?

WPF中是数据驱动UI , 数据是核心、是主动的;UI从属于数据并表达数据、是被动的。
Control是数据和行为的载体,而无需具有固定的形象。控件的派生关系如下:
image.png

WPF的内容模型

image.png

各类内容模型详解

我们把符合某类内容模型的UI元素称为一个族,每个族用它们共同基类来命名。

ContentControl 单一内容控件

本族元素的特点如下:

  • 均派生自 ContentControl 类。
  • 它们都是控件(Control)。
  • 内容属性的名称为Content。
  • 只能由单一元素充当其内容。【例如:Button控件属于这一族,但如果你想让Button的Content既包含文字又包含图片是不行的,但是我们可以先用一个可以包含多个元素的布局控件把图片和文字包装起来,再把这个布局控件作为Button的内容就好了】

image.png

HeaderedContentControl 带标题的单一内容控件

本族元素的特点如下:

  • 它们都派生自 HeaderedContentControl 类,HeaderedContentControl 是 ContentControl 类的

派生类。

  • 它们都是控件,用于显示带标题的数据。
  • 除了用于显示主体内容的区域外,控件还具有一个显示标题(Header)的区域。
  • 内容属性为Content和Header。
  • 无论是Content还是Header都只能容纳一个元素作为其内容。

image.png
下面这个例子是一个以图标为Header . 以文字为主体内容的GroupBox , 效果如下所示。
image.png

ItemsControl 以条目集合为内容的控件

本族元素的特点如下:

  • 均派生自ItemsControl类。
  • 它们都是控件,用于显示列表化的数据。
  • 内容属性为Items或ItemsSource。
  • 每种ItemsControl都对应有自己的条目容器(Item Container)

image.png
image.png

HeaderedItemsControl 带标题的以条目集合为内容的控件

顾名思义,本族控件除了具有ItemsControl的特性外,还具显示标题的能力。
本族元素的特点如下:

  • 均派生自 HeaderedItemsControl 类。
  • 它们都是控件,用于显示列表化的数据,同时可以显示一个标题。
  • 内容属性为 Items、ItemsSource 和 Header。

本族控件只有3 个:Menuitem 、 TreeViewitem、ToolBar。

Decorator 控件装饰元素

本族中的元素是在UI上起装饰效果的。如可以使用Border元素为一些组织在一起的内容加个边框。如果需要组织在一起的内容能够自由缩放,则可使用ViewBox元素。
本族元素的特点如下:

  • 均派生自Decorator类。
  • 起UI装饰作用。
  • 内容属性为 Child。
  • 只能由单一元素充当内容。

image.png

TextBlock和TextBox 显示文本

这两个控件最主要的功能是显示文本。TextBlock只能显示文本,不能编辑,所以又称静态文本。
TextBox则允许用户编辑其中的内容。
TextBlock虽然不能编辑内容,但可以使用丰富的印刷级的格式控制标记显示专业的排版效果。
TextBox不需要太多的格式显示,所以它的内容是简单的字符串,内容属性为Text。
TextBlock由于需要操纵格式,所以内容属性是Inlines (印刷中的“行”),同时,TextBlock也保留一个名为Text的属性,当简攀地显示一个字符串时,可以使用这个属性。

Shape 图形元素

友好的用户界面离不开各种图形的搭配,Shape族元素(它们只是简单的视觉元素,不是控件)就是专门用来在UI 上绘制图形的一类元素。这类元素没有自己的内容,我们可以使用Fill 属性为它们设置填充效果,还可以使用Stroke属性为它们设置边线的效果。
本族元素的特点如下:

  • 均派生自Shape类。
  • 用于2D图形绘制。
  • 无内容属性。
  • 使用Fill属性设置填充,使用Stroke属性设置边线。

Panel 面板类元素

之所以把Panel 族元素放在最后是因为这一族控件实在是太重要了一所有用于UI 布局的元素都属于这一族。
本族元素的特点如下:

  • 均派生自Panel抽象类。
  • 主要功能是控制UI布局。
  • 内容属性为Children。
  • 内容可以是多个元素,Panel元素将控制它们的布局。

image.png

UI布局(Layout)

布局元素属于Panel 族,这一族元素的内容属性是Children , 即可以接受多个控件作为自己的内容并对这些控件进行布局控制。WPF 的布局理念就是把一个布局元素作为ContentControl或HeaderedContentControl族控件的Content,再在布局元素里添加要被布局的子级控件,如果UI局部需要更复杂的布局,那就在这个区域放置一个子级的布局元素,形成布局元素的嵌套。
WPF中的布局元素有如下几个:

  • Grid:网格。可以自定义行和列并通过行列的数最、行髙和列宽来调整控件的布局。近似于HTML中的Table
  • StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成•条直线,当移除一个元素后,后面的元素会自动向前移动以填充空缺。
  • Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于WindowsForm编程的布局方式。
  • DockPanel:泊靠式面板。内部元素可以选择泊靠方向,类似于在Windows Form编程中设置控件的Dock属性。
  • WrapPanel:自动折行面板。内部元素在排满一行后能够自动折行,类似于HTML中的流式布局。

标签:控件,布局,入门,元素,内容,UI,Wpf,属性
From: https://www.cnblogs.com/swbna/p/17441622.html

相关文章

  • python爬虫入门
    使用sublimetext3可以先保存文件,保存文件时,名字后缀需要添加.py否则无法识别为Python文件为方便命令行调用,文件名不用空格 可直接在文件夹内输入cmd快捷进入,shift+右键也可以Tab补齐内容,↑历史记录前端入门html <>开始</>结束head内一般是导入的元素,css,js脚本等css......
  • CMake入门
    CMakecmake的定义是--高级编译配置工具当多人用不同的语言或者编译器开发一个项目,最终要输出一个可执行文件或者共享库(dll,so等等)这时候就需要用到------CMake所有操作都是通过编译CMakeLists.txt来完成的官方网站是www.cmake.org学习CMake的目的,为将来处理大型的C/C++......
  • Kubernetes 入门实战
    Kubernetes入门实战DockerDocker的安装安装docker.io为了方便,你还可以使用-y参数来避免确认,实现自动化操作:sudoaptinstall-ydocker.io#安装DockerEngineDockerEngine不像DockerDesktop那样可以安装后就直接使用,必须要做一些手工调整才能用起来,所以你还要......
  • 细说ActiveX控件
    ActiveX技术介绍ActiveX技术起源于1996年,当时微软推出了一种名为“OLEControlExtension”(OCX)的技术,用于在Windows操作系统中实现可重用的软件组件。后来,微软将OCX技术扩展为“ActiveXControl”,并将其作为InternetExplorer浏览器的核心技术之一,用于在Web页面中嵌入可重用的软......
  • Apache Flume教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介Flume是Apache下面的一个分布式组件,它提供高效,可靠的收集,整合,传输日志数据的服务。Flume可以理解成一个管道,它连接数据的生产者和消费者,它从数据的生产者(Source)获取数据,保存在自己的缓存(Channel)中,然后通过Sink发送到消费者。它不对数据做保存和复杂的处理(可以做简单......
  • Java学习 - 入门
    Java三大版本JavaSE:标准版JavaME:嵌入式开发JavaEE:E企业级开发JDK、JRE、JVMJDK:Java开发者工具JRE:Java运行时环境JVM:Java虚拟机Java开发环境卸载JDKJava安装目录:环境变量-JAVA_HOME删除java安装目录删除JAVA_HOME删除path下关于java目录运行cmdjava-version......
  • Javase入门|史上最好用的截图工具Snipaste
    在学习Java的时候,有时候老师操作的比较快,通过截图的方式将老师的操作保存下来,以便后期的操作。另外截图之后的图片也可以用于笔记的记录,在笔记当中最好采用图文并茂的方式,这样更加利于知识的回顾。这篇文章详细介绍下snipaste截图工具的下载安装及使用,配合视频效果更佳动力节点老杜......
  • pytest从入门到精通笔记
    一、pytest简介pytest是一个非常成熟的全功能的Python测试框架,比unittest更灵活,容易上手。主要有以下几个特点:1.简单灵活,容易上手2.支持参数化3.能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appnium等自动化测试、接口自动化测试(pytest+requests)4.pytest具......
  • WPF 跨用户控件传递数据
    WPF跨用户控件传递数据前言在写Wpf程序中,经常为了解耦,会写不同的用户控件组装到一个界面上,这样便于管理。但是呢,如果直接通过这个大的界面的某控件调用另一个其他用户控件中的控件,是不行滴!所以,这就是写本篇文章的理由。项目实现项目结构2个用户控件【1个存放Button、1个存......
  • 功能测试面试没人要了!软件自动化测试如何入门?
    对于我来说,我做的是web端的测试,做测试也有好几个年头了,每次都是使用手工测试的话,一直是做重复性的工作,既枯燥又繁琐,所以我在两年前自己使用java语言写了一系列的自动化测试脚本,利用的框架是java+testng+reportng+selenium,这个框架在项目中基本可用了。不过最近由于公司项目发生变......