to watch https://www.youtube.com/watch?v=PoPUB1_q2kE https://www.youtube.com/watch?v=CABv5xIDC08 https://www.youtube.com/watch?v=mlmyFXJy8gQ WPF - Responsive UI Design | MVVM | XAML | C# | Tutorial

2025-06-27-WPF-tutorial-4-UI 2025-06-27-WPF-tutorial-3-MVVM#^wpf-databinding

[[_posts/2025-06-27-WPF-tutorial-3-MVVM#^wpf-databinding]]

Introduction

WPF stands for Windows Presentation Foundation. It is a powerful framework for building Windows applications. 早起的GUI程序中，比如Windows Forms，程序的外观和行为没有完全分离，都用同一种语言开发，比如C#，往往需要同时修改UI和逻辑代码，维护成本高。 In WPF, UI elements are designed in XAML while behaviors can be implemented in procedural languages such C# and VB.Net. So it very easy to separate behavior from the designer code. With XAML, the programmers can work in parallel with the designers. The separation between a GUI and its behavior can allow us to easily change the look of a control by using styles and templates. WPF架构

Setup

Microsoft provides two important tools for WPF application development. Both the tools can create WPF projects, but the fact is that Visual Studio is used more by developers, while Blend is used more often by designers.

• Visual Studio
• Expression Blend XAML

  Conceptions

  Logical Tree vs Visual Tree

  Visual tree includes logic tree. 开发中常用-逻辑树，可以聚焦在写代码

  Dependency property

  依赖属性不是普通的c#内部属性字段，他可以注册到WPF的属性系统中统一管理。有很多新特性，比如双向绑定，样式，动画，资源等等，是一种超级属性。 依赖属性必须继承 DependencyObject class

  Routed Events

  本质上是一个事件event，能监听树。 有3种：

• Direct Event - 等同与Windows form的event
• Bubbling Event，从下往上传递，顶层是Window
• Tunnel Event

  Controls

  WPF有100多种视觉控件。

  Data binding

  有多种数据绑定方法

  DataContext is used in View to bind data with ViewModel。最常用

   比如有一个view model ```csharp  public class Person { public string Name { get; set; } public int Age { get; set; } }

XAML 中这样绑定控件：
```xml
<!-- MainWindow.xaml -->
<StackPanel>
    <TextBlock Text="{Binding Name}" />
    <TextBlock Text="{Binding Age}" />
</StackPanel>

xaml代码中绑定数据源

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

        // 设置 DataContext（绑定源）
        this.DataContext = new Person { Name = "Alice", Age = 30 };
    }
}

DataContext 层级继承行为

• 如果你在 Window 上设置了 DataContext，所有内部子控件默认继承它。
• 你也可以在某个控件上局部替换 DataContext。 ```csharp

### 使用 `Binding.Source` 显式绑定（绕过 DataContext）
```xml
<Window.Resources>
    <local:Person x:Key="MyPerson" Name="Alice" Age="30"/>
</Window.Resources>

<TextBlock Text="{Binding Source={StaticResource MyPerson}, Path=Name}" />

好处：不依赖 DataContext，适合多个绑定源的情况
❗ 缺点：写法稍复杂，不够通用

使用 ElementName：控件之间绑定

<TextBox x:Name="txtInput" Text="Hello" />
<TextBlock Text="{Binding ElementName=txtInput, Path=Text}" />

📌 应用场景：两个控件之间同步内容，无需 ViewModel

使用 RelativeSource

<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Title}" />

应用场景：从控件绑定到父窗口、父控件、模板宿主等
常见用法包括：

• Self
• FindAncestor
• TemplatedParent

  绑定到静态类属性

  public static class Globals
  {
    public static string AppVersion => "1.0.0";
  }
  

  xaml ```xml xmlns:local=”clr-namespace:YourNamespace”

📌 WPF 支持 `x:Static`，WinUI 中可通过 `Binding Source={x:Bind}` 或使用静态资源类实现。
### 使用 Binding 对象绑定（纯 C#）
```csharp
Binding binding = new Binding("Name")
{
    Source = person,
    Mode = BindingMode.TwoWay
};

textBox.SetBinding(TextBox.TextProperty, binding);

🔍 如果 `ViewModel.IsSaving == true`，按钮将禁用，文字变成“Saving…”
✅ 此时 Trigger 依赖 ViewModel 的属性，这种是 `MVVM` 模式推荐用法。

# FAQ
## How to use fontawesome?
nuget > fontawesome.Sharp
![](images/posts/Pasted%20image%2020250628024926.png)
```xml
<Window xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"> ... </Window>

<fa:IconImage Icon="Book" Width="24" Height="24" Foreground="DeepSkyBlue"></fa:IconImage>

<Button.Content> <fa:IconBlock Icon="Info" Foreground="Chocolate"/> </Button.Content>

<TextBlock />
<IconBlock />
{fa:Icon [Icon]}
{fa:ToText [Icon]}
{fa:Geometry [Icon]}
<fa:IconImage />
{fa:IconSource [Icon]}
<fa:IconToImageConverter />