将项目添加到ItemsControl [英] Add items to ItemsControl

问题描述

我有一个电话申请.每个呼叫(线路)都有自己的唯一信息.说一个彩色的图标加号和行号.数字排在队列中，我使用了并行编程技巧来处理这些项目.处理项目时，信息会显示在屏幕上.在这里，我更喜欢ItemsControl.

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

我将ItemsControls定义为:

And I defined the ItemsControls as:

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

不确定下一步吗?

推荐答案

假设您不是在这里使用MVVM，只是在类后面带有代码的XAML表单-您需要先更改一下代码.您需要一个对象来代表线"-并将颜色设置为画笔，而不是字符串:

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

然后，您需要代码来构建这些集合，您的ItemsControl可以显示这些集合.它可能看起来像这样:

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

然后，您的XAML相当简单，您只需定义一个名为"items"的ItemsControl，然后定义将应用于每个项目的样式.这将包含将画笔应用到图像的行号，您将创建一个路径":

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>

如果您使用的是MVVM，那么一切仍然适用，但是您无需绑定后面的代码中的ItemsSource，而是绑定到视图模型的_lines集合-如果要添加，则将其设置为ObservableCollection而不是List /动态删除.

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!

这篇关于将项目添加到ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！