绑定到集合 WPF/VB 中的列表答案

【问题标题】：Binding to a list within a collection WPF/VB绑定到集合 WPF/VB 中的列表
【发布时间】：2012-03-16 10:49:29
【问题描述】：

我想知道是否可以将数据网格列绑定到存储在可观察集合中的列表 (Of T)！

这是我当前的代码：

    Dim _BindWithThis As New List(Of BindWithThis)
    Me.DataContext = _BindWithThis

    For i = 0 To 3
        Dim NewList As New List(Of Double) From {i + 0.25, i + 0.5, i + 0.75}
        _BindWithThis.Add(New BindWithThis() With _ 
    {.InternalNum = i, .DataValue = NewList})
    Next

    DataGrid1.ItemsSource = _BindWithThis

    Dim NC As New DataGridTextColumn
    NC.Header = "New Column"
    NC.Width = 85
    Dim b As New Binding
    b.Path = New PropertyPath("DataValue")
    NC.Binding = b

    DataGrid1.Columns.Add(NC)

这当前显示四行“（集合）”。是否可以进入这些“集合”行之一并显示数据？我知道这可以通过与集合中的特定元素绑定来处理列表框：

        ListBox1.ItemsSource = _BindWithThis.Item(0).DataValue

我只是不知道如何使用数据网格来做到这一点......

感谢您的帮助！

詹姆斯

【问题讨论】：

您需要调查 DataGrid.RowDetailsTemplate。如果没有人超过我，我稍后会举一个例子。

标签： wpf vb.net datagrid wpfdatagrid

【解决方案1】：

这是我承诺的示例。这使用 DataGrid.RowDetailsTemplate 允许您展开/折叠数据列表。抱歉，它是 C# 而不是 VB.NET。

Xaml：

<Page.DataContext>
    <Samples:DataGridRowDetails2ViewModel/>
</Page.DataContext>

<Grid>
    <DataGrid x:Name="dataGrid" ItemsSource="{Binding Items}" 
              AutoGenerateColumns="False" IsReadOnly="True">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name" />
            <DataGridTemplateColumn Header="Show details">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ToggleButton Content="Show details" 
                                      IsChecked="{Binding IsChecked}" 
                                      Checked="ToggleButtonChecked" Unchecked="ToggleButtonChecked"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate DataType="{x:Type Samples:DataItemWithDetails}">
                <ItemsControl ItemsSource="{Binding Doubles}" />
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>    
</Grid>

public partial class DataGridRowDetails2
{
    public DataGridRowDetails2()
    {
        InitializeComponent();
    }

    private void ToggleButtonChecked(object sender, RoutedEventArgs e)
    {
        var button = (ToggleButton)sender;

        DataGridRow dataGridRow = 
            (DataGridRow)dataGrid.ItemContainerGenerator.ContainerFromItem(button.DataContext);
            dataGridRow.DetailsVisibility = 
                (button.IsChecked??false) ? Visibility.Visible : Visibility.Collapsed;
    }
}

您当然会使用 ObservableCollection 并为实际代码实现 INotifyPropertyChanged。

public class DataGridRowDetails2ViewModel
{
    public DataGridRowDetails2ViewModel()
    {
        Items = new List<DataItemWithDetails>
                    {
                        new DataItemWithDetails{ Name = "Item 1"},
                        new DataItemWithDetails{ Name = "Item 2"},
                        new DataItemWithDetails{ Name = "Item 3"},
                        new DataItemWithDetails{ Name = "Item 4"},
                    };
    }

    public IList<DataItemWithDetails> Items { get; set; }

    public bool IsChecked { get; set; }
}

public class DataItemWithDetails
{
    public DataItemWithDetails()
    {
        Doubles = new List<double> {1, 2, 3, 4};
    }

    public string Name { get; set; }

    public IList<double> Doubles { get; set; }
}

【讨论】：

【解决方案2】：

你需要自己设置AutoGenerateColumns="False"并定义你想要的列

这是一个简单的示例，它将以ListBox 而非默认的TextBlock 显示您的收藏

<DataGrid AutoGenerateColumns="False"
          ItemsSource="{Binding YourCollection}">
    <DataGrid.Columns>        
        <DataGridTemplateColumn Header="Column Header">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding MySubCollection}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

【讨论】：