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

问题描述

我有一个希望绑定到WPF网格的集合。

我面临的问题是列的数量是动态的，并且依赖于集合。这是一个简单的模拟：

  public interface IRows 
 {
 string Message {get;} 
 IColumns []列{get;} 
} 
 
公共接口IColumns 
 {
字符串Header {get;} 
 AcknowledgementState AcknowledgementState {get ;} 
} 
 
 public interface IViewModel 
 {
 ObservableCollection< IRows>行{get;} 
} 
  

我希望我的视图绑定到Rows集合，其中包含一列Columns。

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

更新：这是在实施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.RowValue ={Binding RowIndex}/> 
< Setter Property =Grid.ColumnValue ={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> 
  

这几乎给了我现在想要的。我只是坚持我应该为标题做些什么。
欢迎您提供任何建议。

解决方案

您可以使用嵌套的 ItemsControls



下面是一个基本的例子：



 < / p> ！ - 使用ItemsPanel的默认StackPanel绑定行 - > 
< ItemsControl ItemsSource ={Binding Rows}> 
<！ - 将每行的模板设置为TextBlock，另一个ItemsControl  - > 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
< StackPanel Orientation =Horizo​​ntal> 
 <！ - 需要设置名称TextBlock的宽度，以便项目正确排列 - > 
< TextBlock Width =200Text ={Binding Name}/> 
 
< ItemsControl ItemsSource ={Binding Columns}> 
 <！ - 使用水平的StackPanel显示列 - > 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< StackPanel Orientation =Horizo​​ntal/> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< / ItemsControl> 
< / StackPanel> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
  




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

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

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

Update: This is after implementing suggestions from 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.

解决方案

You can use nested ItemsControls for this

Here's a basic example:

<!-- 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屋！