Binding a property inside observerList in wpf - wpf

I am writing an application in C#, WPF, XAML using MVVM patterm.
After many examples that I founded online the data that I try to Bind to the UI is not shown in the screen.
My architecture is : In the MainViewModel I have an ObserverList from type family,
in Family class I have an ObserverList from type Child,
in Child class I have Name.
How to Bind the Child Name in to TextBlock?
Some examples that I founded:
https://msdn.microsoft.com/en-us/library/aa970558%28v=vs.110%29.aspxv
<Window x:Class="DataTemplates.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DataTemplates"
Title="MainWindow"
Height="350"
Width="525">
<Window.Resources>
<DataTemplate x:Key="MyDataTemplate"
DataType="local:MyData">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="First Name: " />
<TextBlock Grid.Column="1"
Text="{Binding Path=FirstName}" />
<TextBlock Grid.Column="2"
Text="Last Name: " />
<TextBlock Grid.Column="3"
Text="{Binding Path=LastName}" />
<CheckBox Grid.Column="4"
Content="Is Lecturer?"
IsEnabled="False"
IsChecked="{Binding Path=IsLecturer}" />
</Grid>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListBox ItemsSource="{Binding}"
ItemTemplate="{StaticResource MyDataTemplate}"
HorizontalContentAlignment="Stretch" />
<Button Content="Add"
Click="Button_Click" />
</StackPanel>
</Window>
and the code Behind
using System.Collections.ObjectModel;
using System.Windows;
namespace CollectionDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private ObservableCollection<MyData> _myCollection =
new ObservableCollection<MyData>();
public MainWindow()
{
InitializeComponent();
DataContext = _myCollection;
_myCollection.Add(
new MyData
{
FirstName = "Arik",
LastName = "Poznanski",
IsLecturer = true
});
_myCollection.Add(
new MyData
{
FirstName = "John",
LastName = "Smith",
IsLecturer = false
});
}
private int counter = 0;
private void Button_Click(object sender, RoutedEventArgs e)
{
++counter;
_myCollection.Add(
new MyData()
{
FirstName = "item " + counter,
LastName = "item " + counter,
IsLecturer = counter % 3 == 0
});
}
}
}
class my data form the example
public class MyData
{
public string User { get; set; }
public string Password { get; set; }
}

I made a custom example which matches your scenario, take a look at this.
MainWindow.xaml
<Window x:Class="SO.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock Height="30" Text="{Binding Parent.Child.SampleText}" HorizontalAlignment="Center"/>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MainViewModel obj = new MainViewModel();
this.DataContext = obj;
}
}
MainViewModel.cs
public class MainViewModel
{
private ParentModel _Parent = new ParentModel();
public ParentModel Parent
{
get { return _Parent; }
set { _Parent = value; }
}
public MainViewModel() //Data Load in Constructor
{
ChildModel child = new ChildModel();
child.SampleText = "Hi, I am Child!";
Parent.Child = child;
}
}
ParentModel.cs
public class ParentModel
{
private ChildModel _Child = new ChildModel();
public ChildModel Child
{
get { return _Child; }
set { _Child = value; }
}
}
ChildModel.cs
public class ChildModel
{
private string _SampleText ;
public string SampleText
{
get { return _SampleText; }
set { _SampleText = value; }
}
}
Corrections in your eg:
Your View and Code behind is perfect.
You didn't add properties in model class which is to be binded in UI.
class MyData
{
//public string User { get; set; }
//public string Password { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public bool IsLecturer { get; set; }
}

Related

WPF: MVVM: Bind selecteditem from inside an usercontrol to textbox

i am new to mvvm and hope, someone could help me to understand the following:
I have a Model, ViewModel and a View (UserControl), in the MainWindow there are 3 textboxes and the PersonView, which show several persons. This work. Now i want to select one of the persons (binded to SelectedPerson) and show the information in the 3 textboxes.
But i don't know, how to bind the SelectedPerson from PersonViewModel to the textboxes.
I tried to set the datacontext for the textboxes and the usercontrol to the same, and bind the boxes like Text="{Binding SelectedPerson.ID}", but that doesn't work.
Is there a way, to get the selected person from within the UserControl and display the information, or do i need to put the textboxes also in the usercontrol?
Thanks in advance,
Flo
PersonModel.cs:
namespace MVVMExample.Model
{
public class PersonModel: INotifyPropertyChanged
{
public int ID { get; set; }
private string forname;
public string Forname
{
get { return forname; }
set {
forname = value;
RaisePropertyChanged("Forname");
}
}
private string surname;
public string Surname
{
get { return surname; }
set {
surname = value;
RaisePropertyChanged("Surname");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
}
PersonViewModel.cs:
public class PersonViewModel
{
public PersonViewModel()
{
Persons = new ObservableCollection<PersonModel>();
LoadPersons();
}
public ObservableCollection<PersonModel> Persons
{
get;
set;
}
public PersonModel SelectedPerson { get; set; }
public void LoadPersons()
{
ObservableCollection<PersonModel> persons = new ObservableCollection<PersonModel>();
persons.Add(new PersonModel { ID = 1, Forname = "Thomas", Surname = "Sogen" });
persons.Add(new PersonModel { ID = 2, Forname = "Seth", Surname = "Xu" });
persons.Add(new PersonModel { ID = 3, Forname = "Derik", Surname = "Mayers" });
persons.Add(new PersonModel { ID = 4, Forname = "Daisy", Surname = "Doros" });
Persons = persons;
}
}
PersonView.xaml (UserControl):
<UserControl x:Class="MVVMExample.Views.PersonView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MVVMExample.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="400">
<Grid>
<DataGrid Name="PersonDataGrid" Grid.Row="4" AutoGenerateColumns="False" ItemsSource="{Binding Persons, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" CanUserAddRows="False" IsReadOnly="True" HeadersVisibility="Column" FontSize="14" SelectionMode="Single" SelectedItem="{Binding SelectedPerson}">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding ID}" Width="*"/>
<DataGridTextColumn Header="Forname" Binding="{Binding Forname}" Width="*"/>
<DataGridTextColumn Header="Surname" Binding="{Binding Surname}" Width="*"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</UserControl>
PersonView.xaml.cs:
public partial class PersonView : UserControl
{
public PersonView()
{
InitializeComponent();
this.DataContext = new MVVMExample.ViewModel.PersonViewModel();
}
}
MainWindow.xaml
<Window x:Class="MVVMExample.MainWindow"
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:local="clr-namespace:MVVMExample"
xmlns:views="clr-namespace:MVVMExample.Views"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0"/>
<TextBox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
<views:PersonView x:Name="PersonViewControl" Loaded="PersonViewControl_Loaded" Grid.Row="3"/>
</Grid>
</Window>

WPF Caliburn.Micro: Binding DisplayMemberPath on ChildViewModel

I use VS2013, WPF 4.5, Caliburn Micro 2.0.2. This is a sample project of mine.
My ShellViewModel has base class Conductor and has collection of model (a property) called Vehicles. I created also ChildViewModel that has base class Screen and a property called ParentVm, which contains its parent. In my real project I have surely more than one child viewmodel (thus, > 1 screens)
The model (class Vehicle) contains properties: Manufacturer, Model and Type.
How can I bind DisplayMemberPath of ListBox in ChildView which has ItemsSource="ParentVm.Vehicles", so the ListBox can show the Manufacturer of class Vehicle?
Following is my sample code. Please feel free to modify it to show me the solution. Thank you in advance.
public class Vehicle : PropertyChangedBase
{
public String Manufacturer { get; set; }
public String Model { get; set; }
public String Type { get; set; }
}
ShellViewModel
public class ShellViewModel : Conductor<Screen>, IHaveActiveItem
{
public ChildViewModel ChildVm { get; private set; }
public ObservableCollection<Vehicle> Vehicles { get; set; }
public ShellViewModel()
{
DisplayName = "Shell Window";
ChildVm = new ChildViewModel(this);
Vehicles = new ObservableCollection<Vehicle>();
SetData();
}
public void DisplayChild()
{
ActivateItem(ChildVm);
}
private void SetData()
{ // fill collection with some sample data
vh = new Vehicle();
vh.Manufacturer = "Chevrolet";
vh.Model = "Spark";
vh.Type = "LS";
Vehicles.Add(vh);
}
}
ShellView
<UserControl x:Class="CMWpfConductorParentChild.Views.ShellView"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<Grid Width="300" Height="300" HorizontalAlignment="Center"
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Button x:Name="DisplayChild"
Grid.Row="0" Width="120" Height="40"
HorizontalContentAlignment="Center"
Content="Display Child View" />
<ContentControl x:Name="ActiveItem" Grid.Row="1" />
</Grid>
</UserControl>
ChildViewModel
public class ChildViewModel : Screen
{
public ShellViewModel ParentVm { get; private set; }
public ChildViewModel(ShellViewModel parent)
{
ParentVm = parent;
}
}
ChildView (the binding of DisplayMemberPath below doesn't work)
<UserControl x:Class="CMWpfConductorParentChild.Views.ChildView"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<Grid Width="300" Height="300">
<ListBox DisplayMemberPath="Manufacturer" ItemsSource="ParentVm.Vehicles" />
</Grid>
</UserControl>
You need to add the 'Binding' keyword to the 'ItemsSource' property:
<ListBox DisplayMemberPath="Manufacturer" ItemsSource="{Binding ParentVm.Vehicles}" />
I've modified your example to show how you can bind properties to the child view based on convention.
ShellViewModel
public class ShellViewModel : Screen, IShell
{
private readonly ChildViewModel _ChildView;
private readonly IEventAggregator _Aggregator;
public IList<Vehicle> vehicles = new List<Vehicle>();
public ShellViewModel(IEventAggregator aggregator, ChildViewModel childView)
{
if (aggregator == null)
throw new ArgumentNullException("aggregator");
_Aggregator = aggregator;
if (childView == null)
throw new ArgumentNullException("childView");
_ChildView = childView;
DisplayName = "Shell Window";
}
public ChildViewModel ChildView
{
get { return _ChildView; }
}
public void DisplayChild()
{
var vh = new Vehicle() { Manufacturer = "Chevrolet", Model = "Spark", Type = "LS" };
vehicles.Add(vh);
_Aggregator.PublishOnUIThreadAsync(new ShowChildViewEvent(vehicles));
}
}
ShellView
<UserControl x:Class="CaliburnDemo.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.caliburnproject.org">
<Grid Width="300" Height="300" HorizontalAlignment="Center"
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Button x:Name="DisplayChild"
Grid.Row="0" Width="120" Height="40"
HorizontalContentAlignment="Center"
Content="Display Child View" />
<ContentControl cal:View.Model="{Binding ChildView}" Grid.Row="1" />
</Grid>
ChildViewModel
public class ChildViewModel : Screen, IHandle<ShowChildViewEvent>
{
private BindableCollection<Vehicle> _Vehicles;
private readonly IEventAggregator _Aggregator;
public ChildViewModel(IEventAggregator aggregator)
{
if (aggregator == null)
throw new ArgumentNullException("aggregator");
_Aggregator = aggregator;
_Aggregator.Subscribe(this);
}
public BindableCollection<Vehicle> Vehicles
{
get { return _Vehicles; }
set
{
_Vehicles = value;
NotifyOfPropertyChange(() => Vehicles);
}
}
public void Handle(ShowChildViewEvent message)
{
Vehicles = new BindableCollection<Vehicle>(message.Vehicles);
}
}
ChildView
<UserControl x:Class="CaliburnDemo.ChildView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<ListBox x:Name="Vehicles" DisplayMemberPath="Manufacturer" />
</Grid>
ShowChildViewEvent
public class ShowChildViewEvent
{
public ShowChildViewEvent(IList<Vehicle> vehicles)
{
Vehicles = vehicles;
}
public IList<Vehicle> Vehicles { get; private set; }
}
IShell is an empty interface used for resolving the root view from the container. You can find more on conventions in Caliburn here:
Caliburn Conventions

Binding Textbox to Two sources WPF

I have a text box, which default value I want to bind to Combo box selecteItem, and same time I want my text box to be binded to Mvvm object property?
I checked here but the multibinding confuse me.
I would prefer to have xaml solution for this issue.
Addition:
In combobox I will select an Account, that account contain some values (Amount), I want to display Amount, But need my text box to be bounded to mvvm model object element stAmount. so the user can change the amount selected by combobbox and then this modified or unchanged amount value could be stored to text box binded model-object element (stAmount)
Making use of INotifyPropertyChanged:
XAML
<Window x:Class="INotifyPropertyChangedExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="INotifyPropertyChanged Example" Width="380" Height="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Account Name:" />
<Label Grid.Row="1" Grid.Column="0" Content="Account Balance:" />
<ComboBox Grid.Row="0" Grid.Column="1" Width="200" Height="25" ItemsSource="{Binding AccountsCollection}" SelectedItem="{Binding SelectedAccount}" DisplayMemberPath="Name" />
<TextBox Grid.Column="1" Grid.Row="1" Width="200" Height="25" Text="{Binding SelectedAccount.Balance}" />
</Grid>
</Window>
C#
namespace INotifyPropertyChangedExample
{
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
public partial class MainWindow : Window, INotifyPropertyChanged
{
private ObservableCollection<Account> acctountsCollection;
public ObservableCollection<Account> AccountsCollection
{
get
{
return this.acctountsCollection;
}
set
{
this.acctountsCollection = value;
OnPropertyChanged();
}
}
private Account selectedAccount;
public Account SelectedAccount
{
get
{
return this.selectedAccount;
}
set
{
this.selectedAccount = value;
OnPropertyChanged();
}
}
public MainWindow()
{
InitializeComponent();
this.AccountsCollection = new ObservableCollection<Account>()
{
new Account { Id = 1, Name = "My super account", Balance = 123.45 },
new Account { Id = 2, Name = "My super account 2", Balance = 543.21 },
};
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Account
{
public int Id { get; set; }
public string Name { get; set; }
public double Balance { get; set; }
}
}
In this example we bind an ObservableCollection of Account objects to your ComboBox and keep track of which Account is selected through the SelectedItem property. We bind the TextBox text property to the Balance property of the selected Account object. Therefore when then selected Account object changes the value displayed in the TextBox changes to reflect the Balance of the Account.
Additionally if you change the value in the TextBox, the Balance value of the Account object is updated.
It seems to me like you want bind your textbox to the selected value property in your viewmodel not the combo box.
using System.Collections.ObjectModel;
using System.Windows;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public ObservableCollection<string> Items
{
get { return (ObservableCollection<string>)GetValue(ItemsProperty); }
set { SetValue(ItemsProperty, value); }
}
public static readonly DependencyProperty ItemsProperty =
DependencyProperty.Register("Items", typeof(ObservableCollection<string>), typeof(MainWindow), new PropertyMetadata(null));
public string SelectedValue
{
get { return (string)GetValue(SelectedValueProperty); }
set { SetValue(SelectedValueProperty, value); }
}
public static readonly DependencyProperty SelectedValueProperty =
DependencyProperty.Register("SelectedValue", typeof(string), typeof(MainWindow), new PropertyMetadata(null));
public MainWindow()
{
InitializeComponent();
Items = new ObservableCollection<string>();
Items.Add("Value 1");
Items.Add("Value 2");
Items.Add("Value 3");
Items.Add("Value 4");
Items.Add("Value 5");
Items.Add("Value 6");
}
}
}
and the xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="MainWindow" Height="350" Width="525">
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ComboBox Grid.Row="0" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedValue}"/>
<TextBox Grid.Row="1" Text="{Binding SelectedValue}"/>
</Grid>
</Window>

WPF binding with ContentControl not working

I'm just starting to use WPF, but my binding doesn't work.
When I start the application the screen is just blank.
This is my XAML
<Window x:Class="HelloWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ContentControl Content="{Binding PersonOne}" Width="auto" Height="auto" >
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding FirstName}" FontSize="15" />
<TextBlock Text="{Binding Age}" FontSize="12" />
</StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</Grid>
This is the code:
public partial class MainWindow : Window
{
public Person PersonOne;
public MainWindow()
{
InitializeComponent();
PersonOne = new Person();
PersonOne.Gender = Gender.Female;
PersonOne.Age = 24;
PersonOne.FirstName = "Jane";
PersonOne.LastName = "Joe";
this.DataContext = this;
}
}
And this is the person class
public class Person
{
public string LastName { get; set; }
public string FirstName { get; set; }
public int Age { get; set; }
public Gender Gender { get; set; }
}
public enum Gender
{
Male,
Female
}
What am I doing wrong?
You cannot bind to fields, only properties, so change this:
public Person PersonOne;
to this:
public Person PersonOne {get;set;}
BTW, you probably need to create a ViewModel rather than putting the Data inside the Window itself.

DataBinding with DataContext

what am I doing wrong here? I'm trying to create a DataTemplate using a collection inside the DataContext object, like the following:
C#:
namespace StackOverflowTests
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.DataContext = new People();
}
}
class People
{
public List<Person> PersonList { get; set; }
public People()
{
this.PersonList = new List<Person>()
{
new Person(){FirstName = "Carlo", LastName = "Toribio" },
new Person(){FirstName = "Guy", LastName = "Incognito" }
};
}
}
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
XAML:
<Window x:Class="StackOverflowTests.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" x:Name="window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="peopleTemplate">
<StackPanel>
<TextBlock Text="First Name" FontWeight="Bold" />
<TextBlock Text="{Binding PersonList.FirstName}" />
<TextBlock Text="Last Name" FontWeight="Bold" />
<TextBlock Text="{Binding PersonList.LastName}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="gridMain">
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource peopleTemplate}" />
</Grid>
</Window>
I've done this a lot easier by using a class that inherits from Collection<T>, but for many reasons, I can't do that to solve this problem. Any suggestion is greatly appreciated.
Thanks!
try this one:
<Grid x:Name="gridMain">
<ItemsControl ItemsSource="{Binding PersonList}" ItemTemplate="{StaticResource peopleTemplate}" />
</Grid>

Resources