WPF 用戶控件的自定義依賴屬性在 MVVM 模式下的使用備忘

依賴屬性相當於擴充了 WPF 標簽的原有屬性列表，並可以使用 WPF 的綁定功能，可謂是十分方便的；用戶控件則相當於代碼重用的一種方式；以上幾點分開來還是比較好理解的，不過要用到MVVM 模式中，還是要探索一番的。

我們先新建一個用戶控件（UC_FoodsPanel.xaml），里面放一個 StackPanel：

 

 

 

 

 

 

XHTML

 

<UserControl x:Class="Note.UC_FoodsPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel x:Name="SpFoods" MinWidth="620"/>
</UserControl>

然后在其后台添加依賴屬性相關代碼：

C#

public List<UC_FoodItem> Items
{
    get => (List<UC_FoodItem>)GetValue(ItemsProperty);
    set => SetValue(ItemsProperty, value);
}
 
// Using a DependencyProperty as the backing store for Items.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ItemsProperty =
    DependencyProperty.Register(nameof(Items), typeof(List<UC_FoodItem>), typeof(UC_FoodsPanel),
        new PropertyMetadata(null, PropertyChangedCallback, null));
 
private static void PropertyChangedCallback(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    if (args.NewValue is List<UC_FoodItem> newValue)
    {
        try
        {
            var control = obj as UC_FoodsPanel;
            control.SpFoods.Children.Clear();
 
            foreach (var item in newValue)
            {
                control.SpFoods.Children.Add(item);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.ToString());
            MessageBox.Show($"載入數據出錯：{ex.Message}");
        }
    }
}

 

依賴屬性相關內容可參考網上的《WPF 系列 —— 控件添加依賴屬性 – 朝兮兮 – 博客園》 一文，添加依賴屬性的方法為 —— 輸入 propdp 再雙擊 tab 鍵。

 上面代碼中，我們添加的依賴屬性為 Items，是一個 UC_FoodItem 類的列表。關鍵在於屬性改變時的回調函數 PropertyChangedCallback，其 obj 參數代表屬性綁定的控件，即此處的 UC_FoodsPanel，args 參數中有 OldValue 和 NewValue，分別代表屬性改變前后的值。此處即取改變后的值 —— 一個列表 —— 賦給用戶控件中的 StackPanel。

 這樣之后，我們在其它頁面（Views\\MainWindowView.xaml）使用這個用戶控件的時候，就可以使用 Items 屬性了：

XHTML

<note:UC_FoodsPanel Items="{Binding Items}"></note:UC_FoodsPanel>

然后在這個頁面的 ViewModel 中（ViewModels\\MainWindowViewModel.cs）設置需要綁定的值：

 

C#

 

private List<UC_FoodItem> _items = new List<UC_FoodItem>();
public List<UC_FoodItem> Items
{
    get => _items;
    set => SetProperty(ref _items, value);
}
 
protected void LoadFoods()
{
    try
    {
        DataTable dt = _sqliteHelper.RunToDataSet("select * from Notes order by ID desc").Tables[0];
 
        var items = new List<UC_FoodItem>();
        foreach (DataRow row in dt.Rows)
        {
            UC_FoodItem foodItem = new UC_FoodItem();
            foodItem.lab_id.Content = row["ID"].ToString();
            foodItem.lab_foodName.Content = row["Title"].ToString();
            foodItem.lab_foodPrice.Content = row["Type"].ToString();
            foodItem.lab_foodIntro.Content = row["Content"].ToString();
 
            items.Add(foodItem);
        }
 
        Items = items;
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex);
        MessageBox.Show($"載入數據出錯：{ex.Message}");
    }
}

 

ViewModel 中的綁定屬性使用了 INotifyPropertyChanged 模式，此處是使用了 Prism 框架的寫法（VM 繼承了 BindableBase 類）。然后注意到這里新建了一個局部變量 items，填充完數據才賦值給 Items，這並不是多此一舉，因為不這樣的話，該屬性的改變狀態（PropertyChangedCallback）就無法觸發。

 

最后但同樣重要的是：既然這個用戶控件這么簡單，為什么不直接把里面的內容包括依賴屬性寫在使用的頁面呢？因為那樣的話，由於 MVVM

模式的原因，頁面的 DataContext 已經指定為相關的 ViewModel 了，那么寫在后台的依賴屬性就找不到 DataContext 了。