一、学习资源：
WPF中文网：https://www.wpfsoft.com/
Visual Studio 2022：https://visualstudio.microsoft.com/zh-hans/vs/
VS2022 激活密钥：https://www.cnblogs.com/soarowl/p/18200602
学习参照教程：https://www.bilibili.com/video/BV1mJ411F7zG
二、VS2022激活：
【帮助】- 【注册 Visual Studio 2022】
除了激活码，还需要注册微软账号绑定支持：
三、编辑器字体设置
Jetbrains 字体需在官网下载：https://www.jetbrains.com/lp/mono/
下载后直接解压到 C:\Windows\Fonts 目录下，自动安装
原生自带字体不好看，习惯使用IDEA产品的JetBrains字体
XAML编辑器需要另外选择为这个：
四、新项目创建
五、样式布局
布局样式学习
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><!-- <TextBlock Text="Hello,World!" FontSize="48"/> --><!-- 堆叠布局容器 分垂直和水平两种布局方式<StackPanel Orientation="Horizontal"><Button Width="100" Height="40">按钮1</Button><Button Width="100" Height="40">按钮2</Button><Button Width="100" Height="40">按钮3</Button><Button Width="100" Height="40">按钮4</Button></StackPanel><StackPanel Orientation="Vertical"><Button Width="100" Height="40">按钮1</Button><Button Width="100" Height="40">按钮2</Button><Button Width="100" Height="40">按钮3</Button><Button Width="100" Height="40">按钮4</Button></StackPanel>--><!-- WrapPanel，包裹布局，在容器内溢出部分向下继续填充 支持水平或垂直排布 Orientation="Vertical" Orientation="Horizontal" <WrapPanel Orientation="Vertical"><Button Width="100" Height="40">按钮1</Button><Button Width="100" Height="40">按钮2</Button><Button Width="100" Height="40">按钮3</Button><Button Width="100" Height="40">按钮4</Button><Button Width="100" Height="40">按钮5</Button><Button Width="100" Height="40">按钮6</Button><Button Width="100" Height="40">按钮7</Button><Button Width="100" Height="40">按钮8</Button><Button Width="100" Height="40">按钮9</Button><Button Width="100" Height="40">按钮10</Button></WrapPanel>--><!-- DockPanel，锚定布局，在容器内的元素通过DockPanel.Dock属性锚定在一个位置上 <DockPanel LastChildFill="False"><Button Width="100" Height="40" DockPanel.Dock="Left">按钮1</Button><Button Width="100" Height="40" DockPanel.Dock="Top">按钮2</Button><Button Width="100" Height="40" DockPanel.Dock="Bottom">按钮3</Button><Button Width="100" Height="40" DockPanel.Dock="Right">按钮4</Button></DockPanel>--><Grid.RowDefinitions><!-- <RowDefinition Height="60" /> --><!-- <RowDefinition Height="auto" /> --><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><!-- 按倍数设置 <ColumnDefinition Width="2*" /> --><!-- 自动分配 <ColumnDefinition Width="auto" /> --><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Border Margin="3" Background="Blue" Grid.Row="0" Grid.Column="0" ></Border><Border Margin="3" Background="Red" Grid.Row="0" Grid.Column="1"></Border><Border Margin="3" Background="Yellow" Grid.Row="1" Grid.Column="0"></Border><Border Margin="3" Background="Green" Grid.Row="1" Grid.Column="1" ></Border></Grid> </Window>
堆叠布局，分为垂直堆叠和水平堆叠
<StackPanel Orientation="Horizontal"><Button Width="100" Height="40">按钮1</Button><Button Width="100" Height="40">按钮2</Button><Button Width="100" Height="40">按钮3</Button><Button Width="100" Height="40">按钮4</Button></StackPanel>
渲染效果
包裹布局，溢出时向容器内空白处继续填充元素
<WrapPanel Orientation="Horizontal"><Button Width="100" Height="40">按钮1</Button><Button Width="100" Height="40">按钮2</Button><Button Width="100" Height="40">按钮3</Button><Button Width="100" Height="40">按钮4</Button><Button Width="100" Height="40">按钮5</Button><Button Width="100" Height="40">按钮6</Button><Button Width="100" Height="40">按钮7</Button><Button Width="100" Height="40">按钮8</Button><Button Width="100" Height="40">按钮9</Button><Button Width="100" Height="40">按钮10</Button></WrapPanel>
分为水平布局和垂直布局两种方式
锚定布局，容器内的元素标记锚定布局位置来定位
<DockPanel LastChildFill="False"><Button Width="100" Height="40" DockPanel.Dock="Left">按钮1</Button><Button Width="100" Height="40" DockPanel.Dock="Top">按钮2</Button><Button Width="100" Height="40" DockPanel.Dock="Bottom">按钮3</Button><Button Width="100" Height="40" DockPanel.Dock="Right">按钮4</Button></DockPanel>
栅格布局，需要先定义有多少行和列，然后再定义内部元素标记为对应的所在行和列上
<Grid.RowDefinitions><!-- <RowDefinition Height="60" /> --><!-- <RowDefinition Height="auto" /> --><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><!-- 按倍数设置 <ColumnDefinition Width="2*" /> --><!-- 自动分配 <ColumnDefinition Width="auto" /> --><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Border Margin="3" Background="Blue" Grid.Row="0" Grid.Column="0" ></Border><Border Margin="3" Background="Red" Grid.Row="0" Grid.Column="1"></Border><Border Margin="3" Background="Yellow" Grid.Row="1" Grid.Column="0"></Border><Border Margin="3" Background="Green" Grid.Row="1" Grid.Column="1" ></Border>
渲染结果
六、样式设置
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="defaultStyle" TargetType="Button"><Setter Property="FontSize" Value="20"></Setter><Setter Property="Foreground" Value="Blue"></Setter><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical"><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button></StackPanel></Grid>
</Window>
设置效果，静态资源指定样式，对绑定的元素都起作用
样式继承
通过BaseOn属性来继承某一样式的设定
例如，可以设置两种defaultStyle，一种是小的宽高，一种是大的宽高，但是都是使用20的字号和蓝颜色
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="baseButtonStyle" TargetType="Button"><Setter Property="FontSize" Value="20"></Setter><Setter Property="Foreground" Value="Blue"></Setter></Style><Style x:Key="defaultStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter></Style><Style x:Key="default2Style" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="200"></Setter><Setter Property="Height" Value="80"></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical"><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource default2Style }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button></StackPanel></Grid>
</Window>
效果设置
样式触发器
对应CSS的事件样式，当元素出现交互事件时更改样式效果
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="baseButtonStyle" TargetType="Button"><Setter Property="FontSize" Value="20"></Setter><Setter Property="Foreground" Value="Blue"></Setter></Style><Style x:Key="defaultStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="Red"></Setter></Trigger><Trigger Property="IsMouseOver" Value="False"><Setter Property="Foreground" Value="Blue"></Setter></Trigger></Style.Triggers></Style><Style x:Key="default2Style" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="200"></Setter><Setter Property="Height" Value="80"></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical"><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button></StackPanel></Grid>
</Window>
当鼠标进入按钮区域时，样式发生变更：
多条件触发器
触发条件存在多个的情况，需要声明组合条件
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="baseButtonStyle" TargetType="Button"><Setter Property="FontSize" Value="20"></Setter><Setter Property="Foreground" Value="Blue"></Setter></Style><Style x:Key="defaultStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsMouseOver" Value="True" /><Condition Property="IsFocused" Value="True" /></MultiTrigger.Conditions><MultiTrigger.Setters><Setter Property="Foreground" Value="Red" /></MultiTrigger.Setters></MultiTrigger></Style.Triggers></Style><Style x:Key="default2Style" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="200"></Setter><Setter Property="Height" Value="80"></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical"><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button></StackPanel></Grid>
</Window>
当鼠标悬浮该元素，并且聚焦的也是该元素时，样式变化
事件触发器&动画故事板
设置一个开始动画的故事板，指定动画结束后字体变为30号，持续时间为0.2秒
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="baseButtonStyle" TargetType="Button"><Setter Property="FontSize" Value="20"></Setter><Setter Property="Foreground" Value="Blue"></Setter></Style><Style x:Key="defaultStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Style.Triggers><EventTrigger RoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><!-- 故事板？ --><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="FontSize" To="30" /></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger></Style.Triggers></Style><Style x:Key="default2Style" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}"><Setter Property="Width" Value="200"></Setter><Setter Property="Height" Value="80"></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical"><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button><Button Style="{ StaticResource defaultStyle }" Content="Button1"></Button></StackPanel></Grid>
</Window>
通过故事板设置该元素在触发指定事件时发生的动画样式
文本大纲
设置位置
对控件元素设置控件模版，点击编辑模版并确认后自动生成在Resources标签中
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Style x:Key="FocusVisual"><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/></ControlTemplate></Setter.Value></Setter></Style><SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/><SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/><SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/><SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/><SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/><SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/><SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/><SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/><SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/><Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"><Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/><Setter Property="Background" Value="{StaticResource Button.Static.Background}"/><Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><Trigger Property="IsDefaulted" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><Trigger Property="IsMouseOver" Value="true"><!-- <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> --><!-- <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> --><Setter Property="Background" TargetName="border" Value="yellow"/><Setter Property="BorderBrush" TargetName="border" Value="green"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><StackPanel Orientation="Vertical" VerticalAlignment="Center"><Button Style="{DynamicResource ButtonStyle1}" Width="100" Height="40" Content="按钮1"></Button></StackPanel></Grid>
</Window>
1 控件模版也是基于样式设置
2 样式设置名称为Template，样式设置的值是 控件模版标签，目标类型为按钮
3 其中里面定义的模版触发器，可以被调整
渲染结果：
自定义模版设置
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><ControlTemplate x:Key="myButton" TargetType="Button"><Border Background="Red" CornerRadius="5"><StackPanel Orientation="Horizontal" HorizontalAlignment="{ TemplateBinding HorizontalAlignment }"><TextBlock Text="❤" VerticalAlignment="Center" /><ContentPresenter HorizontalAlignment="{ TemplateBinding HorizontalAlignment }"VerticalAlignment="{ TemplateBinding VerticalAlignment }" /></StackPanel></Border></ControlTemplate></Window.Resources><Grid><StackPanel Orientation="Vertical" VerticalAlignment="Center"><Button Width="100" Height="40" Content="按钮1" Template="{StaticResource myButton}" VerticalAlignment="Center" HorizontalAlignment="Center"></Button></StackPanel></Grid>
</Window>
内容呈现器标签设置了绑定的 垂直对齐和水平对齐的设定，
这两个设定交给实际控件使用时声明来决定
渲染效果
七、数据模版
xaml文件定义了数据栅格标签，名称为gd
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources></Window.Resources><Grid><DataGrid Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True" CanUserAddRows="False"><DataGrid.Columns><DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="学生姓名"/><DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="班级名称"/><DataGridTextColumn Binding="{Binding Address}" Width="200" Header="地址"/><DataGridTemplateColumn Header="操作" Width="100" ><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"><Button Content="编辑"/><Button Margin="8 0 0 0" Content="删除" /></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid>
</Window>
在代码初始化逻辑中：
初始数据集合，填充到模版属性中
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace HelloWPF
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();List<Student> students = new List<Student>();students.Add(new Student() { UserName = "小胡", ClassName = "初三1班", Address = "南昌市" });students.Add(new Student() { UserName = "小戴", ClassName = "初三2班", Address = "九江市" });students.Add(new Student() { UserName = "小王", ClassName = "初三3班", Address = "宜春市" });students.Add(new Student() { UserName = "小翔", ClassName = "初三4班", Address = "高安市" });students.Add(new Student() { UserName = "小张", ClassName = "初三5班", Address = "吉安市" });gd.ItemsSource = students;}}public class Student { public String UserName {get;set;}public String ClassName {get;set;}public String Address { get; set; }}
}
渲染效果：
选择下拉项
xaml 部分
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><DataTemplate x:Key="comTemplate"><StackPanel Orientation="Horizontal" Margin="5,0"><Border Width="10" Height="10" Background="{Binding Code}"/><TextBlock Text="{Binding Code}" Margin="5,0"/></StackPanel></DataTemplate></Window.Resources><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><ComboBox Name="cob" Width="120" Height="30" ItemTemplate="{StaticResource comTemplate}"/><ListBox Name="lib" Width="120" Height="100" Margin="5,0" ItemTemplate="{StaticResource comTemplate}"/></StackPanel></Grid>
</Window>
主程序：
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace HelloWPF
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();List<Color> ColorList = new List<Color>();ColorList.Add(new Color() { Code = "#FF8C00" });ColorList.Add(new Color() { Code = "#FF7F50" });ColorList.Add(new Color() { Code = "#FF6EB4" });ColorList.Add(new Color() { Code = "#FF4500" });ColorList.Add(new Color() { Code = "#FF3030" });ColorList.Add(new Color() { Code = "#CD5B45" });cob.ItemsSource = ColorList;lib.ItemsSource = ColorList;}}public class Color{public String Code { get; set; }}
}
渲染效果：
元素渲染
逻辑代码部分
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using static System.Net.Mime.MediaTypeNames;namespace HelloWPF
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();List<Test> tests = new List<Test>();tests.Add(new Test() { Code = "1" });tests.Add(new Test() { Code = "2" });tests.Add(new Test() { Code = "3" });tests.Add(new Test() { Code = "4" });tests.Add(new Test() { Code = "6" });ic.ItemsSource = tests;}}public class Test{public String Code { get; set; }}
}
用于批量创建控件元素：
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources></Window.Resources><Grid><ItemsControl Name="ic"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel Orientation="Horizontal"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Button Width="50" Height="50" Content="{Binding Code}"/></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid>
</Window>
渲染效果：可以看见，根据Test集合中的元素数量，对应的在模版中也渲染了
数据绑定
通过window资源标签绑定 一个数据源 在渲染界面的控件元素设置静态资源进行绑定
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><TextBox x:Key="txt">Hello</TextBox></Window.Resources><Grid><StackPanel><!-- <Slider x:Name="sd" Width="200" /> --><!-- <TextBlock Text="{ Binding ElementName=sd, Path=Value, Mode=TwoWay }" /> --><TextBlock Text="{Binding Source={StaticResource txt}, Path=Text}" FontSize="60" /></StackPanel></Grid>
</Window>
后台数据更新通知：
绑定数据上下文
using System.ComponentModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Linq;
using static System.Net.Mime.MediaTypeNames;namespace HelloWPF
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();txt.DataContext = new Person() { Name = "张三" };this.DataContext = new MainViewModel();}}public class Person{public required String Name { get; set; }}/* 通知属性更新需要实现INotifyPropertyChanged接口 */public class MainViewModel:INotifyPropertyChanged{public MainViewModel(){Name = "Test";Task.Run(async () => {await Task.Delay(3000);Name = "Task Delay 数据变更";});}private string name;public string Name { get { return name; }set{/* 设置值之后，需要声明更新的是哪一个属性 */name = value;OnPropertyChanged("Name");} }/* 该接口提供一个抽象方法？并可以被调用？ */public event PropertyChangedEventHandler? PropertyChanged;/* 当属性变更时通知界面控件更新属性 */protected void OnPropertyChanged(string properName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(properName));}}}
}
界面绑定：除了命名式的数据上下文，还支持窗体对象的数据上下文
窗体对象的数据上下文可以直接用属性名绑定
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"DataContext=""Title="MainWindow" Height="450" Width="800"><Window.Resources><!-- <TextBox x:Key="txt">Hello</TextBox> --></Window.Resources><Grid><StackPanel><!-- <Slider x:Name="sd" Width="200" /> --><!-- <TextBlock Text="{ Binding ElementName=sd, Path=Value, Mode=TwoWay }" /> --><!-- <TextBlock Text="{Binding Source={StaticResource txt}, Path=Text}" FontSize="60" /> --><TextBox x:Name="txt" FontSize="60" Text="{ Binding Name, FallbackValue='李四' }" /><TextBox FontSize="60" Text="{ Binding Name, FallbackValue='李四2' }" /></StackPanel></Grid>
</Window>
八、NUGET包管理（资源引用）
视频是从引用右击进入的，但是我发现我本地的资源没有
右击发现菜单多一个管理NuGet程序包，打开发现是对应的上的
不过该版本已弃用...
更新逻辑为：
using System.ComponentModel;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Linq;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using static System.Net.Mime.MediaTypeNames;namespace HelloWPF
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();txt.DataContext = new Person() { Name = "张三" };this.DataContext = new MainViewModel();}}public class Person{public required String Name { get; set; }}/* 使用NuGet包程序管理引用的是 MvvmLight框架 *//* 1、需要继承 ViewModelBase类 ？ */public class MainViewModel : ViewModelBase {public MainViewModel(){Name = "Test";/* 初始化时保存方法属性为 更新Name属性的值为 'SaveCommand' */SaveCommand = new RelayCommand(() =>{Name = "SaveCommand";});Task.Run(async () => {await Task.Delay(3000);Name = "Task Delay 数据变更";});}private string name;public string Name { get { return name; }set{/* 设置值之后 调用ViewModelBase的RaisePropertyChanged方法 */name = value;RaisePropertyChanged();} }/* 声明一个RelayCommand属性 */public RelayCommand SaveCommand { get; private set; }}
}
xaml给按钮设置一个保存命令：
<Window x:Class="HelloWPF.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:HelloWPF"mc:Ignorable="d"DataContext=""Title="MainWindow" Height="450" Width="800"><Window.Resources></Window.Resources><Grid><StackPanel><TextBox x:Name="txt" FontSize="60" Text="{ Binding Name, FallbackValue='李四' }" /><TextBox FontSize="60" Text="{ Binding Name, FallbackValue='李四2' }" /><Button Command="{Binding SaveCommand}" Content="触发SaveCommand" Width="300" Height="60" /></StackPanel></Grid>
</Window>
