Use an
ObservableCollection
holding Models or ViewModels of the data to be displayed in the multiple
UserControls
. Then in the
XAML file, use an
ItemsControl
(wrapped inside a
ScrollViewer
control) or
ListBox
and set the
DataTemple
with the
UserControl
.
UPDATE: Here is a working example for you as requested...
Models and ViewModels may have properties that can change. Here is a base class that works with the INotifyPropertyChanged binding interface:
public abstract class ObservableBase : INotifyPropertyChanged
{
public void Set<TValue>(ref TValue field, TValue newValue, [CallerMemberName] string propertyName = "")
{
if (EqualityComparer<TValue>.Default.Equals(field, default(TValue)) || !field.Equals(newValue))
{
field = newValue;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
NOTE: This is
NOT required for this sample app but here for thoroughness for the Binding system.
For our sample app, we need a data model to bind each item in the
ObservableCollection
in the
MainViewModel
class:
public class PersonModel : ObservableBase
{
private string name;
public string Name
{
get { return name; }
set { Set(ref name, value); }
}
private int age;
public int Age
{
get { return age; }
set { Set(ref age, value); }
}
}
Now we can define our
MainViewModel
that will hold our collection of objects to be displayed in the
MainWindow
UI
public class MainViewModel
{
public MainViewModel()
{
Mock();
}
public ObservableCollection<PersonModel> Persons { get; set; }
= new ObservableCollection<PersonModel>();
private Random rand = new Random();
private void Mock()
{
for (int i = 0; i < 10; i++)
{
Persons.Add(new PersonModel
{
Name = string.Format("Person {0}", i),
Age = rand.Next(20, 50)
});
}
}
}
Now we define our item template in the
UserControl
as required in this question asked:
<UserControl
x:Class="ItemsControlSample.PersonUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Margin="10 3"/>
<TextBlock Text="{Binding Age}" Margin="10 3" Grid.Column="1"/>
</Grid>
</UserControl>
Lastly, we are now ready to define our
MainWindow
UI view for the user:
<Window
x:Class="ItemsControlSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ItemsControlSample"
Title="Basic ObservableCollection binding example"
WindowStartupLocation="CenterScreen" Height="400" Width="360">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Resources>
<DataTemplate DataType="{x:Type local:PersonModel}">
<local:PersonUserControl/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="ItemsControl Example" FontWeight="Bold" Margin="4 10"/>
<Border BorderThickness="1" BorderBrush="Silver" Margin="4" Grid.Row="1">
<ScrollViewer HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Persons}"/>
</ScrollViewer>
</Border>
<TextBlock Text="ListBox Example" FontWeight="Bold" Margin="4 10" Grid.Column="1"/>
<ListBox ItemsSource="{Binding Persons}" Margin="4" Grid.Row="1" Grid.Column="1">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Window>
The sample app shows how to display a list of
Models
contained in an
ObservableCollection
in the bound
ViewModel
using both an
ItemsControl
and a
ListBox
control using the MVVM Pattern and the WPF Binding system.