WPF（Windows Presentation Foundation）是微软推出的基于Windows的用户界面框架，中文译为“Windows呈现基础”，属于.NET Framework 3.0的一部分。WPF类似于WinForm技术框架，但是相比于WinForm，WPF对大部分基础功能进行了更加强大的拓展，并且引入了XAML标记语言，真正实现了开发人员和设计人员的前后端分离，并且衍生出了一套MVVM开发框架。部分参考资料如下：

《深入浅出WPF》 ---- 适合新手的详细入门教程

WPF-Tutorial ---- WPF快速入门与上手

微软官方文档 ---- WPF类库查询大全

使用 .NET 创建新的 WPF 应用 ---- WPF微软官方入门案例

DependencyProperty.cs (microsoft.com) ---- WPF源码查看器

WPF转换器 - 痕迹g - 博客园 (cnblogs.com) ---- 大佬博客笔记

一.基本控件介绍

1.WPF UI元素继承关系

在这里插入图片描述

2.基本控件

2.1 TextBlock

简单来说，TextBlock是一个用于呈现文本内容的文字块。TextBlock 可以包含其 Text 属性或 Inline 内联格式的流内容元素（和HTML语言很相似。这些类似控件的小构造都继承自Inline类，可以作为文本的一部分进行内联呈现，比如粗体Bold、斜体Italic、下划线Underline等）。

- Foreground : 获取或设置要应用到 TextBlock 的文本内容的 Brush（文本颜色刷）。
- Background : 获取或设置要用于填充内容区域背景的 Brush（文本块背景颜色刷）。
- TextTrimming : 获取或设置在内容超出内容区域时要采用的文本剪裁行为(CharacterEllipsis字符边界裁剪、None不裁剪、WordEllipsis单词边界裁剪)。
- TextWrapping : 获取或设置 TextBlock 对文本进行换行的方式(Wrap自动换行、NoWrap不换行)。
- Text : 获取或设置 TextBlock 的文本内容，等效于标签中间放置文字。
- Inlines ： 获取包含顶级 Inline 元素的 InlineCollection，前者构成 TextBlock 的内容。

<!--TextBlock Inlines的XML格式-->
<TextBlock Margin="5" TextWrapping="Wrap" TextAlignment="Center">
     This is a <Bold>TextBlock</Bold>,we are text the <Italic Foreground="Blue">inline elements</Italic>
     <Span TextDecorations="Underline" Background="Silver">Look me,Hahahaha</Span>
</TextBlock>

在这里插入图片描述

//TextBlock Inlines的代码格式
TextBlock textBlock1 = new TextBlock();

textBlock1.TextWrapping = TextWrapping.Wrap;
textBlock1.TextAlignment = TextAlignment.Center;

textBlock1.Inlines.Add("This is a");
textBlock1.Inlines.Add(new Blob(new Run("TextBlock")));
textBlock1.Inlines.Add(",we are text the");
textBlock1.Inlines.Add(new Italic(new Run("inline elements")){
    
     Foreground = Brushes.Blue });
...

2.2 Label

Label表示控件的文本标签，类似于TextBlock。但Label使用的是Content属性而不是Text属性，这是因为Label内部可以放置任意类型的控件而不仅仅是文本，当然这个内容也可以是一个字符串。

- 访问键/助记符：用于启用对控件的快速键盘访问，即通过访问键可以快速聚焦到相关的控件上。Label支持助记符绑定。
- Label助记符配置：在应为访问密钥的字符之前添加下划线，然后按住[Alt]键快速定位。 如果内容包含多个下划线字符，则只有第一个字符转换为访问键，其他下划线显示为普通文本。第一个下划线使用两个连续下划线表示普通的下划线文本内容。
- Foreground : 前景色背景
- Content : 设置Label内容，类型为Object
- Target : 获取或设置当用户按下标签的访问键时获得焦点的元素。

<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelControlAdvancedSample" Height="180" Width="250">
    
	<StackPanel Margin="10">
		<Label Target="{Binding ElementName=txtName}">
            <!--Label内部Content包含堆叠对象-->
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
                <!--AccessText控件用下划线来指定用作访问键的字符并呈现-->
				<AccessText Text="__Na_me:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtName" />
		<Label Target="{Binding ElementName=txtMail}">
			<StackPanel Orientation="Horizontal">
				<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
				<AccessText Text="_Mai_l:" />
			</StackPanel>
		</Label>
		<TextBox Name="txtMail" />
	</StackPanel>
    
</Window>

2.3 TextBox

TextBox控件是WPF中最基本的文字输入控件。它允许显示或编辑无格式文本，就像是个编辑器。

- AcceptsReturn : 获取或设置一个值，该值指示在用户按 ENTER 键时文本编辑控件如何响应(如果按ENTER键可在当前光标位置处插入新行，则为true；否则将忽略ENTER键)
- TextWrapping : 获取或设置文本框中文本的换行方式
- Text : 获取或设置文本框的文本内容
- SpellCheck : 获取一个 SpellCheck 对象，来设置拼写检查错误
- Language ： 该属性指示拼写检查器使用的语言
- IsReadOnly : 文本框是否只读
- TextBox的选择参数属性:
	- SelectionStart : 获取或设置当前选择的起始位置的字符索引（当前光标位置或是否有选择）
	- SelectionLength : 获取或设置一个值，该值指示文本框中当前选择的字符数(当前选择的长度,否则为0)
	- SelectedText : 获取或设置文本框中当前选择的内容(当前选择的字符串，否则为空)
- SelectionChanged : 订阅SelectionChanged事件，在文本选择改变时发生

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSelectionSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBoxSelectionSample" Height="150" Width="300">
	<DockPanel Margin="10">
		<TextBox SelectionChanged="TextBox_SelectionChanged" DockPanel.Dock="Top" />
		<TextBox Name="txtStatus" AcceptsReturn="True" TextWrapping="Wrap" IsReadOnly="True" />
	</DockPanel>
</Window>

namespace WpfTutorialSamples.Basic_controls
{
    
    
	public partial class TextBoxSelectionSample : Window
	{
    
    
		public TextBoxSelectionSample()
		{
    
    
			InitializeComponent();
		}

		private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
		{
    
    
			TextBox textBox = sender as TextBox;
			txtStatus.Text = "Selection starts at character #" + textBox.SelectionStart + Environment.NewLine;
			txtStatus.Text += "Selection is " + textBox.SelectionLength + " character(s) long" + Environment.NewLine;
			txtStatus.Text += "Selected text: '" + textBox.SelectedText + "'";
		}
	}
}

2.4 Button

Button表示 Windows 按钮控件，该按钮可以对 Click 事件做出反应。若要将相同的属性设置应用于多个 Button 控件，请使用该 Style 属性。也可以修改默认值 ControlTemplate，使控件具有唯一的外观。

- Content : 设置Button内容，类型为Object。可以包括字符串或一些复杂类型
- Foreground, Background, FontWeight : 设置Button控件文字的样式
- Padding : 获取或设置控件内部的填充边距
- 事件
	- Click : 在单击 Button 时发生事件
	- ClickMode : 获取或设置 Click 事件何时发生。

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

2.5 列表集合控件

列表集合控件表示可用于呈现一组项/数据的控件。WPF中的列表集合控件均派生自 ItemsControl 类，属于 ItemsControl 族的元素，比如 ListBox和ComboBox等。我们这里以 ItemsControl和ListBox为例进行控件分析。

（1）ItemsControl

ItemsControl 是最简单的数据列表呈现控件，它几乎仅简单的遍历呈现列表数据，而不提供其他任何的条目选择（ListBox可以进行条目选择）。ItemsControl 继承自Control类，因此其列表集合数据本质上也不过是控件内包含的一块Content。ItemsControl除了作为ItemsControl族的顶层元素，还经常作为自定义列表控件（定义模板）进行使用。

ItemsControl 族的自动包装

- ItemsControl族最有特色的一点就是会自动使用条目容器（Item Container）对其列表集合的每项数据内容进行包装。每种 ItemsControl 类型都有其对应的条目容器类型，比如ListBox的Item Container是ListBoxItem控件；ComboBox的Item Container是ComboBoxItem控件。

- Item Container本质上也是一个控件元素，大部分继承自ContentControl类（比如ListBoxItem），这也意味着它可以包含任何类型的 (如字符串、图像或面板）的单个对象。

- 当我们把集合数据作为内容提交给 ItemsControl 时，ItemsControl 不会把这个集合直接拿来使用，而是先使用对应的Item Container控件将集合中的每项数据逐个包装，然后再将包装好的 Item Container List作为ItemsControl的整体内容进行呈现。这样的好处是我们不仅可以定义ItemsControl的外观，也可以方便的定义每一项数据的外观！并且ItemsControl的集合数据类型可以是各种各样的。

- 可以为 ItemsControl 中的每个数据项显式的创建条目容器Item Container，但这不是必需的。因为如果未显式创建条目容器Item Container，ItemsControl会自动为每一个数据项内容包装Item Container。

 <ListBox>
	<ListBoxItem>ListBox Item 1</ListBoxItem>
	<ListBoxItem>ListBox Item 2</ListBoxItem>
	<ListBoxItem>ListBox Item 3</ListBoxItem>
	<ListBoxItem>ListBox Item 4</ListBoxItem>
</ListBox>

<!--              等价于            -->

<ListBox>
	<system:String>ListBox Item 1</system:String>
	<system:String>ListBox Item 2</system:String>
	<system:String>ListBox Item 3</system:String>
	<system:String>ListBox Item 4</system:String>
</ListBox>

ItemsControl类属性

public class ItemsControl : Control,IContainItemStorage,IAddChild
- 属性：
	- DataContext: 获取或设置元素参与数据绑定时的数据上下文。
	- DisplayMemberPath: 获取或设置源对象上的值的路径，以用作对象的可视表示形式。（只能显示简单的字符串数据）
	- HasItems: 获取一个值，该值指示 ItemsControl 是否包含项。
	- ItemContainerStyle: 获取或设置应用于为每个项生成的容器元素的 Style(设置其Item Container的Style)。
	- Items: 获取用于生成 ItemsControl 的内容的集合。
	- ItemsPanel: 获取或设置模板，该模板定义对项的布局进行控制的面板(默认值是一个纵向排列的指定StackPanel)
	- ItemsSource: 获取或设置用于生成 ItemsControl 的内容的集合(常用于数据绑定，ItemsSource设置属性后，集合Items是只读且固定大小)
	- ItemStringFormat： 获取或设置一个复合/格式化字符串，如果 ItemsControl 中的项显示为字符串，则用于指定如何格式化这些项。（仅用于string数据项）
	- ItemTemplate： 获取或设置用来显示[每个项]的 DataTemplate。
	- Template: 获取或设置控件模板。（整个ItemsControl的样式模板，非数据项）

（2）ListBox

ListBox控件继承自ItemsControl下的Selector，ListBox除了可以列表显示一组数据元素，还可以允许用户从其子元素中[选择项]的控件。

public class ListBox : Selector
- 属性：
	- 继承 ItemsControl 的大部分属性
	- SelectedIndex: 获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)。
	- SelectedItem: 获取或设置当前选择中的第一项(Object)，或者，如果选择为空，则返回 null。
	- SelectedItems: 获取当前选定的所有项集合(IList)。
	- SelectedValue: 获取或设置通过使用 SelectedValuePath 而获取的 SelectedItem 的路径值。当调用SelectedValue时，ListBox先找到选中的Item所对应的数据对象，然后把SelectedValuePath的值当作数据对象的属性名称并把这个属性值取出来。
	- SelectedValuePath: 获取或设置用于从 SelectedItem 中获取 SelectedValue 的路径/属性名(string)。
	- SelectionMode: 获取或设置 ListBox 的选择行为。默认值为 Single 选择。
		- Extended: 用户可以按下 Shift 键来选择多个连续项。
		- Multiple: 用户可以选择多个项而无需按下修改键。
		- Single: 用户一次只能选择一项。
- 事件：
	- SelectionChanged：当 Selector 的选择更改时发生。

namespace WPF_Demo
{
    
    
    public partial class MainWindow : Window
    {
    
    
        public MainWindow()
        {
    
    
            InitializeComponent();

            List<Employee> empList = new List<Employee>()
            {
    
    
                new Employee(){
    
    Id=1,Name="Tim",Age=30},
                new Employee(){
    
    Id=2,Name="Tom",Age=26},
                new Employee(){
    
    Id=3,Name="Kitty",Age=28},
                new Employee(){
    
    Id=4,Name="Lisa",Age=30},
                new Employee(){
    
    Id=5,Name="Krito",Age=36}
            };

            this.listBoxEmplyee.DisplayMemberPath = "Name";
            this.listBoxEmplyee.SelectedValuePath = "Id";
            this.listBoxEmplyee.ItemsSource = empList;
        }

        private void listBoxEmplyee_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
    
    
            ListBox lst = sender as ListBox;
            if (lst != null)
            {
    
    
                int id = (int)lst.SelectedValue;
                int index = lst.SelectedIndex;
                MessageBox.Show("Id=" + id + ",Index=" + index);
            }
        }
    }


    public class Employee
    {
    
    
        public int Id {
    
     get; set; }
        public string Name {
    
     get; set; }
        public int Age {
    
     get; set; }
    }

}

在这里插入图片描述

3.WPF常用控件通用属性

3.1 ToolTip提示对象

FrameworkElement类中具有一个ToolTip属性，几乎所有WPF控件都继承自该属性。该属性用于获取或设置用户界面中为此元素显示的工具提示对象 (UI，Object) ，比如一个简单的提示字符串或一个复杂的提示布局。除此之外，结合ToolTipService类可以实现一堆有趣的影响提示工具的行为，比如ShowDuration 属性扩展工具提示的时间等。

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
        	<!--简单字符串提示-->
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <!--复杂提示对象，布局Panel-->
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>
</Window>

3.2 文本渲染

Microsoft 在 .NET 框架 4.0 中为 WPF 文本渲染引擎做了很多优化，引入了 TextOptions 类和相关属性

- TextOptions.TextFormattingMode : 选择用 Ideal（默认值）或 Display（更清晰）
- TextOptions.TextRenderingMode : 控制显示文本所用的抗锯齿算法

<Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Ideal, small text</Label>
<Label TextOptions.TextRenderingMode="Auto" FontSize="9">TextRenderingMode.Auto, small text</Label>

二.资源与转换器

1.WPF 资源

1.1 资源定义

资源是可以在应用中的不同位置重复使用的对象数据集合。所有的数据、控件、字符串等都可以作为资源存储，这使你能够将数据一处存放，随处使用，非常实用。WPF的界面元素都具有一个Resources的属性，其类型为ResourceDictionary，能够以“键-值”对的形式存储数据资源。资源字典中的每个资源都必须具有唯一键。在标记中定义资源时，可通过x:Key 指令来分配唯一键。通常情况下，这个键是一个字符串。

（1）控件范围： 控件定义的资源字典，只能在当前控件内部使用 <StackPanel.Resources>…</StackPanel.Resources>

（2）窗口/页面范围： 只能在当前窗口/页面中使用 <Window.Resources> …</Window.Resources>

（3）全局应用： 全局可用 <Application.Resources>…</Application.Resources>

1.2 资源使用

WPF会自动地从当前区域控制项（控件范围）到视窗再到App.xaml 沿着UI树自底向上寻找指定的资源，找到即停止，但不会向下搜寻。资源和资源字典不仅仅能定义元素的样式，还能定义资源的模板、故事版、触发器等等，方便了为较多同样控件定义样式时代码的冗余、重复定义同一样式。

静态资源：编译时查找，通过使用 StaticResource 标记扩展创建引用（使用标记扩展可以处理属性字符串并将对象返回到 XAML 加载程序，从而指定对象引用/绑定引用对象），静态资源引用只会在程序运行时加载一次。

动态资源：运行时查找，通过使用DynamicResource 标记扩展创建引用。在初始编译期间创建一个临时表达式，从而推迟资源的查找，直到实际需要请求的资源值才能构造对象。该资源的查找行为类似于运行时查找，这会影响性能。在应用程序中尽可能使用静态资源，仅在必要时使用动态资源。

（1）XAML声明：<子元素 (对应)属性名=”{StaticResource 资源标记名}” /> 或 <子元素 (对应)属性名=”{DynamicResource 资源标记名}” /> XAML自动匹配数据类型，无需强转，类型不匹配时会抛出异常。

（2）代码引用：

string text = (string)this.FindResource("str"); 资源字典值为Object，需强转。FindResource方式为自UI树底向上查找
string text1 = (string)this.Resources["str"]; 资源字典值为Object，需强转。Resources方式为只查找本控件的资源字典

1.3 资源合并

（1）定义资源字典

除了在上述的控件/窗口内部定义局部资源字典，我们也可以独立的定义资源字典来在不同应用/不同项目之间使用。ResourceDictionary 类提供一个哈希表/字典实现（键值对Map），其中包含组件所使用的 WPF 资源以及 WPF 应用程序的其他元素。VS2019中提供了添加 资源字典.xaml文件 的创建项。资源字典的写法和资源一样，直接在文件里定义你的资源就可以了。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPF_Demo">

    <Style TargetType="TextBox">
        <Setter Property="FontFamily" Value="楷体"></Setter>
        <Setter Property="FontSize" Value="50"></Setter>
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>
</ResourceDictionary>

（2）资源合并

新定义的独立资源字典并不能直接使用，因为该字典还并不能被WPF所识别，我们需要将它合并添加到相应的控件/窗口/APP范围内，所使用的合并属性为 MergedDictionaries 。MergedDictionaries为ResourceDictionary 类的一个属性，该属性是一个ResourceDictionary 集合类型。

通常情况下，MergedDictionaries 集合中的每个 ResourceDictionary 都指定一个 Source 属性。 Source 的值应为统一资源标识符 (URI)，该标识符解析为要合并的资源文件的位置。该 URI 的目标必须是另一个 XAML 文件，并以 ResourceDictionary 作为其根元素。

单项目中合并

<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
       　　<!--<ResourceDictionary Source="资源字典路径"/>-->
           <ResourceDictionary Source="/Dictionarys/ColorDictionary.xaml"/>
           <ResourceDictionary Source="..."/>
     </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

多项目中合并

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
       <!--<ResourceDictionary Source="/项目名;component/资源字典路径"/>-->
       <ResourceDictionary Source="/CommonModel;component/Dictionarys/PathDictionary.xaml"/>
       <ResourceDictionary Source="..."/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

2.类型转换器

参考资料：

使用IValueConverter进行值转换 - The complete WPF tutorial (wpf-tutorial.com)

如何：转换绑定的数据 - WPF .NET Framework | Microsoft Docs

2.1 转换器的概念

值转换器经常与数据绑定一起使用，用于将不同类型之间的数据进行自定义转换并显示到绑定UI上。WPF数据转换器需要实现 IValueConverter接口，或者IMultiValueConverter接口（多路绑定）。只需要实现两个方法：Convert() 和ConvertBack() 用于将值转换为目标格式，然后再返回。

namespace System.Windows.Data
{
    
    
    public interface IValueConverter
    {
    
    
        // 摘要: 数据绑定引擎在将值从绑定源传播到绑定目标时会调用此方法，即源属性传给目标属性时
        // 参数:
        //   value: 绑定源生成的值。
        //   targetType: 绑定目标属性的类型。
        //   parameter: 要使用的转换器参数。
        //   culture: 要用在转换器中的区域化/国际化信息。
        // 返回结果:
        //     转换后的值。 如果该方法返回 null，则使用有效的 null 值。
        object Convert(object value, Type targetType, object parameter, CultureInfo culture);

        // 摘要: 数据绑定引擎在将值从绑定目标传播到绑定源时调用此方法，此方法的实现必须是Convert方法的反向实现。
        // 参数:
        //   value: 绑定源生成的值。
        //   targetType: 绑定目标属性的类型。
        //   parameter: 要使用的转换器参数。
        //   culture: 要用在转换器中的区域化/国际化信息。
        // 返回结果:
        //     转换后的值。 如果该方法返回 null，则使用有效的 null 值。
        object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
    }
}

2.2 转换器实现实例

背景：绑定字符串，自动转换相应的颜色显示在UI，具体实现如下

（1）转换器实现

namespace WPF_Demo.Convert
{
    
    
    [ValueConversion(typeof(string), typeof(SolidColorBrush))]
    class DemoConvert : IValueConverter
    {
    
    
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
    
    
            string str = value.ToString().ToLower();
            if (str.Equals("x-red"))
            {
    
    
                return new SolidColorBrush(Color.FromRgb(222, 32,37));
            }else if (str.Equals("x-blue"))
            {
    
    
                return new SolidColorBrush(Color.FromRgb(19, 21, 190));
            }
            return new SolidColorBrush(Color.FromRgb(0, 0, 0));
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
    
    
            throw new NotImplementedException();
        }
    }
}

（2）XAML界面使用

引入Convert命名空间：xmlns:cv=“clr-namespace:WPF_Demo.Converts”

添加Window资源：<cv:StringToColorConvert x:Key=“bgCV”/>

绑定数据转换：Background=“{Binding} ElementName=txt,Path=Text,Converter={StaticResource bgCV}}”

<Window x:Class="WPF_Demo.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:WPF_Demo"
        xmlns:cv="clr-namespace:WPF_Demo.Converts"  
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="400">
    <Window.Resources>
        <cv:StringToColorConvert x:Key="bgCV"/>
    </Window.Resources>
    
    <StackPanel Margin="10">
        <TextBox x:Name="txt" Margin="10" Text="x-blue"/>
        <TextBlock Height="50" Margin="10" Background="{Binding ElementName=txt,Path=Text,Converter={StaticResource bgCV}}"/>
    </StackPanel>
</Window>

三.基本布局介绍

布局子元素的常用布局附加属性：

VerticalAlignment : 该属性用于获取或设置在父元素(如 Panel 或项控件)中组合此元素时所应用的垂直对齐特征

HorizontalAlignment ：该属性用于获取或设置在父元素(如 Panel 或项控件)中组合此元素时所应用的水平对齐特征

1 StackPanel 堆叠布局

（1）概念：StackPanel是堆叠布局，将其子元素依次排列成水平或垂直的一行。StackPanel 包含一个UIElement 对象集合（子元素集合），这些对象位于属性Children中。

- Orientation : 获取或设置一个值，该值指示子元素的堆叠维度(方向)，其中 Horizontal水平，Vertical垂直
- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- CanVerticallyScroll : 获取或设置一个值，该值指示内容能否垂直滚动。
- CanHorizontallyScroll : 获取或设置一个值，该值指示 StackPanel 能否水平滚动。

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Horizontal">
		<Button VerticalAlignment="Top">Button 1</Button>
		<Button VerticalAlignment="Center">Button 2</Button>
		<Button VerticalAlignment="Bottom">Button 3</Button>
		<Button VerticalAlignment="Bottom">Button 4</Button>
		<Button VerticalAlignment="Center">Button 5</Button>
		<Button VerticalAlignment="Top">Button 6</Button>
	</StackPanel>
</Window>

（2）滚动：StackPanel默认不会提供内容的物理滚动功能，如果需要物理滚动而不是逻辑滚动，请将 StackPanel 元素包装在一个 ScrollViewer 控件中，并将其 CanContentScroll 属性设置为 false。

2 Grid 网格布局

（1）概念：Grid是网格布局，用于定义由列和行组成的灵活的网格区域。Grid 包含一个UIElement 对象集合（子元素集合），这些对象位于属性Children中。 Grid 子元素按标记或代码中显示的顺序绘制。，因此当元素共享相同的坐标时，可以实现分层显示顺序 (也称为 z 顺序) 。

- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- ColumnDefinitions : 获取在 Grid 的实例上定义的 ColumnDefinitionCollection 列的定义信息集合
	- ColumnDefinition : 定义将应用于 Grid 元素的特定于列的属性，每个 ColumnDefinition 都成为表示最终网格布局中的列的占位符。
		- Width : 获取或设置 ColumnDefinition 定义的列的宽度值， GridLength 对象
			- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
			- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
			- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- RowDefinitions : 获取在 Grid 的实例上定义的 RowDefinitionCollection 行的定义信息集合，
	- RowDefinition : 定义将应用于 Grid 元素的特定于行的属性， 每个 RowDefinition 都成为表示最终网格布局中的行的占位符。
		- Height : 获取或设置 RowDefinition 定义的行的高度值， GridLength 对象
			- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
			- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
			- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- ShowGridLines : 获取或设置一个值，该值指示网格线在此 Grid 中是否可见

（2）附加属性（Attached）：附加属性是一种特殊的依赖属性，用于非定义该属性的类。例如Grid面板的RowDefinition、ColumnDefinition、Canvas面板的Left、Right等

- Column : 获取或设置一个值，该值表示 Grid 中的子内容所在的列，从0开始下同
- ColumnSpan : 获取或设置一个值，该值指示 Grid 中的子内容所跨越的总列数。默认1
- Row : 获取或设置一个值，该值表示 Grid 中的子内容所在的行
- RowSpan : 获取或设置一个值，该值表示在一个 Grid 中子内容所跨越的总行数。默认1

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpan" Height="110" Width="300">
	<Grid>
		<Grid.ColumnDefinitions>			
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
		<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
	</Grid>
</Window>

3 Canvas 画布

Canvas继承自Controls.Panel，用于定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。Canvas的特点如下：

（1）Canvas 的 Height 和 Width 属性的默认值为 0。如果不设置这些值，除非子元素自动调整大小，否则您将看不到画布。
（2）Canvas 上的子元素永远不会调整大小（随着窗体变化），它们只是放置在指定坐标处。于希望自动调整和对齐子内容的情况，最好是使用 Grid 元素。
（3）子元素上的垂直和水平对齐不起作用。子元素仅放置在由 Canvas Left、Top、Right 和 Bottom 属性设置的位置上。
（4）位置优先级：如果设置了 Canvas 的 Left 属性，Right 属性将不起作用。如果设置了 Canvas 的 Top 属性，Bottom 属性将不起作用。

- 属性：
	- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
	- Width： 获取或设置元素的宽度。(继承自 FrameworkElement)
	- Height： 获取或设置元素的建议高度。(继承自 FrameworkElement)
- 附加属性：
	- Bottom：获取或设置一个值，该值表示元素底部与其父 Canvas 底部之间的相对距离。（单位是像素）
	- Left：获取或设置一个值，该值表示元素左侧与其父 Canvas 左侧之间的距离。
	- Right：获取或设置一个值，该值表示元素右侧与其父 Canvas 右侧之间的距离。
	- Top：获取或设置一个值，该值表示元素顶部与其父 Canvas 顶部之间的距离。
	- Panel.ZIndex:获取或设置一个值，该值表示元素在 Z 平面中的显示顺序(上下深度顺序/层叠顺序）
		- ZIndex值越大显示优先级越高，允许负值，ZIndex的最大值为32766，默认值为0)。
		- 相同ZIndex则按照绘制/添加顺序，依次覆盖显示

<!--Canvas实例：XAML版本-->
<Window x:Class="WPF_Demo.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:WPF_Demo"
        xmlns:vm="clr-namespace:WPF_Demo.Status"
        xmlns:cm="clr-namespace:WPF_Demo.Commands"
        mc:Ignorable="d" 
        Title="MainWindow" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro"  Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Panel.ZIndex="1" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Panel.ZIndex="2" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

//Canvas实例：代码版本
namespace WPF_Demo
{
    
    
    public partial class MainWindow : Window
    {
    
    
        public MainWindow()
        {
    
    
            InitializeComponent();
            //1.添加Ellipse对象
            Ellipse ellipse = new Ellipse();
            ellipse.Fill = new SolidColorBrush(Colors.Gainsboro);
            ellipse.Width = 200;
            ellipse.Height = 200;
            //Set Canvas position  
            Canvas.SetLeft(ellipse, 25);
            Canvas.SetTop(ellipse, 25);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(ellipse);

            //2.添加Rectangle对象1
            Rectangle Red_rectangle = new Rectangle();
            Red_rectangle.Fill = new SolidColorBrush(Colors.Red);
            Red_rectangle.Width = 50;
            Red_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Red_rectangle, 25);
            Canvas.SetTop(Red_rectangle, 25);
            Panel.SetZIndex(Red_rectangle, 1);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Red_rectangle);
            
            //3.添加Rectangle对象2
            Rectangle Green_rectangle = new Rectangle();
            Green_rectangle.Fill = new SolidColorBrush(Colors.Green);
            Green_rectangle.Width = 50;
            Green_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Green_rectangle, 50);
            Canvas.SetTop(Green_rectangle, 50);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Green_rectangle);

            //4.添加Rectangle对象3
            Rectangle Yello_rectangle = new Rectangle();
            Yello_rectangle.Fill = new SolidColorBrush(Colors.Yellow);
            Yello_rectangle.Width = 50;
            Yello_rectangle.Height = 50;
            //Set Canvas position  
            Canvas.SetLeft(Yello_rectangle, 75);
            Canvas.SetTop(Yello_rectangle, 75);
            Panel.SetZIndex(Yello_rectangle, 2);
            //Add Ellips to Canvas 
            this.canvas.Children.Add(Yello_rectangle);
        }
    }

}

WPF（一） WPF基本控件与布局

一.基本控件介绍

1.WPF UI元素继承关系

2.基本控件

2.1 TextBlock

2.2 Label

2.3 TextBox

2.4 Button

2.5 列表集合控件

3.WPF常用控件通用属性

3.1 ToolTip提示对象

3.2 文本渲染

二.资源与转换器

1.WPF 资源

1.1 资源定义

1.2 资源使用

1.3 资源合并

2.类型转换器

2.1 转换器的概念

2.2 转换器实现实例

三.基本布局介绍

1 StackPanel 堆叠布局

2 Grid 网格布局

3 Canvas 画布

猜你喜欢