WPF 實作用例入門

本逐步解說示範如何在「DATAGRID」表單中,串接至 WPF 控制項。這次依照官網範例使用 Entity Framework 套件,以資料庫中的資料填入物件、追蹤變更,以及將資料保存到資料庫。

此模型會定義兩種關聯類型: 類別  和 產品  。 WPF 資料系結架構會啟用相關物件之間的導覽:主視圖會依照寫入資料庫的數值進行更新。

環境

安裝 Visual Studio 2019 並在安裝選取.NET 桌面工作模塊,請參閱VS安裝相關連結

建立專案

  1. 開啟 Visual Studio
  2. 建立 WPF

安裝 Entity Framework NuGet 套件

1.在方案管理員處按下右鍵,選擇  [管理解決方案的 NuGet 套件…]

2. 搜尋方塊中鍵入 entityframeworkcore.sqlite

3.接著進行安裝完後,尋找 entityframeworkcore.proxies 並安裝 microsoft.entityframeworkcore

定義模型

我們先來定義一下產品模型。我們將檔案名稱指定為”Product.cs “

product.cs

namespace GetStartedWPF_DatabaseLink
{
    public class Product
    {
        public int ProductId { get; set; }
        public string Name { get; set; }

        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }
}

category.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace GetStartedWPF_DatabaseLink
{
    public class Category
    {
        public int CategoryId { get; set; }
        public string Name { get; set; }

        public virtual ICollection<Product>
            Products
        { get; private set; } =
            new ObservableCollection<Product>();
    }
}

ProductContext.cs

using Microsoft.EntityFrameworkCore;

namespace GetStartedWPF_DatabaseLink
{
    public class ProductContext : DbContext
    {
        public DbSet<Product> Products { get; set; }
        public DbSet<Category> Categories { get; set; }

        protected override void OnConfiguring(
            DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlite("Data Source=test.db");
            //這裡可以指定你要建立的DB,如果沒有指定位置就是在該方案目錄下。
            optionsBuilder.UseLazyLoadingProxies();
            base.OnConfiguring(optionsBuilder);
        }
    }
}

控制項 XML

先將CollectionViewSource 綁定到 Windows 下。

MainWindow.xaml

<Window x:Class="GetStartedWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GetStartedWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
    <Window.Resources>
        <CollectionViewSource x:Key="categoryViewSource"/>
        <CollectionViewSource x:Key="categoryProductsViewSource" 
                              Source="{Binding Products, Source={StaticResource categoryViewSource}}"/>
    </Window.Resources>
<DataGrid x:Name="categoryDataGrid" AutoGenerateColumns="False" 
          EnableRowVirtualization="True" 
          ItemsSource="{Binding Source={StaticResource categoryViewSource}}" 
          Margin="13,13,43,229" RowDetailsVisibilityMode="VisibleWhenSelected">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding CategoryId}"
                            Header="Category Id" Width="SizeToHeader"
                            IsReadOnly="True"/>
        <DataGridTextColumn Binding="{Binding Name}" Header="Name" 
                            Width="*"/>
    </DataGrid.Columns>
</DataGrid>
<DataGrid x:Name="productsDataGrid" AutoGenerateColumns="False" 
          EnableRowVirtualization="True" 
          ItemsSource="{Binding Source={StaticResource categoryProductsViewSource}}" 
          Margin="13,205,43,108" RowDetailsVisibilityMode="VisibleWhenSelected" 
          RenderTransformOrigin="0.488,0.251">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding CategoryId}" 
                            Header="Category Id" Width="SizeToHeader"
                            IsReadOnly="True"/>
        <DataGridTextColumn Binding="{Binding ProductId}" Header="Product Id" 
                            Width="SizeToHeader" IsReadOnly="True"/>
        <DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="*"/>
    </DataGrid.Columns>
</DataGrid>
<Button Content="Save" HorizontalAlignment="Center" Margin="0,240,0,0" 
        Click="Button_Click" Height="20" Width="123"/>

程式碼下載連結:https://github.com/FredericChang/GetStartedWPF_DatabaseLink

控制程式碼

MainWindow.xaml.cs

using Microsoft.EntityFrameworkCore;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;

namespace GetStartedWPF_DatabaseLink
{

    public partial class MainWindow : Window
    {
        private readonly ProductContext _context =
            new ProductContext();
        private CollectionViewSource categoryViewSource;
        public MainWindow()
        {
            InitializeComponent();
            categoryViewSource =
                (CollectionViewSource)FindResource(nameof(categoryViewSource));
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            _context.Database.EnsureCreated();
            _context.Categories.Load();
            categoryViewSource.Source =
                _context.Categories.Local.ToObservableCollection();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            _context.SaveChanges();
            categoryDataGrid.Items.Refresh();
            productsDataGrid.Items.Refresh();
        }

        protected override void OnClosing(CancelEventArgs e)
        {
            _context.Dispose();
            base.OnClosing(e);
        }
    }
}

測試 WPF 應用程式

按下 F5 或選擇 [ Debug > 開始調試 程式],以編譯並執行應用程式。

Posted inC#