Windows Phone 10 Xaml ListView.ItemTemplate绑定用户控件对象属性

Question

I am trying to use a custom control in ListView.ItemTemplate. This custom control has an object property. I'm not able to bind to this object property. I tried the following but throws error.

My requirement is, MyDataRowProperty needs to be bound to each MyDataRow in the List assigned to listView.ItemsSource.

    <ListView x:Name="listView" ItemsSource="{Binding}">
        <ListView.ItemTemplate>
            <DataTemplate>
                    <!--<Controls:DetailItemControl Height="105" Width="400" MyDataRowProperty="{Binding RelativeSource={RelativeSource Self}}"></Controls:DetailItemControl>-->
                    <Controls:DetailItemControl Height="105" Width="400" MyDataRowProperty="{Binding}"></Controls:DetailItemControl>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Code behind:

List<MyDataRow> rows = new List<MyDataRow>();
rows = GetData();
listView.ItemsSource = rows;

MyControl.xaml

<UserControl
    x:Class="MyProject.Controls.MyControl"
    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"
    mc:Ignorable="d"
    d:DesignHeight="110"
    d:DesignWidth="400">

    <Grid>
                    <TextBlock x:Name="tblDescription" />
    </Grid>
</UserControl>

MyControl.xaml.cs:

    private MyDataRow _MyDataRow;
    public MyDataRowProperty MyDataRow
    {
        get { return _MyDataRow; }
        set {
            _MyDataRow = value;
            if (_MyDataRow != null)
            {
    tblDescription.Text = _MyDataRow.Description
            }
        }
    }

MyDataRow.cs

public class MyDataRow
{
    public string Description { get; set; }
}

Answer 1

There are some issues to be fixed. First of all you should bind items from your ViewModel, not from code behind. In your ViewModel implement the INotifyPropertyChanged interface. It should look like this:

public class YourViewModel: INotifyPropertyChanged {
    public event PropertyChangedEventHandler PropertyChanged;
    private ObservableCollection <MyDataRow> rows;
    public ObservableCollection<MyDataRow> Rows 
    {
        get {return rows;}
        set {
            Rows = value;
            NotifyPropertyChanged("Rows");
        }
    }
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
   ....
}

In your component you should create a dependency property:

  public string MyDataRow
        {
            get { return (string)GetValue(MyDataRowProperty); }
            set { SetValue(MyDataRowProperty, value); }
        }

    public static readonly DependencyProperty MyDataRowProperty = DependencyProperty.Register("MyDataRow", typeof(string), typeof(MyControl));        

After that in your View's code behind set the datacontext, then you can Bind it in the xaml.

<ListView x:Name="listView" ItemsSource="{Binding Rows}">
        <ListView.ItemTemplate>
            <DataTemplate>
                    <Controls:DetailItemControl Height="105" Width="400" MyDataRow="{Binding Description}"></Controls:DetailItemControl>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Hope this helps. Feel free to ask. I didn't run this code, so check the syntax, but the idea is there. Kristof