无法在 ListView 的 UWP 中使用自定义控件绑定属性

Question

I have a ListView in UWP which displays a list of custom controls CustomControl . Reading around I have seen that other users have face similar issues and their solution mostly revolved around setting the DataContext of their controls, but I cannot understand how I can do that in my example. In order to dynamically update the view I used DependencyProperties in my model which is the following:

    public class DataObject : DependencyObject
    {
        public string Name
        {
            get { return (string)GetValue(nameProperty); }
            set { SetValue(nameProperty, value); }
        }

        // Using a DependencyProperty as the backing store for name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty nameProperty =
            DependencyProperty.Register("Name", typeof(string), typeof(DataObject), new PropertyMetadata("Name"));
    }

Then in my main page I implemented the following logic to change the Name of my third element:

    public sealed partial class MainPage : Page
    {
        private readonly ObservableCollection<DataObject> dataList;

        public MainPage()
        {
            this.InitializeComponent();
            this.dataList = new ObservableCollection<DataObject>();

            for (int i = 0; i < 5; i++)
            {
                DataObject dataObject = new DataObject();
                dataObject.Name = "Item " + i.ToString();

                this.dataList.Add(dataObject);
            }
            DataListView.ItemsSource = dataList;

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var obj = dataList.ElementAt(2);

            obj.Name = "Hello!";

        }
    }

The XAML for the main page is the following:

<Page
    x:Class="ListViewTest.MainPage"
    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:controls="using:ListViewTest.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <ListView Name="DataListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <controls:CustomControl DisplayName="{Binding Name}"></controls:CustomControl>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Content="Button" HorizontalAlignment="Center" Height="92" Width="238"
                Click="Button_Click"/>
    </Grid>
</Page>

The custom control CustomControl is this:

namespace ListViewTest.Controls
{
    public sealed partial class CustomControl : UserControl
    {


        public string DisplayName
        {
            get { return (string)GetValue(DisplayNameProperty); }
            set { 
                SetValue(DisplayNameProperty, value);
                DisplayText.Text = value;
            }
        }

        // Using a DependencyProperty as the backing store for DisplayName.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DisplayNameProperty =
            DependencyProperty.Register("DisplayName", typeof(string), typeof(CustomControl), new PropertyMetadata("DisplayText"));


        public CustomControl()
        {
            this.InitializeComponent();
        }
    }

Its structure is very simple:

    <Grid>
        <Button Name="ClickButton" Content="Button" Margin="171,165,0,0" VerticalAlignment="Top"/>
        <TextBlock Name="DisplayText" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center"/>
    </Grid>

The problem is that when I click the button nothing happens and I am struggling to understand why.

Answer 1

DataObject shouldn't inherit from DependencyObject . It should be defined as a CLR object that implements INotifyPropertyChanged :

public class DataObject : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get { return _name; }
        set { _name = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Also, the setter of the CLR wrapper for the dependency property in CustomControls should only set the value of the dependency property. You could set the value of the TextBlock using a PropertyChangedCallback :

public sealed partial class CustomControl : UserControl
{
    public string DisplayName
    {
        get { return (string)GetValue(DisplayNameProperty); }
        set { SetValue(DisplayNameProperty, value); }
    }

    public static readonly DependencyProperty DisplayNameProperty =
        DependencyProperty.Register(nameof(DisplayName), typeof(string), typeof(CustomControl), 
            new PropertyMetadata("DisplayText", new PropertyChangedCallback(OnChanged)));

    private static void OnChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        CustomControl customControl = (CustomControl)d;
        d.DisplayText = e.NewValue as string;
    }

    public CustomControl()
    {
        this.InitializeComponent();
    }
}