将项添加到ItemsControl

时间:2014-10-21 14:15:43

标签: wpf itemscontrol

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

预期结果喜欢图像。我想

line

我借用了手机图标代码。

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

不确定下一步?

1 个答案:

答案 0 :(得分:2)

假设你在这里使用MVVM,只是XAML与代码隐藏在类之后 - 你需要先改变你的代码。你需要一个物体代表一条&#34;线&#34; - 并将颜色设为画笔,而不是字符串:

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相当容易,你只需定义一个名为&#34; items&#34;的ItemsControl。并定义将应用于每个项目的样式。这将包含行号将画笔应用于图像,您将创建一个&#34;路径&#34;:

    <!-- 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 /动态删除。

但是我给你最简单的例子就是你的原始问题所暗示的内容!