- A+
WPF复习知识点记录
由于近几年主要在做Web项目，客户端的项目主要是以维护为主，感觉对于基础知识的掌握没有那么牢靠，趁着这个周末重新复习下WPF的相关知识。
文章内容主要来自大佬刘铁锰老师的经典著作《深入浅出WPF》。
因为是复习，所以知识内容不会一一记录，如有需要了解更多可以看书中内容。
注意：博客中的代码示例我是以avalonia为UI框架写的。代码可能部分跟WPF的稍有不同。
1.从零起步认识XAML
1.什么是XAML
XAML（读作zaml）是WPF技术中专门用于设计UI 的语言
2.优点
- 实现界面与代码的分离
- 可以设计出专业的UI和动画
- 基于XML的标记语言，简单易懂，结构清晰
3.XAML剖析
1.最简单的XAML代码
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> </Window> 这个示例中，Window是一个XAML元素，它表示窗口组件。xmlns属性定义了XML命名空间，即指明XAML所使用的命名空间。在这里，http://schemas.microsoft.com/winfx/2006/xaml/presentation是WPF的命名空间。
这个示例中的XAML代码只有一个Window元素，它是一个空的容器。可以在Window元素中添加其他界面元素，例如按钮、文本框等，来构建应用程序的用户界面。同样，可以在XAML中设置属性来更改元素的外观和行为。
2.property和attribute
先不说WPF中两个属性的定义，我们先看看对应一个类的对象。
1)属性是指类体里用get或set封装好的属性。属性是面向对象的理论范畴。比如说一个盒子，盒子的高度，长度，都是这个盒子的属性。在C#中实现的时候可以通过GET SET 封装。
2)特性是指应用于类，字段，方法，接口的进一步说明，用专业的术语就是给类，字段，方法，接口补充元数据，说的再白一点就是给它们打上标记，打了标记后编译器就知道如何来编译它。特性是属于编程语言层面的东西。比如2个相同的类，为了表示这2个类不完全相同或者有差异。这时候就要针对这两个类加一些特性。
[Serializable] // 这是Attribute,打上该标记的类说明可以被序列化 class Order { protected internal Single Price { get; set; } // 这是Property [Obsolete("此方法已过时,请改用xxx.")] // 打上该标记说明此方法是过时的 public Single GetPrice() { return default(Single); } } 在看在XAML中：
Attribute 在XAML中的对于标签的属性特征,以下都是Window标签下的attribute
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="using:AvaloniaMarkdown.ViewModels" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="AvaloniaMarkdown.Views.MainWindow" x:DataType="vm:MainWindowViewModel" xmlns:md="clr-namespace:Markdown.Avalonia;assembly=Markdown.Avalonia" Icon="/Assets/avalonia-logo.ico" Title="AvaloniaMarkdown" Property 在后台代码中针对对象的属性特征，对应的后端类的对象Text，就是一个 property：
private string _text="hello"; public string Text { get => _text; set => this.RaiseAndSetIfChanged(ref _text, value); } private string _filePath; 3.xmlns 名称空间
xmlns[:可选的映射前缀]="名称空间"
用于引用外来程序集
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="using:AvaloniaMarkdown.ViewModels" 没有映射前缀的是默认名称空间，默认名称空间只能有一个。
通过xmlns，我们可以直接使用这些CLR名称空间中的类型
4.partial关键字
XAML文件对应的.xaml.cs文件中的类的声明使用了partial关键字，可以把一个类拆分在多处定义，只要各部分代码不冲突即可，由于partial机制，我们实现逻辑代码留在.cs文件中，把UI元素相关代码分离出去。
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } } 2.XAML语法
1.树形结构
<Window> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="10*"/> <ColumnDefinition Width="10*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="10*"/> </Grid.RowDefinitions> <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="9*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" > <Button>打开</Button> <Button>保存</Button> <Label/> </StackPanel> </Grid> <TextBox Grid.Row="1" Grid.Column="0"/> <md:MarkdownScrollViewer Grid.Row="1" Grid.Column="1"/> </Grid> </Window> XAML UI 框架是树状结构，以
2.x:Name
x:Name的作用：
- 告诉XAML编译器，带有x:Name的标签需要声明一个引用变量，变量名就是x:Name的值
- 将XAML标签对应的对象的Name属性也设为x:Name的值，并注册到UI树上，方便查找
2.x:Key
在资源字典（Resource Dictionary）中使用，构成其中的元素。资源（Resource ）非常重要，存放需要重复使用的内容。
<Application.Resources> <Color x:Key="SystemAccentColor">rgb(155, 138, 255)</Color> <Color x:Key="SystemAccentColorDark1">rgb(155, 138, 255)</Color> <Color x:Key="SystemAltMediumLowColor">rgb(52, 53, 65)</Color> <Color x:Key="ApplicationPageBackgroundThemeBrush">rgb(52, 53, 65)</Color> <Color x:Key="ControlStrokeColorDefaultBrush">rgb(94, 95, 109)</Color> </Application.Resources> 3.控件
1.ContentControl 单一内容控件
只能单一元素充当其内容。
例如：Button、Label等（具体看书中列表）
2.HeaderdContentControl
除了用于显示主体内容的区域外，控件还具有一个显示标题（header）的区域
例如：GroupBox、TabItem
3.ItemsControl
- 显示列表化的数据
- 内容属性为Items或ItemsSource
- 每种ItemsControl都对应有自己的条目容器(Item Container)
例如：ListBox、TreeView
4.Decorator
在UI 上起装饰效果，比如可以使用Border元素为一些组织在一起的内容加个边框
例如：Border、ViewBox
5.TextBlock和TextBox
最常用的文本控件
- TextBlock 用于显示文本，不能编辑
- TextBox 允许编辑内容
6.Shape
绘制图形使用的元素
- Fill 属性设置填充
- Stroke 属性设置边线
7.Panel
所有的UI布局元素都属于这一族
Panel元素控制布局
包括：Canvas、Grid、StackPanel等
4.布局
WPF的UI形成的树形结构，我们称之为可视化树（Visual Tree）
控件框架形成的树形结构，我们称之为逻辑树(Logic Tree)
五种大类
- Grid 网格面板
- DockPanel 停靠面板
- StackPanel 栈面板
- WrapPanel 环绕面板
- Canvas 精准定位
下面复习下它们的使用方法：
1.Grid
网格形式布局
1.CloumnDefinitions
定义多少列
2.RowDefinitions
定义了多少行
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="10*"/> <ColumnDefinition Width="10*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="10*"/> </Grid.RowDefinitions> <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="9*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Center"> <Button Classes="small" Margin="0,0,20,0" Command="{Binding UploadCommand}">打开</Button> <Button Classes="small" Margin="0,0,20,0" Command="{Binding SaveCommand}">保存</Button> <Label Content="{Binding FilePath}" Margin="0,0,20,0"/> </StackPanel> </Grid> 3.Grid长宽常用设置值
- 绝对值：double 数值后加单位后缀
- 比例值：double数值后加一个星号（*）（如上例）
- 自动值：Auto
2.StackPanel
StackPanel可以把内部的元素在纵向或横向上紧凑排列，形成栈式布局
适合场合：
- 同类元素需要紧凑排列（列表或菜单）
- 移除其中的元素后能够自动补缺的布局或者动画
1.属性
| 常用属性 | 数据类型 | 可选值 | 说明 |
|---|---|---|---|
| Orientation | Orientation | Horizontal（水平排列）Vertical(垂直排列) | 决定内部元素是水平还是垂直排列，默认值（Vertical） |
| Background | Brush | 背景色(Red/Yellow等等) | |
| HorizontalAlignment | HorizontalAlignment | Center（中心）/Left（靠左）/Right（靠右）/Stretch（拉伸以填充父元素） | 决定内部元素在水平方向的对齐方式 |
| VerticalAlignment | VerticalAlignment | Top（上方）/Center（中心）/Bottom（下方）/Stretch（拉伸以填充父元素） | 决定内部元素在垂直方向的对齐方式 |
3.Canvas
画布，可以使用Left、Top、Right、 Bottom。内部元素通过离上下左右的距离控制元素在布局中的位置。
4.DockPanel
DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同侧的元素则按顺序排序,。
<Grid> <DockPanel Width="Auto" Height="Auto"> <Button DockPanel.Dock="Left" >1</Button> <Button DockPanel.Dock="Top">2</Button> <Button DockPanel.Dock="Right">3</Button> <Button DockPanel.Dock="Bottom">4</Button> </DockPanel> </Grid> 5.WrapPanel
流式布局,根据
Orientation属性来设置其水平或垂直布局方向
默认是水平排列
<WrapPanel> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> </WrapPanel> 垂直排列
<WrapPanel Orientation="Vertical"> </WrapPanel> 5.Binding 绑定
数据交互核心属性,在字段定义的set语句中使用一个PropertyChanged事件，，当为Binding设置了数据源后，就会自动侦听PropertyChanged事件
WPF
using CommunityToolkit.Mvvm private string _searchKeyword; public string SearchKeyword { get => _searchKeyword; set => SetProperty(ref _searchKeyword, value); } Avalonia
using ReactiveUI; private string _filePath; public string FilePath { get => _filePath; set => this.RaiseAndSetIfChanged(ref _filePath, value); } 6.Dependency Property 依赖属性
依赖属性是一种本身没有可以没有值，能通过使用Binding从数据源获取值的属性。拥有依赖属性的对象称为“依赖对象”。
特点包括：
- 节省实例对内存的开销
- 属性值可以通过Binding依赖在其他的对象上
7.Attached Property 附加属性
附加属性，被环境赋予的属性，作用是将属性与数据类型（宿主）解耦，让数据类型的设计更加灵活
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="10*"/> <ColumnDefinition Width="10*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="10*"/> </Grid.RowDefinitions> <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="9*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" > <Button>打开</Button> <Button>保存</Button> <Label/> </StackPanel> </Grid> <TextBox Grid.Row="1" Grid.Column="0"/> <md:MarkdownScrollViewer Grid.Row="1" Grid.Column="1"/> </Grid> 上面 TextBox 的Grid.Row，Grid.Column都是附加属性。
8.Route 和Event 路由事件
路由事件被激发后是沿着Visual Tree传递的，只有这样，“藏”在Templete里的控件才能把消息送出来。
9.Resource 资源
每个WPF的界面的元素都具有一个名为Resources的属性，这个属性继承自FrameWorkElement类，其类型为ResourceDictionary，用来存储资源。
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceInclude Source="/Assets/Lang/en-US.axaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> 在使用资源时候分为静态资源（StaticResource）和动态资源(DynamicResource)
1.StaticResource
在程序载入内存时对资源一次性使用，之后就不再去访问这个资源了
<TextBox Grid.Row="4" Name="Editor3" AcceptsReturn="True" Text="{Binding Source={StaticResource VMLocator}, Path=EditorViewModel.Editor3Text,Mode=TwoWay}" FontSize="{Binding Source={StaticResource VMLocator}, Path=EditorViewModel.EditorCommonFontSize}" /> 2.StaticResource
程序运行过程中仍然会去访问资源
<Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource DataGridScrollBarsSeparatorBackground}" Grid.Column="2" Grid.Row="2" /> 10.Template 模板
1.ControlTemplate 控制器模板
<ControlTemplate> <Border Name="DataGridBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}"> <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="Auto,*,Auto,Auto"> <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Theme="{StaticResource DataGridTopLeftColumnHeader}" /> <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" /> <Rectangle Name="PART_ColumnHeadersAndRowsSeparator" Grid.Row="0" Grid.ColumnSpan="3" Grid.Column="0" VerticalAlignment="Bottom" Height="1" Fill="{DynamicResource DataGridGridLinesBrush}" /> <DataGridRowsPresenter Name="PART_RowsPresenter" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="3" Grid.Column="0"> <DataGridRowsPresenter.GestureRecognizers> <ScrollGestureRecognizer CanHorizontallyScroll="True" CanVerticallyScroll="True" /> </DataGridRowsPresenter.GestureRecognizers> </DataGridRowsPresenter> <Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource DataGridScrollBarsSeparatorBackground}" Grid.Column="2" Grid.Row="2" /> <Image Source="/Assets/maskGrad.png" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="60" Stretch="Fill" IsHitTestVisible="False" ZIndex="1" /> <ScrollBar Name="PART_VerticalScrollbar" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="{DynamicResource ScrollBarSize}" ZIndex="2" /> <Grid Grid.Column="1" Grid.Row="2" ColumnDefinitions="Auto,*"> <Rectangle Name="PART_FrozenColumnScrollBarSpacer" /> <ScrollBar Name="PART_HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="{DynamicResource ScrollBarSize}" /> </Grid> <Border Name="PART_DisabledVisualElement" Grid.ColumnSpan="3" Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2" Background="{DynamicResource DataGridDisabledVisualElementBackground}" IsVisible="{Binding !$parent[DataGrid].IsEnabled}" /> </Grid> </Border> </ControlTemplate> 2.DataTemplate 数据模板
<DataTemplate> <TextBlock Text="{Binding Title}" /> </DataTemplate> 11.Style 风格
设计外观和行为动作
1.Setter 设置器
Setter 类的Property属性用来指明你想为目标的哪个属性赋值，Value属性则是你提供的属性值
<Style Selector="Grid Button"> <Setter Property="BorderBrush" Value="rgb(94, 95, 109)" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="FontSize" Value="16" /> <Setter Property="Padding" Value="10,0,10,2" /> <Setter Property="Height" Value="32" /> <Setter Property="CornerRadius" Value="6" /> <Setter Property="Margin" Value="0" /> <Setter Property="FontFamily" Value="avares://TmCGPTD/Assets/Lato-Regular.ttf#Lato" /> <Setter Property="Transitions"> <Transitions> <BrushTransition Property="Background" Duration="0:0:0.2" /> </Transitions> </Setter> </Style> 上面的例子是针对 Grid Button的Style，使用了若干个Setter 来设置 Grid 中的Button的一些属性，这样，在程序中， Grid 中的Button就会具有统一的风格。
2.Trigger 触发器
当条件满足时会触发一个行为。
<Grid> <TextBlock Text="raokun" Width="75" Height="20"> <TextBlock.Style> <Style TargetType="TextBlock"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="blue" /> </Trigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </Grid> 上面的例子，是当鼠标移动在上面时，字体的颜色变成蓝色。
