UWP数据绑定

蔚落 2021-10-24 00:18 420阅读 0赞

### 第一种方式 ###

### 在MainPage.xaml.cs里： ###

using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;
    namespace TestDataTemplate
    {
        public class Student_DataType //第一步，设置数据属性
        {
            public int Number { get; set; }
            public string Name { get; set; }
            public string From { get; set; }
        }
    
        public class StudentManager  //第二步，添加数据
        {
            public static List<Student_DataType> GetStudent()
            {
                var student = new List<Student_DataType>();
                student.Add(new Student_DataType { Number = 1, Name = "张三", From = "广州" });
                student.Add(new Student_DataType { Number = 2, Name = "李四", From = "长沙" });
                student.Add(new Student_DataType { Number = 3, Name = "王五", From = "深圳" });
                return student;
            }
        }
            public sealed partial class MainPage : Page
        {
            private List<Student_DataType> student_ItemsSource; //第三步，绑定数据
            public MainPage()
            {
                this.InitializeComponent();
                student_ItemsSource = StudentManager.GetStudent();
            }
        }
    }

### 在MainPage.xaml里： ###

### 第二种方式 ###

### 当GridView控件数据模板不在控件里，MainPage.xaml需要修改代码如下： ###

### 第三种方式 ###

### 当GridView控件数据模板不在MainPage.xaml里 ###

1.在“解决方案”中点击选中项目名称，新建两个文件夹，分别是“DataStyles”和Models。“DataStyles”文件夹用于存放控件模板样式xaml，Models用于存放数据属性的类。

2.在DataStyles文件夹新建“Student\_DataType”类（c\#类），在Models文件夹新建“DictionaryStudent.xaml”（资源字典）。

如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70][]

### 在Student\_DataType.cs： ###

namespace TestDataTemplate.Models
    {
        public class Student_DataType
        {
            public int Number { get; set; }
            public string Name { get; set; }
            public string From { get; set; }
        }
    
    }

### 在DictionaryStudent.xaml： ###

### 在MainPage.xaml.cs： ###

using System.Collections.Generic;
    using TestDataTemplate.Models;
    using Windows.UI.Xaml.Controls;
    
    namespace TestDataTemplate
    {
        public sealed partial class MainPage : Page
        {
            private List<Student_DataType> student_ItemsSource;
            public MainPage()
            {
                this.InitializeComponent();
                student_ItemsSource.Add(new Student_DataType { Number = 1, Name = "张三", From = "广州" });
                student_ItemsSource.Add(new Student_DataType { Number = 2, Name = "李四", From = "长沙" });
                student_ItemsSource.Add(new Student_DataType { Number = 3, Name = "王五", From = "深圳" });
            }
        }
    }

### 在MainPage.xaml： ###

### 第三种是自己想出来的方式，出现了问题如下： ###

1.分析：明明引用到了Models文件夹里的命名空间，写代码时dataSource还自动识别出Student\_DataType，却提示如下问题。

我猜测的问题是：  
x:DataType不能再资源字典文件里引用自定义的数据类型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70 1][]

2.分析：在网上找了问题说是复制粘贴代码或者文件就会导致识别不了InitalizeComponent，但这是我明明亲手敲的代码，而且之前写代码时并没有报错之类的，就过了一段时间，居然就识别不了InitalizeComponent。点击“显示可能的修补程序”，却没有发现可引用的东西。

问题已经找到：  
由于资源字典文件x:DataType里无法找到Student\_DataType名称，而导致初始化控件时而报错。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70 2][]

第三种方式，我尝试了半个小时都未能解决这个问题。由于刚接触UWP，很多地方以及环境和开发文档难免会有一些差别。若有大佬知道其中原因，请多多指教，谢谢！

效果图（没有用到第三种方式）

![20190818072115510.png][]

数据绑定：  
[https://www.cnblogs.com/cjw1115/p/5243200.html][https_www.cnblogs.com_cjw1115_p_5243200.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70]: /images/20211023/674c75c49aaa48279b48320cf3016a48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70 1]: /images/20211023/662d044270f541b2b483302a70c91918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4xMDgzMzc2NTEx_size_16_color_FFFFFF_t_70 2]: /images/20211023/43ecf674ef194a55855fd904d438cbad.png
[20190818072115510.png]: /images/20211023/89b05b925c964478be8671e15a9062b0.png
[https_www.cnblogs.com_cjw1115_p_5243200.html]: https://www.cnblogs.com/cjw1115/p/5243200.html