在设计时将数据绑定到 DataGrid [英] Binding data to a DataGrid on design time

问题描述

我正在学习 XAML，这是一个基本问题.
我想绑定数据，以便通过 XAML 在设计时生成它(在运行时它工作正常).

I am learning XAML and this is a basic question.
I want to bind data so it would be generated on design time (on runtime it works fine) via XAML.

<Window x:Class="GridTest.MainWindow"
        Name="This"
        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>
        <DataGrid AutoGenerateColumns="False"
                  Height="200"
                  Width="308"
                  HorizontalAlignment="Left"
                  Margin="25,23,0,0"
                  Name="dataGrid1"
                  VerticalAlignment="Top"
                  ItemsSource="{Binding ElementName=This, Path=MyData}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="No"
                                    Width="Auto"
                                    Binding="{Binding Id}"
                                    IsReadOnly="True" />
                <DataGridTextColumn Header="Title"
                                    Binding="{Binding Title}"
                                    IsReadOnly="True" />
                <DataGridTextColumn Header="Description"
                                    Binding="{Binding Description}"
                                    IsReadOnly="True" />
            </DataGrid.Columns>
        </DataGrid>

背后的代码

public partial class MainWindow : Window
{
    public List<Item> MyData
    {
        get
        {
            return myData;
        }

    }
    List<Item> myData;

    public MainWindow()
    {
        myData = new List<Item>
        {
            new Item{ Id=5, Description="Brown Car", Title="my car"},
            new Item{Id=1,Description="sweet dog", Title="my dog"},
        };
        InitializeComponent();
    }
}

public class Item
{
    public string Title
    {
        set;
        get;
    }
    public string Description
    {
        set;
        get;
    }
    public int Id
    {
        set;
        get;
    }
}

推荐答案

顺序如下:

1) 将代码从 MainWindow 类移动到自定义类并设置 DataContext 属性:

1) Move code from the MainWindow class to a custom class and set the DataContext property:

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

        this.DataContext = new MainWindowViewModel();
    }
}

public class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        myData = new List<Item>
        {
            new Item{ Id=5, Description="Brown Car", Title="my car"},
            new Item{Id=1,Description="sweet dog", Title="my dog"},

        };
    }

    public List<Item> MyData
    {
        get
        {
            return myData;
        }

    }
    List<Item> myData;
}

2) 改变DataGrid的绑定:

ItemsSource="{Binding MyData}"

3) 添加名为 DataGridSample.xaml 的新 ResourceDictionary，打开其属性(右键单击 -> 属性)，将 BuildAction 属性设置为 DesignData 并清除CustomTool 属性的值.

3) Add new ResourceDictionary with the name DataGridSample.xaml, open its properties (Right Click -> Properties), set the BuildAction property to the DesignData and clear the value of the CustomTool property.

4) 复制此代码，但将名称空间 vm 从 WpfApplication1 更改为您的名称:

4) Copy this code, but change the namespace vm from the WpfApplication1 to your one:

<vm:MainWindowViewModel xmlns:vm="clr-namespace:WpfApplication1">
    <vm:MainWindowViewModel.MyData>
        <vm:Item Id="1" Title="My dog" Description="Sweet dog" />
        <vm:Item Id="5" Title="My car" Description="Brown car" />
    </vm:MainWindowViewModel.MyData>
</vm:MainWindowViewModel>

5) 返回到 MainWindow.xaml 并将下一行添加到 Window 元素，其中所有声明都是:

5) Return to the MainWindow.xaml and add next lines to the Window element where all the declarations are:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DataContext="{d:DesignData Source=DataGridSample.xaml}"

之后你可以切换到设计模式，你会看到有两行的数据网格.

After that you can switch to the design mode and you will see the datagrid with two lines.

这篇关于在设计时将数据绑定到 DataGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！