Add items to ItemsControl - wpf

Question

I have an application for telephone call. Each call(line) has its own unique information. Say a colorful icon plus and line number. The numbers are in a queue, I used parallel programming skills to deal these items. When processing the item, the information is shown on the screen. Here I prefer ItemsControl.
The expected result likes the image. I want to
I borrowed the code for phone icon.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<SolidColorBrush x:Key="RedBrush" Color="Red" />
<SolidColorBrush x:Key="AmberBrush" Color="#FFFFC500" />
<SolidColorBrush x:Key="GreenBrush" Color="Green" />
<Geometry x:Key="PhoneIcon">F1M52.5221,11.1016C52.0637,10.6796 44.4973,4.55737 29.4347,12.7369 26.3098,14.4296 23,17.224 20.095,20.1692 17.1497,23.073 14.3555,26.3842 12.6626,29.509 4.48303,44.5703 10.6093,52.1393 11.0298,52.5962 11.0298,52.5962 12.9778,55.5885 14.7057,53.8579L23.3555,45.2134C24.897,43.6692 22.7721,39.2134 18.2563,39.3541 17.1301,39.3906 15.5481,38.9531 17.0571,35.5156 18.3945,32.4623 22.3436,27.4766 24.8879,24.9648 27.4048,22.418 32.3904,18.4713 35.4426,17.1301 38.8787,15.6223 39.3175,17.2031 39.2811,18.332 39.1393,22.8462 43.5962,24.9686 45.1366,23.4283L53.7864,14.7787C55.5142,13.052,52.5221,11.1016,52.5221,11.1016z</Geometry>
My question: If I know the color of the phone icon and the phone number, how to add it to the itemscontrol? The phone number needs to be bind, I assume I have a class:
public class Lines
{
public string color { get; set; }
public string linenumber { get; set; }
}
And I defined the ItemsControls as:
<DockPanel>
<ItemsControl Height="300">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
Not sure the next step?

Answer 1

Assuming you are not using MVVM here, just XAML forms with code behind classes - you need to alter your code behind first a little. You need an object to represent a "line" - and make the colour a brush, not a string:
public class Line
{
public string LineNumber { get; set; }
public System.Windows.Media.Brush LineColour { get; set; }
}
Then you need code to build a collection of these which your ItemsControl can display. It might look something like this:
public partial class MainWindow : Window
{
private List<Line> _lines;
public MainWindow()
{
InitializeComponent();
_lines = new List<Line>();
// you can swap this for iterating around a database query or whatever you use to store the lines / calls
_lines.Add(new Line() { LineNumber = "line1", LineColour = new SolidColorBrush(Colors.Red) });
_lines.Add(new Line() { LineNumber = "line2", LineColour = new SolidColorBrush(Colors.Green) });
_lines.Add(new Line() { LineNumber = "line3", LineColour = new SolidColorBrush(Color.FromRgb(255, 188, 59)) });
// this part binds this list to your itemsControl
items.ItemsSource = _lines;
}
Then your XAML is fairly easy, you just define an ItemsControl called "items" and define a style which will be applied to each item. This will contain the line number apply the brush to the image, which you will make a "Path":
<!-- this bit defines how each item looks-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Path Grid.Column="0" Fill="{Binding LineColour}" Data="F1M52.5221,11.1016C52.0637,10.6796 44.4973,4.55737 29.4347,12.7369 26.3098,14.4296 23,17.224 20.095,20.1692 17.1497,23.073 14.3555,26.3842 12.6626,29.509 4.48303,44.5703 10.6093,52.1393 11.0298,52.5962 11.0298,52.5962 12.9778,55.5885 14.7057,53.8579L23.3555,45.2134C24.897,43.6692 22.7721,39.2134 18.2563,39.3541 17.1301,39.3906 15.5481,38.9531 17.0571,35.5156 18.3945,32.4623 22.3436,27.4766 24.8879,24.9648 27.4048,22.418 32.3904,18.4713 35.4426,17.1301 38.8787,15.6223 39.3175,17.2031 39.2811,18.332 39.1393,22.8462 43.5962,24.9686 45.1366,23.4283L53.7864,14.7787C55.5142,13.052,52.5221,11.1016,52.5221,11.1016z"/>
<TextBlock Grid.Column="1" Text="{Binding LineNumber}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- this bit defines the list appearance, we'll go vertical in a stack panel! -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
If you are using MVVM, everything still applies, but instead of assigning the ItemsSource in code behind, you would bind to the _lines collection of your view model - and you would make that an ObservableCollection rather than List if you wanted to add/remove dynamically.
But I have given you the simplest case as that's what your original question suggests!