带有动态列的 wpf 网格 [英] wpf grid with dynamic columns

问题描述

我有一个想要绑定到 WPF 网格的集合.

I have a collection that I wish to bind to a WPF grid.

我面临的问题是列数是动态的并且取决于集合.这是一个简单的模型:

The problem I'm facing is that the number of columns is dynamic and is dependent on a collection. Here is a simple mock up:

public interface IRows
{
    string Message{get;}
    IColumns[] Columns{get;}
}

public interface IColumns
{
    string Header {get;}
    AcknowledgementState AcknowledgementState{get;}
}

public interface IViewModel
{
    ObservableCollection<IRows> Rows {get;}
}

我希望我的视图绑定到 Rows 集合，该集合包含一个 Columns 集合.

I want my view to bind to the the Rows collection, which contains a collection of Columns.

My Columns 集合包含一个应由图像表示的枚举(3 种可能性中的一种).它还包含一个 Message 属性，它应该只显示在一列中(静态的，只是一些文本信息).它还包含一个标题字符串，该字符串应显示为该列的标题.

My Columns collection contains an enum which should be represented by an image (1 of 3 possibilities). It also contains a Message property which should only be displayed in one column (static and is just some text information). It also contains a Header string which should be displayed as a header for that column.

请注意，列数是可变的(目前标题设置为确认，但这将更改以表示动态数据).

Note that the number of columns is variable (at the moment the headers are set to Acknowledge but this will change to represent dynamic data).

更新:这是在实施 Rachel 的建议之后

    <ItemsControl
 ItemsSource="{Binding Items, Converter={StaticResource PresentationConverter}}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Grid ShowGridLines="true"
         local:GridHelpers.RowCount="{Binding RowCount}"
         local:GridHelpers.ColumnCount="{Binding ColumnCount}" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
      <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
    </Style>
  </ItemsControl.ItemContainerStyle>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <ContentControl Content="{Binding}">
        <ContentControl.Resources>
          <DataTemplate DataType="{x:Type UI:MessageEntity}">
            <TextBox Text="{Binding Message}"></TextBox>
          </DataTemplate>
          <DataTemplate DataType="{x:Type UI:StateEntity}">
            <TextBox Text="{Binding State}"></TextBox>
          </DataTemplate>
        </ContentControl.Resources>
      </ContentControl>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

这几乎给了我现在想要的东西.我只坚持我应该为标题做些什么.欢迎提出任何建议.

This almost gives me what I want now. I'm only stuck with what I should do for the headers. Any suggestions are welcome.

推荐答案

您可以为此使用嵌套的ItemsControls

这是一个基本示例:

<!-- Bind Rows using the default StackPanel for the ItemsPanel -->
<ItemsControl ItemsSource="{Binding Rows}">
    <!-- Set the Template for each row to a TextBlock and another ItemsControl -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <!-- Need to set Width of name TextBlock so items line up correctly -->
                <TextBlock Width="200" Text="{Binding Name}" />

                <ItemsControl ItemsSource="{Binding Columns}">
                    <!-- Use a horizontal StackPanel to display columns -->
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这篇关于带有动态列的 wpf 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！