WPF wrappanel how to pass data to a usercontrol - wpf

Question

Im not 100% this goes with the whole wpf mvvm design pattern but I'm lost on how to do it.
I have a main view in this main view i have ObservableCollection called 'DemoClass_List', each element in the list contains a class 'DemoClass'.
In the wpf for this view i have wrappanel, what i want is for the wrappanel to display a usercontrol for each element, but also to pass the individual class to the element.
Code is below.
***UserControl
public partial class DemoClass_Display : UserControl
{
public DemoClass _demoClass;
public DemoClass_Display()
{
InitialiseComponent();
//Do processing on _demoClass and display relevant info
}
}
***MainView WPF Snippet
<ItemsControl ItemsSource = "{Binding DemoClass_List}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<usercontrol:DemoClass_Display/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The question is, how do i fill the item "public DemoClass _demoClass;" in the usercontrol?
****************Edit****************
This code crashes
****MainView
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public static ObservableCollection<DemoClass> DemoClass_List { get; set; }
public Window1()
{
DemoClass_List = new ObservableCollection<DemoClass>();
DemoClass dc1 = new DemoClass();
dc1.Property1 = 1;
dc1.Property2 = 1;
dc1.Property3 = 1;
DemoClass dc2 = new DemoClass();
dc2.Property1 = 2;
dc2.Property2 = 2;
dc2.Property3 = 2;
DemoClass dc3 = new DemoClass();
dc3.Property1 = 3;
dc3.Property2 = 3;
dc3.Property3 = 3;
DemoClass_List.Add(dc1);
DemoClass_List.Add(dc2);
DemoClass_List.Add(dc3);
InitializeComponent();
}
}
}
***MainViewWPF
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UserControl="clr-namespace:WpfApplication1"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="Window1" Height="300" Width="300">
<Grid>
<ItemsControl ItemsSource="{Binding DemoClass_List}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<UserControl:DemoClass_Display demoClass="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
***UserControl
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for DemoClass_Display.xaml
/// </summary>
public partial class DemoClass_Display : UserControl
{
public static readonly DependencyProperty DemoClassProperty = DependencyProperty.Register("demoClass", typeof (DemoClass), typeof (DemoClass_Display), new PropertyMetadata(default(DemoClass)));
public DemoClass demoClass
{
get { return (DemoClass)GetValue(DemoClassProperty); }
set { SetValue(DemoClassProperty, value); }
}
public DemoClass_Display()
{
InitializeComponent();
Console.WriteLine(demoClass.Property1);
}
}
}
The console crashes as demoClass hasnt been set

Answer 1

You need to create a dependency property in your UserControl:
public static readonly DependencyProperty DemoClassProperty = DependencyProperty.Register(
"DemoClass", typeof (DemoClass), typeof (DemoClass_Display), new PropertyMetadata(default(DemoClass), OnDemoClassChanged));
public DemoClass DemoClass
{
get { return (DemoClass) GetValue(DemoClassProperty); }
set { SetValue(DemoClassProperty, value); }
}
private static void OnDemoClassChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
var newDemoClass = e.NewValue as DemoClass;
var demoClassDisplay = (DemoClass_Display)dependencyObject; // you can access this UserControl this way.
if(newDemoClass != null)
{
//Do processing on newDemoClass and display relevant info
}
}
And then you can bind the current item of the ItemsControl in the DataTemplate:
<ItemsControl.ItemTemplate>
<DataTemplate>
<usercontrol:DemoClass_Display DemoClass="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
So inside the UserControl you will use the DemoClass property instead of the field _demoClass. I think that can even be deleted.