C# WPF详解

C# WPF是一个桌面应用程序开发工具，它可以在Windows平台上使用。

一、XAML语言的基础

XAML是一种XML格式的标记语言，它可以用于定义.NET桌面和Web应用程序中的界面元素。XAML的标签定义了属性和值，这些值可以是直接数据或其他对象的引用。

XAML定义了在应用程序中如何创建和组合各种元素，如窗口、按钮、图像和文本。使用XAML对界面元素进行定义和布局非常方便，而且代码可读性也很好。

以下是XAML语言的基础语法示例：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

在这个示例中，我们使用<Window>标签来定义一个窗口。<Grid>标签表示一个网格面板，它可以让我们在窗口中创建行和列来摆放界面元素。<Button>标签表示一个按钮，在这个示例中我们只是设置了按钮的位置和宽度，你可以通过设置多个属性来改变按钮的样式。

二、布局控件的使用

布局控件是定义界面元素位置和大小的重要工具。在C# WPF中，有五个主要的布局控件：Grid、StackPanel、WrapPanel、Canvas和DockPanel。

1. Grid布局控件

Grid布局控件是一个灵活和强大的布局控件，它可以在一个网格面板中定义行和列，然后通过简单地将子元素放置在这些行列中来定义界面元素的位置和大小。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="5"/>
    <TextBox Text="{Binding Name}" Grid.Row="0" Grid.Column="1" Margin="5"/>
    <TextBlock Text="Age:" Grid.Row="1" Grid.Column="0" Margin="5"/>
    <TextBox Text="{Binding Age}" Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>

在这个Grid布局控件示例中，我们定义了两个行和两个列，第一行和第一列分别使用Auto和Auto单位，第二行和第二列分别使用Auto和星号（*）单位（星号代表剩余空间的所有大小）。TextBlock和TextBox元素分别放置在不同的行和列中，用于输入用户的姓名和年龄信息。

2. StackPanel布局控件

StackPanel布局控件是一个很简单但也很实用的布局控件，它将所有的子元素自动堆叠在一起，一字排开。默认情况下，StackPanel元素在垂直方向上堆叠，但我们也可以通过设置Orientation属性来指定堆叠方向。

<StackPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

在这个StackPanel布局控件示例中，我们定义了三个按钮，它们会自动堆叠在控件中。你可以在StackPanel外部给它添加一个父容器，并使用其他的布局控件，以实现更复杂的布局。

3. WrapPanel布局控件

WrapPanel布局控件是StackPanel的改进版，它也将子元素自动堆叠在一起。但是，WrapPanel还将子元素按照给定的宽度自动换行排列。这使得即使子元素不同，也可以很好地实现布局。

<WrapPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
    <Button Content="Button 6"/>
    <Button Content="Button 7"/>
</WrapPanel>

在这个WrapPanel布局控件示例中，我们有七个按钮元素，它们将自动在WrapPanel中布局。如果屏幕宽度不足以容纳所有的按钮，它们还将按照给定的宽度自动换行。

4. Canvas布局控件

Canvas布局控件是另一个强大的布局控件，它允许你对子元素进行绝对定位。这意味着你可以在Canvas中自由地设计和排列界面元素，但同时这也增加了一些困难。

<Canvas>
    <Ellipse Width="100" Height="50" Canvas.Left="50" Canvas.Top="50" Fill="Red"/>
    <Ellipse Width="100" Height="50" Canvas.Left="150" Canvas.Top="100" Fill="Blue"/>
    <Ellipse Width="100" Height="50" Canvas.Left="200" Canvas.Top="150" Fill="Green"/>
</Canvas>

在这个Canvas布局控件示例中，我们定义了三个椭圆元素，并在Canvas中对它们进行绝对定位。你可以通过设置Canvas.Left和Canvas.Top属性来控制元素的位置。

5. DockPanel布局控件

DockPanel布局控件会自动将子元素分配到容器的顶部、底部、左侧、右侧以及中心。这个控件非常适合具有标准页眉、页脚和边栏布局的应用程序。

<DockPanel>
    <Button Content="File" DockPanel.Dock="Top"/>
    <Button Content="Edit" DockPanel.Dock="Top"/>
    <Button Content="View" DockPanel.Dock="Top"/>
    <Button Content="Help" DockPanel.Dock="Bottom"/>
    <Button Content="Undo" DockPanel.Dock="Left"/>
    <Button Content="Redo" DockPanel.Dock="Right"/>
    <Button Content="Save" DockPanel.Dock="Right"/>
    <TextBox DockPanel.Dock="Top"></TextBox>
    <TextBlock Text="Document content goes here."/>
</DockPanel>

在这个DockPanel布局控件示例中，我们定义了大量的按钮，并且将它们分配到控件的顶部、底部、左侧和右侧。我们还定义了两个文本框元素，将它们放置到DockPanel的顶部。

三、MVVM模式的使用

MVVM是一种软件设计模式，它将应用程序的业务逻辑、用户界面和数据源分离，从而实现更好的可维护性和可扩展性。

在WPF开发中，MVVM是一种常用的设计模式。我们可以使用MVVM模式来实现应用程序界面和数据的解耦，从而使代码更加灵活和易于维护。

1. 模型（Model）

模型是应用程序的核心，它主要负责处理和管理应用程序的数据、逻辑和规则。模型通常表示为一个类或一组类，可以连接到实际数据源，例如数据库、文件或网络服务。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在这个模型示例中，我们定义了一个Person类，它有Name和Age属性，并且它们都可以被读取和写入。任何与Person数据相关的任务都应该由Person类处理。

2. 视图模型（ViewModel）

视图模型是模型和视图之间的桥梁，它主要负责将模型的数据和业务逻辑映射到视图中。视图模型通常也表示为一个类，它包含一组属性、命令和事件，用于处理用户的输入和请求。

public class PersonViewModel : INotifyPropertyChanged
{
    private Person _person;
    public event PropertyChangedEventHandler PropertyChanged;

    public string Name
    {
        get { return _person.Name; }
        set
        {
            if (_person.Name != value)
            {
                _person.Name = value;
                NotifyPropertyChanged("Name");
            }
        }
    }

    public int Age 
    {
        get { return _person.Age; }
        set 
        {
            if (_person.Age != value)
            {
                _person.Age = value;
                NotifyPropertyChanged("Age");
            }
        }
    }

    public PersonViewModel()
    {
        _person = new Person();
    }

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在这个视图模型示例中，我们定义了一个PersonViewModel类，它包含一个Person对象，并且定义了Name和Age属性。我们在属性中添加了INotifyPropertyChanged接口，这样当属性值发生更改时，它会触发属性更改事件。

3. 视图（View）

视图是用户界面的呈现方式，它可以是一个窗口、页面或控件。视图只负责呈现数据，而不负责任何业务逻辑，因为这些逻辑已经在视图模型中实现了。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding PersonViewModel}">
    <Grid>
        <TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="5"/>
        <TextBox Text="{Binding Name}" Grid.Row="0" Grid.Column="1" Margin="5"/>
        <TextBlock Text="Age:" Grid.Row="1" Grid.Column="0" Margin="5"/>
        <TextBox Text="{Binding Age}" Grid.Row="1" Grid.Column="1" Margin="5"/>
    </Grid>
</Window>

在这个视图示例中，我们定义了一个窗口，并且绑定它到PersonViewModel。我们还使用绑定属性将视图中的元素与视图模型的属性绑定在一起，这样它们就可以直接在