将 WPF DataGrid 升级为 UWP 支持的 DataGrid

Question

我正在将一个 WPF 应用程序升级到 UWP，但我一直在升级 DataGrid 控件。我正在尝试升级 System.Windows.Controls.DataGrid（旧的 WPF 控件）-> Microsoft.Toolkit.Uwp.UI.Controls.DataGrid（新的 MS 推荐社区控件）

旧版本工作正常。它从 .NET DataTable 填充网格。 XAML:

<DataGrid SelectionMode="Single" SelectionChanged="dataGridSongs_SelectionChanged" BorderThickness="1" BorderBrush="LightGray" Margin="0 0" IsReadOnly="True" GridLinesVisibility="None" Name="dataGridSongs" ItemsSource="{Binding}">
</DataGrid>

后面的代码：

public MainWindow()
{
    initializing = true;
    InitializeComponent();
    DataTable dt = dbHelper.GetAllSongs();
    dataGridSongs.DataContext = dt.DefaultView;
    dataGridSongs.HeadersVisibility = DataGridHeadersVisibility.None;
    initializing = false;
}

新的 UWP DataGrid 给我一个错误： “BindingExpression 路径错误：'Item' 属性未在 'System.Data.DataRowView' 上找到” 网格中填充了一些奇怪的数据：

新的 UWP 应用程序 XAML：

<controls:DataGrid x:Name="dataGridSongs" ItemsSource="{Binding}">
</controls:DataGrid>

后面的代码：

public MainPage()
{
    initializing = true;
    this.InitializeComponent();
    DataTable dt = dbHelper.GetAllSongs();
    dataGridSongs.DataContext = dt.DefaultView;
    //dataGridSongs.ItemsSource = dt.DefaultView;
}

我假设我用错误的对象填充了网格，但是，我找不到这个简单场景的任何示例。

Answer 1

您可以参考以下示例，其中显示了如何将 DataGrid 绑定到数据源：

public class Customer
{
    public String FirstName { get; set; }
    public String LastName { get; set; }
    public String Address { get; set; }
    public Boolean IsNew { get; set; }

    public Customer(String firstName, String lastName,
        String address, Boolean isNew)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Address = address;
        this.IsNew = isNew;
    }
}
public class ViewModel
{
    private List<Customer> m_customers;
    public List<Customer> Customers { get { return m_customers; }
    }
    public ViewModel()
    {
        m_customers = new List<Customer>(new Customer[4] {
        new Customer("A.", "Zero",
            "12 North Third Street, Apartment 45",
            false),
        new Customer("B.", "One",
            "34 West Fifth Street, Apartment 67",
            false),
        new Customer("C.", "Two",
            "56 East Seventh Street, Apartment 89",
            true),
        new Customer("D.", "Three",
            "78 South Ninth Street, Apartment 10",
            true)
    });
    }
}

主页class

public sealed partial class MainPage : Page
{
    public ViewModel MyViewModel;
    public MainPage()
    {
        this.InitializeComponent();
        MyViewModel = new ViewModel();
    }
}

MainPage.xaml

    <controls:DataGrid x:Name="dataGrid"  AutoGenerateColumns="True"
                       ItemsSource="{x:Bind MyViewModel.Customers}">
    </controls:DataGrid>

您可以参考 documetn 以获取有关 DataGrid 中数据绑定和自定义列的更多信息。

Answer 2

UWP 社区工具包 DataGrid 控件不支持为 DataTable 的 DataView 自动生成列。

不过您可以自己创建列：

dataGridSongs.Columns.Clear();
dataGridSongs.AutoGenerateColumns = false;
for (int i = 0; i < dt.Columns.Count; i++)
{
    dataGridSongs.Columns.Add(new DataGridTextColumn()
    {
        Header = dt.Columns[i].ColumnName,
        Binding = new Binding { Path = new PropertyPath("[" + i.ToString() + "]") }
    });
}

var sourceCollection = new ObservableCollection<object>();
foreach (DataRow row in dt.Rows)
    sourceCollection.Add(row.ItemArray);

dataGridSongs.ItemsSource = sourceCollection;

将 WPF DataGrid 升级为 UWP 支持的 DataGrid

Upgrading WPF DataGrid to UWP Supported DataGrid

c#

wpf

xaml

datagrid

uwp