WPF简介与基础开发

WPF简介与基础开发攻略

什么是WPF

Windows Presentation Foundation（WPF）是一种用于创建 Windows 桌面应用程序的 UI 框架。它是.NET Framework的一部分，提供了强大的 XAML 语言（可扩展应用程序标记语言）用于创建用户界面，同时还提供了许多功能强大的控件和视觉效果。

通过 WPF，开发者可以轻松地创建着色和渐变、立体效果、透明窗口、动画、图像和视频等各种丰富的 UI 并在 Windows 上进行呈现。WPF 支持以设备无关的方式在各种设备上呈现应用程序，从传统的 PC 上运行的应用程序到各种移动设备上运行的应用程序。

WPF基础开发

WPF应用程序的开发可以通过使用 Visual Studio 或者其他支持 WPF 开发的开发工具实现。WPF 回归了一切都是声明式的界面开发，不仅基于 XAML 定义了界面层的 Visual Tree 结构，而且通过 Code-Behind 控制了逻辑层和数据层的相关代码。

XAML介绍

XAML就是一种基于XML的标记语言，用于将应用程序的界面和操作行为定义为对象图和属性配置，内置了许多可用的标记和命名空间，可用于创建各种控件、绑定和布局功能等。以下是一个简单的 XAML 实例，用于在 WPF 程序中创建一个简单的 UI 界面：

<Window x:Class="WpfApplication.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="Click Me!" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

控件介绍

WPF框架自带许多控件，常用的控件包括Button按钮、TextBlock文本块、TextBox文本框、ComboBox下拉列表框、ListBox列表框等，可以通过 XAML 或者 Code-Behind 代码实现各种控件的自定义。

以下是一个简单的示例，实现了一个按钮的单击事件，并在消息框中显示“I'm clicked!”：

<Window x:Class="WpfApplication.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="Click Me!" HorizontalAlignment="Center" VerticalAlignment="Center"
                Click="Button_Click" />
    </Grid>
</Window>

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

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("I'm clicked!");
    }
}

上述代码中，我们在XAML中声明一个按钮控件，并为其定义了单击事件。然后在 Code-Behind 中实现了对应的事件处理方法。

数据绑定

在 WPF 中，数据绑定允许开发者将应用程序的数据与 UI 元素关联起来，以便随着数据的更新自动更新 UI。通过使用数据上下文和数据绑定表达式，可以在应用程序中轻松地建立数据绑定。以下是一个简单的数据绑定示例：

<Window x:Class="WpfApplication.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">
    <StackPanel>
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text="{Binding Age}" />
    </StackPanel>
</Window>

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

        DataContext = new Person
        {
            Name = "Tom",
            Age = 20
        };
    }
}

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

上述代码中，我们在 XAML 中使用数据绑定表达式 {Binding Name} 和 {Binding Age} 将数据模型（Person 类的属性）与两个文本块控件关联起来。然后在 Code-Behind 中为窗口指定了数据上下文。

示例说明

示例1：创建自定义控件

在 WPF 中，我们可以通过继承现有控件的方式，来创建自定义控件。以下是一个简单的例子，实现了一个名为 CircularProgressBar 的圆形进度条控件。

<UserControl x:Class="WpfApplication.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="100" Height="100">
    <Grid>
        <Canvas>
            <Ellipse x:Name="BackgroundEllipse" Stroke="Gray" StrokeThickness="6" />
            <Ellipse x:Name="ProgressBarEllipse" Stroke="Blue" StrokeThickness="10" />
        </Canvas>
    </Grid>
</UserControl>

public partial class CircularProgressBar : UserControl
{
    public CircularProgressBar()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty ProgressProperty =
        DependencyProperty.Register(
            "Progress", typeof(double), typeof(CircularProgressBar), 
            new PropertyMetadata(0.0, OnProgressChanged));

    public double Progress
    {
        get { return (double)GetValue(ProgressProperty); }
        set { SetValue(ProgressProperty, value); }
    }

    private static void OnProgressChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var progressBar = d as CircularProgressBar;
        if (progressBar != null)
        {
            progressBar.UpdateProgressBar();
        }
    }

    public void UpdateProgressBar()
    {
        double radians = (360 / 100.0) * Progress * (Math.PI / 180.0);
        double x = ((BackgroundEllipse.Width - ProgressBarEllipse.StrokeThickness) / 2.0) *
            Math.Cos(radians) + (BackgroundEllipse.Width / 2.0);
        double y = ((BackgroundEllipse.Height - ProgressBarEllipse.StrokeThickness) / 2.0) *
            Math.Sin(radians) + (BackgroundEllipse.Height / 2.0);

        ProgressBarEllipse.SetValue(Canvas.LeftProperty, x);
        ProgressBarEllipse.SetValue(Canvas.TopProperty, y);
    }
}

上述代码中，我们创建了一个名为 CircularProgressBar 的自定义控件，继承自 UserControl，包含了两个 Ellipse 控件来实现背景圆和进度条圆。同时定义了一个依赖属性 Progress，用于控制进度条显示进度。然后我们在 Code-Behind 中实现了 UpdateProgressBar 方法，用于根据当前进度更新进度条的位置。

示例2：使用数据模板

WPF 中的数据模板可以用于定义 UI 元素的显示方式。下面是一个简单的例子，使用数据模板来显示一个名为 Person 的数据模型。

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:Person}">
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Age}" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ContentControl Content="{Binding SelectedPerson}" />
    </Grid>
</Window>

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

        DataContext = new ViewModel();
    }
}

public class ViewModel : INotifyPropertyChanged
{
    private Person selectedPerson;

    public event PropertyChangedEventHandler PropertyChanged;

    public ViewModel()
    {
        People = new ObservableCollection<Person>
        {
            new Person { Name = "Tom", Age = 20 },
            new Person { Name = "Jerry", Age = 30 }
        };
    }

    public ObservableCollection<Person> People { get; set; }

    public Person SelectedPerson
    {
        get { return selectedPerson; }
        set 
        { 
            selectedPerson = value;
            NotifyPropertyChanged("SelectedPerson");
        }
    }

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

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

上述代码中，我们在 XAML 中定义了一个名为 Person 的数据模板，在 DataTemplate 标签中定义了如何显示 Person 类型的数据。然后在窗口中使用 ContentControl 控件来显示 SelectedPerson 属性值，并在 Code-Behind 中指定了数据上下文。当然，在真实的应用中，ViewModel 和 Model 层是可以随意组合的，只要 ViewModel 层能正常的数据绑定和呈现即可。