WPF--DataContext

本文深入探讨WPF应用程序的架构,重点讲解MVVM模式下UI层与数据层的分离,详细阐述DataContext的作用及绑定机制,揭示如何通过绑定在UI上展示数据层信息。

在WPF中,应用程序有两层:UI层和Data层。这里新建一个项目说明哪些是UI层,哪些是数据层。

UI层很明显,就是用户看到的界面。但是数据层并不是下图所示:

上图中是UI层view的后台代码。当然,你可以使用事件的方式把所有的业务逻辑代码写到这里,但是我们采用MVVM的时候业务逻辑是与这里解耦的,数据层是DataContext,此时并没有指定。
接下来我们新建个目录,然后添加个类文件:

然后指定VM类为DataContext:

此时我们才算为MVVM模式的wpf应用程序创建了数据层,也就是MainViewModel类。

默认,应用程序的数据层(DataContext)是null,我们可以使用DataContext属性对其进行设置。
除非另行指定,否则所有UI对象都将从其父对象继承其DataContext
实际上DataContext才算是我们的实际应用程序(业务逻辑),他通常由ViewModels和Models组成。
UI对象(如按钮,标签,DataGrids甚至Windows)实际作用是允许用户轻松与DataContext交互。
当你写<Label Name="myLabel" Content="{Binding Path=Name}" />你是绑定到myLabel.DataContext.Name,而不是myLabel.Name。

<!-- 注意此时我已经在初始化代码中设置DataContext 为 ClassA,DataContext = new ClassA  -->
<Window x:Name="MyWindow"> 
 
    <!-- DataContext 没有被指定,所以继承自父类
         的 DataContext,也就是 ClassA -->
    <StackPanel> 
 
        <!-- DataContext 继承自父类,也就是 
             ClassA, 所以这里会显示 ClassA.Name -->
        <Label Content="{Binding Name}" />
 
         <!-- DataContext 仍然是ClassA, 但是我们通过binding设置为ClassA.ClassB-->
        <StackPanel DataContext="{Binding ClassB}">
 
            <!-- DataContext 继承自父类,也就是ClassB,所以这里会显示 ClassB.Name -->
            <Label Content="{Binding Name}" />
 
            <!-- DataContext i仍然是 ClassB, 但是我们binding 到了Window's DataContext.Name, 也就是 ClassA.Name -->
            <Label Content="{Binding 
                       ElementName=MyWindow, 
                       Path=DataContext.Name}" /> 
        </StackPanel>
 
        <!-- We've left the StackPanel with its DataContext 
             bound to ClassB, so this Label's DataContext 
             is ClassA (inherited from parent StackPanel), 
             and we are binding to ClassA.ClassB.Name -->
        <Label Content="{Binding ClassB.Name}" />
    </StackPanel>
</Window>

所有基本绑定都在UI对象的数据层(DataContext)中寻找它们的值。
综上所述,WPF应用程序具有两层:UI层和数据层。应用程序的数据层以null开头,可以使用DataContext属性设置。未设置DataContext的UI对象将从其父对象继承其数据层。绑定用于在数据层中查找值,并在UI层中显示它们。
使用MVVM设计模式时,数据层是您的应用程序,而UI层只是提供了一种用户友好的方式来访问数据层。

datacontext的绑定

pis:(直接在XAML上指定根datacontext貌似不行,必须通过代码或者引入资源(此方式还未实践)的方式来指定,后续子元素的datacontext可以通过binding来指定则是可行的,它们的根都是之前设定的根datacontext)
可以在view的后台代码中手动指定例如在构造函数中:

var cont = new MainViewModle();
DataContext = cont;

 

另外也可以写到资源中,首先需要写一个viewmodel类:

public MainViewModel()
{
    plusCommand = new PlusCommand(this);
}

 

然后把vm类放到资源中:

<!--需要指定名称空间vm:
xmlns:vm="clr-namespace:SimpleCommandDemoApp.ViewModels"-->
<UserControl.Resources>
    <vm:CalculatorViewModel x:Key="calculatorVM" />
</UserControl.Resources>

 

最后就可以在xaml中指定了:

DataContext="{Binding Source={StaticResource calculatorVM}}"

 

WPF使用DataContext将数据层与UI层实现了解耦,那么他们之间是如何交互的?实际上上面已经略有涉猎,那就是Binding,上面实例的ClassA、ClassB的Name就是通过Binding来展示到UI上的,详细介绍在下一篇文章中再做说明。

### 使用LiveCharts库在WPF中创建饼图 为了在WPF应用程序中使用LiveCharts库来创建饼图,可以遵循以下方法。此过程涉及安装必要的NuGet包并配置XAML文件以及后台C#逻辑。 #### 安装LiveCharts NuGet包 首先,在Visual Studio中的解决方案资源管理器右键单击项目名称,选择“Manage NuGet Packages”,搜索`LiveCharts.Wpf`并安装该软件包[^4]。 #### XAML设置 接下来,在项目的XAML文件中添加命名空间声明以便访问LiveCharts控件: ```xml <Window x:Class="YourNamespace.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"> <!-- Other elements --> </Window> ``` 定义一个用于显示数据的PieChart对象,并通过绑定到视图模型的数据源填充它: ```xml <lvc:PieChart Series="{Binding SeriesCollection}" /> ``` #### 后台代码实现 在对应的.xaml.cs文件内初始化图表所需的数据集合。通常情况下是在构造函数里完成这项工作: ```csharp using System.Collections.Generic; using LiveCharts.Defaults; public partial class MainWindow : Window { public SeriesCollection SeriesCollection { get; set; } public MainWindow() { InitializeComponent(); SeriesCollection = new SeriesCollection { new PieSeries { Title = "Married", Values = new ChartValues<double> { 3 } }, new PieSeries { Title = "Single", Values = new ChartValues<double> { 7 } } }; DataContext = this; } } ``` 上述例子展示了如何简单地向饼图添加两个系列——已婚人士占比3%,单身者占7%。实际应用时可以根据需求调整这些数值和标签[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值