Добавить элементы в ItemsControl

Question

У меня есть приложение для телефонного звонка. Каждый вызов (линия) имеет свою уникальную информацию. Скажем красочный значок плюс и номер строки. Числа находятся в очереди, я использовал навыки параллельного программирования для обработки этих предметов. При обработке элемента информация отображается на экране. Здесь я предпочитаю ItemsControl.

Ожидаемый результат нравится изображение. Я хочу

Я позаимствовал код значок телефона.

<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> 

Мой вопрос: Если я знаю цвет значок телефона и номер телефона, как добавить его в ItemsControl? Номер телефона должен быть привязывать, я предполагаю, что у меня есть класс:

public class Lines 
    { 
     public string color { get; set; } 
     public string linenumber { get; set; } 
    } 

И я определил ItemsControls как:

<DockPanel> 
     <ItemsControl Height="300"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="40"/> 
          <ColumnDefinition Width="100"/> 
         </Grid.ColumnDefinitions> 

Не уверен, что следующий шаг?

Answer 1

Предполагая, что вы являетесь не, используя MVVM здесь, только формы XAML с кодом за классами - вам нужно немного изменить свой код. Вам нужен объект, представляющий собой «линию» - и сделать цвет кисти, а не строку:

public class Line 
{ 
    public string LineNumber { get; set; } 
    public System.Windows.Media.Brush LineColour { get; set; } 
} 

Затем вам нужно код, чтобы создать коллекцию из них, которые могут отображать ваш ItemsControl. Это может выглядеть примерно так:

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; 
    } 

Тогда ваш XAML довольно легко, вы просто определить ItemsControl под названием «элементы» и определяют стиль, который будет применен к каждому элементу. Это будет содержать номер строки применить кисть к изображению, которое вы будете сделать «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> 

Если вы используете MVVM, все еще применяется, но вместо того, присваивая ItemsSource в код позади, вы привязываетесь к коллекции _lines вашей модели представления - и вы делаете это ObservableCollection, а не List, если хотите добавить/удалить динамически.

Но я дал вам простейший случай, так как это ваш первоначальный вопрос!