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>

然后在其后台添加依赖属性相关代码：

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）设置需要绑定的值：

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[];

        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 了。

巴特西

WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘

最新文章

热门文章