WPF:以自定义格式显示数据网格集合(带图像)

时间:2012-10-16 04:37:04

标签: wpf silverlight data-binding user-controls observablecollection

我有2个类,一个在另一个内,以及一个带有子类集合的类的ObservableCollection的prop。但是我在展示整件事情时遇到了严重的麻烦。

首先我的数据,这就是我所拥有的:(它可能会澄清我的问题)

public class MyItem
{
    public string Id { get; set; }
    public string Front { get; set; }
    public Props.StateSemaphore Semaphore{ get; set; } // this is an enum w/ints
    public string ToolTip { get; set; }
    public string Architect { get; set; }
    public string Status { get; set; }

    public MyItem(){}
    public MyItem(string id, string front, 
            Props.StateSemaphore semaphore, string toolTip, 
            string architect, string status)
    {
        Id = id;
        Front = frente;
        Semaphore = semaphore;
        ToolTip = toolTip;
        Architect = architect;
        Status = status;
    }
}

public class MyTab
{
    public List<MyItem> MyItems { get; set; }
    public string Environment { get; set; }
    public MyTab() { }
    public MyTab(string environment)
    {
        Environment = environment;
        MyItems = new List<MyItem>();
    }
}

PageExample.xaml.cs上的道具

  private ObservableCollection<MyTab> myPanel;
  public ObservableCollection<MyTab> MyPanel
  {
      get { return myPanel; }
      set { myPanel = value; }
  }

我们的想法是为每个 Environment 显示一个MyItems网格,并在信号量枚举上显示图像(红色,黄色或绿色)

@Edit:这几乎正常运作!仅显示图像。

这是我的XAML,但我是wpf的新手所以很明显我错过了什么。

<Page x:Class="MyBoard.PageMain"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:w="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:MyBoard"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="PageMain">
       <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center">
        <DataGrid Name="EnvironmentDataGrid" IsReadOnly="True" ItemsSource="{Binding}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Id}" Header="Id"/>
                <DataGridTextColumn Binding="{Binding Front}" Header="Front"/>
                <DataGridTemplateColumn Header="Semaphore">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Semaphore}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Binding="{Binding ToolTip}" Header="ToolTip"/>
                <DataGridTextColumn Binding="{Binding Architect}" Header="Architect"/>
                <DataGridTextColumn Binding="{Binding Status}" Header="Status"/>
            </DataGrid.Columns>

            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Environment}" FontWeight="Bold" Padding="3"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander>
                                            <Expander.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="{Binding Path=Name}" />
                                                    <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
                                                    <TextBlock Text="Element(s)"/>
                                                </StackPanel>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Page>

这是我的问题:

  1. 编写XAML的正确方法是什么? @Edit:完成!
  2. 如何以及在何处绑定 信号量图像到datagrid?
  3. @Edit:信号量现在是一个RelativeUri,因为我不理解this answer。 我的意思是,我得到了这个想法但不是这个:

    <MultiBinding Converter={StaticResource catMultiConverter}>
          <Binding .../>
          <Binding .../>
        </MultiBinding>
    

    使用RelativeUri并且所有它仍然不显示。

1 个答案:

答案 0 :(得分:1)

  1. 请参阅here,了解如何设置DataGrid.Columns以及如何设置Bind
  2. 检查here如何通过ConverterDataGridTemplateColumn.CellTemplate将信号量枚举转换为图像。
  3. 请参阅here如何使用DataGrid中的分组对Environment属性进行分组,以便在一个组下方显示相同的Environment项目。