绑定嵌套集合时遇到问题答案

【问题标题】：Trouble binding nested collections绑定嵌套集合时遇到问题
【发布时间】：2013-11-19 20:40:50
【问题描述】：

我是 WPF 的初学者，我正在尝试绑定一个嵌套集合。

我在网上找到了很多关于绑定的话题，我尝试关注this question/answer。我尝试更改 Datacontext 和 ItemSource 值，但似乎无法正确处理。

XAML：

<UserControl x:Class="WpfApplication1.Nav1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="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" 
         mc:Ignorable="d" 
         d:DesignHeight="620" d:DesignWidth="950">
<Grid Background="#FF741125">
    <TextBlock Height="61" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="BEVERAGES" VerticalAlignment="Top" Width="250" FontSize="20" FontWeight="Black" />
    <ItemsControl x:Name="Stack" DataContext="{Binding myMenu}"  ItemsSource="{Binding Subs}" BorderThickness="0" Margin="0,60,0,0">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Label Content="{Binding Name}" FontWeight="Bold" />
                    <ItemsControl ItemsSource="{Binding Nodes}" BorderThickness="0" Margin="0,60,0,0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Height="60" Width="900">
                                    <Grid.Background>
                                        <ImageBrush ImageSource="/WpfApplication1;component/Images/MenuGrid.fw.png" />
                                    </Grid.Background>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="10" />
                                        <RowDefinition Height="10" />
                                        <RowDefinition Height="10" />
                                        <RowDefinition Height="10" />
                                        <RowDefinition Height="10" />
                                        <RowDefinition Height="10" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="50" />
                                    </Grid.ColumnDefinitions>

                                    <Label Content="{Binding Name}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="14" FontWeight="Bold" />
                                    <Label Content="{Binding Description}" Grid.Column="1" Grid.Row="2" Grid.RowSpan="3" Grid.ColumnSpan="14" />
                                    <Label Content="{Binding Cost}" ContentStringFormat="{}${0}" Grid.Column="16" Grid.Row="0" Grid.RowSpan="5" Grid.ColumnSpan="2" />

                                </Grid>

                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

</Grid>

类：

public class Menu
{
    public ObservableCollection<Category> Subs;

    public Menu()
    {
        Subs = new ObservableCollection<Category>();
    }
}

public class Category
{
    public ObservableCollection<MenuItem> Nodes;
    public Category()
    {
        Nodes = new ObservableCollection<MenuItem>();
    }
    private string name;
    public string Name
    {
        get { return this.name; }
        set { this.name = value; }
    }
    public Category(string name)
    {
        this.name = name;
        Nodes = new ObservableCollection<MenuItem>();
    }
}

public class MenuItem
{
    public MenuItem()
    {
    }

    public MenuItem(string name, string description, double cost)
    {
        this.itemName = name;
        this.description = description;
        this.cost = cost;
    }

    private string itemName;
    public string ItemName
    {
        get { return this.itemName; }
        set { this.itemName = value; }
    }

    private string description;
    public string Description
    {
        get { return this.description; }
        set { this.description = value; }
    }

    private double cost;
    public double Cost
    {
        get { return this.cost; }
        set { this.cost = value; }
    }
}

CS：

public Nav1()
    {
        InitializeComponent();
        // Init Model
        Menu myMenu = new Menu();
        myMenu.Subs.Add(new Category("Soft Drinks"));
        myMenu.Subs.Add(new Category("Coffee"));
        myMenu.Subs.Add(new Category("Premium"));

        myMenu.Subs[0].Nodes.Add(new MenuItem("Pepsi", "Cool & Refreshing", 1.39));
        myMenu.Subs[0].Nodes.Add(new MenuItem("Diet Pepsi", "Cool & Refreshing", 1.39));
        myMenu.Subs[0].Nodes.Add(new MenuItem("7Up", "Cool & Refreshing", 1.39));
        myMenu.Subs[0].Nodes.Add(new MenuItem("Mug Root Beer", "Cool & Refreshing", 1.39));
        myMenu.Subs[0].Nodes.Add(new MenuItem("Brisk Iced Tea", "Cool & Refreshing", 1.39));
        myMenu.Subs[0].Nodes.Add(new MenuItem("Bottled Water", "Thirsty? Aquafina.", 2.75));
        // Set DataContext for StackPanel
        Stack.DataContext = myMenu.Subs;
    }

它显示类别名称（例如“软饮料”或“咖啡”），但我无法显示单个项目。另外，有没有更好的方法来做到这一点？如前所述，我是 WPF 的初学者，似乎缺少许多有趣的功能。

感谢阅读！

【问题讨论】：

您需要使用HierarchicalDataTemplate 而不是DataTemplate。
嗨@Bob，这让我朝着正确的方向前进！我切换到使用TreeView + HierarchicalDataTemplate，跟随this tutorial。如果您可以添加您的评论作为答案，我想将其标记为已接受。非常感谢！

标签： c# wpf xaml binding nested

【解决方案1】：

使用DataTemplate 不允许使用嵌套项，因为它不提供ItemsSource 属性。

<DataTemplate>
    <TextBlock Text={Binding MyTextValue}/>
</DataTemplate>

但是，如果您使用HierarchicalDataTemplate，则可以使用ItemsSource 属性来定义下一级项目。

<HierarchicalDataTemplate ItemsSource={Binding MyListOfLevelTwoItems}>
    <TextBlock Text={Binding MyLevelOneValue}/>
</HierarchicalDataTemplate>
<DataTemplate DataType={x:Type MyLevelTwoItem}>
    <TextBlock Text={Binding MyLevelTwoValue}/>
</DataTemplate>

【讨论】：