01 WPF-HelloWorld

发布时间 2023-11-15 10:49:55作者: 讨厌敲代码的老郭

01 HelloWorld

简介

WPF全称:Windows Presentation Foundation

Windows用户界面框架,统一的编程模型、语言和框架,做到了界面设计与后端开发分离。

特点:

  1. 呈现效果不受分辨率的影响
  2. 基于DirectX 3d技术,可以做出炫酷的界面
  3. 提供UI框架,集成了矢量图形、流动文字支持、3d视觉效果和控件模型框架
  4. UI与业务逻辑彻底分离,UI-XAML描述(底层wpf引擎是把元索解释成对应的对象)
  5. xp server2003到window7及以后的操作系统版本都可以支持
  6. 基于数据驱动,数据是核心

什么是 XAML

XAML:eXtensible Application Markup Language 可拓展的应用程序标记语言

XAML 是⼀种声明性标记语⾔。 应⽤于 .NET Core 编程模型时,XAML 简化了为.NET Core 应⽤创建 UI 的过程。
XAML ⽂件是通常具有 .xaml 扩展名的 XML ⽂件。 可通过任何 XML 编码对⽂件进⾏编码,但通常以 UTF-8 编码。

对象元素语法:单标签格式 和 双标签格式(可嵌⼊其他的标签)

元素嵌套关系

⼀个 XAML ⽂件只能有⼀个根元素,这样才能同时作为格式正确的 XML ⽂件和有效的 XAML ⽂件。
对于典型 WPF ⽅案,可使⽤在 WPF 应⽤模型中具有突出意义的根元素(例如,⻚⾯的 Window 窗体 或 Page 页面)。

在根标签下⾯有且只能有⼀个二级标签,一般使用一个容器标签,Grid​就是一个容器标签。在二级标签⾥⾯我们可以写多个三级 四级标签。

WPF 和 XAML 命名空间声明

在winform中引入命名空间需要使用using xxx;​,xaml中没有那种写法,需要在根元素上添加属性来引入命名空间,其中有几个命名空间是xaml​运行所需的依赖,默认就会添加

xmlns:xxx

XAML中使用 xmlns:xxx="xxxx"​引入命名空间,其中xxx可以是自己定义的名字,后面是命名空间的名字

代码中首先有以下几个命名空间,他们的作用是给xaml编译器看的,用来引导XAML代码将XAML代码编译为CLR代码

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"

x:Class

这个Attribute是告诉XAML编译器将XAML编译器编译的结果和后台编译结果的哪一个类进行合并,使用x:Class有以下几点要求:

  • 这个Attribute只能用于根节点。
  • 使用x:Class的根节点的类型要与x:Class的值所指示的一致。
  • x:Class的值所指示的类型在声明的时候必须使用partial关键字。

xmlna:xx="clr-namespace:xxxx"

用于引入本地的命名空间,也就是我们自己创建的命名空间

添加控件

添加控件的方案有三种

手动从工具箱拖拽控件

工具箱 => 拖拽 => 到指定位置

右键 => 属性 => 设置控件的外观

手动拖拽控件的做法本质上也是书写XAML,只是由编辑器自动帮我们完成了而已

手写XAML代码(重要)

手写XAML是编写wpf控件的主要方式,写法类似xml,每一个控件就是一个对象,如<Label></Label>​就是一个new Label()​,控件上的xxx="xxx"​称之为属性Attribute​,就是设置该对象的属性property,等价于label.xxx = "xxx"

<!--Label:表示控件的文本标签,并提供访问密钥支持。-->
<!--Label的一个继承关系:Object -> DispatcherObject -> DependencyObject -> Visual -> UIElement -> FrameworkElement -> Control -> ContentControl -> Label-->
<!--可以写成双标签,也可以写成单标签-->
<Label Content="哈哈" Background="#f55512" Width="50" Height="50" Cursor="Pen"  />
<Label Content="abc手动阀十分的" Background="AliceBlue"
       VerticalAlignment="Bottom" HorizontalAlignment="Right"
       Margin="50,80,90,100"
       FontSize="30" Foreground="Blue" FontWeight="Bold" FontFamily="微软雅黑" FontStyle="Italic">
</Label>

上例中用到了一些属性,简述一下

  • Background:设置背景颜色

  • VerticalAlignment/HorizontalAlignment:设置垂直或者水平对齐方式

  • Width/Height:设置元素的宽高

  • Margin:获取或设置元素的外边距。默认值是所有属性都等于 0。

    • 边距是此元素与其他元素之间的空间,当布局创建用户界面 (UI) 时,这些元素将相邻。

    • 共享元素可以是 (对等元素,例如公共父控件) 集合中的其他元素,也可能是此元素的父元素

    • 布局中同级元素的边距是相加的;例如,相邻边缘上边距设置为 30 的两个相邻元素之间将具有 60 个单位的空间。

    • 用法:<object Margin="left,top,right,bottom"/><object Margin="leftAndRight,topAndBottom"/><object Margin="all"/>

    • 注意:Margin的设置和HorizontalAlignment, VerticalAlignment​属性有关,当HorizontalAlignment设定left时,margin取left的值,right的值就不起作用了。如果定义right,那么margin取right的值,left的值就没有作用了,verticalAlignment同理

    • 如果没有设置HorizontalAlignment, VerticalAlignment

      • 如果控件没有设置尺寸,则设置对应方向的边距,并调整控件大小
      • 如果控件设置了尺寸,则平方剩余空间,并设置对应方向大于另一方向对象的值,如:<Label Background="Blue" Width="200" Height="39" VerticalAlignment="Center" Margin="10,0,0,0">​,则左边比右边边距大10
  • FontSize:设置字体大小

  • Foreground:获取或设置一个用于描述前景色的画笔。

  • FontWeight:获取或设置指定字体的粗细。

  • FontFamily:获取或设置控件的字体系列。

  • FontStyle:获取或设置字体样式。

在.cs代码中添加控件

我们经常也会需要在代码中动态的添加控件,如:根据数据库查询结果创建多个控件并展示

  1. 给要添加子控件的控件添加一个x:Name​属性,表示该控件的名字,这样才能在代码中获取它
  2.  for (int i = 0; i < 10; i++)
     {
         Label label = new Label(); // 创建控件
         label.Content = $"第{i}个元素";
         panel.Children.Add(label);  // 添加到控件中,panel为对应控件的Name值
     }
    

简单数据绑定

wpf最大的优势在于它的数据绑定十分简单,如:根据某个控件的输入内容控制另一个控件的文本,winfrom中需要好几句代码,WPF可以这样做

<!--使用Binding绑定该控件的属性值,ElementName设置要绑定哪个控件,Path设置绑定该控件的哪个属性-->
<TextBlock TextWrapping="Wrap" Text="{Binding ElementName=text, Path=Text}"/>
<TextBox x:Name="text" Height="100"/>