在 Silverlight 4 中绑定我的 Accordion 控件答案

【问题标题】：Databind my Accordion control in Silverlight 4在 Silverlight 4 中绑定我的 Accordion 控件
【发布时间】：2010-11-09 21:10:31
【问题描述】：

我一直在网上搜索，试图找到一个 Accordion 控件的数据绑定示例。

我已经编写了一个简单的测试应用程序来尝试和数据绑定，我可以获取要绑定的标题，但似乎无法弄清楚如何获取要绑定的内容。有人可以帮帮我吗？

这是我的 XAML：

<tk:Accordion HorizontalAlignment="Left" Margin="12,12,0,0" Name="accordion1" Width="181" Height="325" Background="White" VerticalAlignment="Top">
    <tk:Accordion.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding MenuHeaderName}" />
            </StackPanel>
        </DataTemplate>
    </tk:Accordion.ItemTemplate>
    <tk:Accordion.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=MenuItems.MenuItemName}" />
            </StackPanel>
        </DataTemplate>
    </tk:Accordion.ContentTemplate>         
</tk:Accordion>

这是我的代码：

public partial class MainPage : UserControl
{
    public class MenuItem
    {
        public MenuItem(string name) { MenuItemName = name; }
        public string MenuItemName { get; set; }
    }

    public class MenuHeader
    {
        public MenuHeader(string name) 
        { 
            MenuItems = new List<MenuItem>(); 
            MenuHeaderName = name; 
        }
        public string MenuHeaderName { get; set; }
        public List<MenuItem> MenuItems { get; set; }
    }

    public MainPage()
    {
        InitializeComponent();

        List<MenuHeader> menuHeaders = new List<MenuHeader>();

        MenuHeader robots = new MenuHeader("Robots");
        robots.MenuItems.Add(new MenuItem("Robots - Item 1"));
        robots.MenuItems.Add(new MenuItem("Robots - Item 2"));
        robots.MenuItems.Add(new MenuItem("Robots - Item 3"));
        menuHeaders.Add(robots);

        MenuHeader pirates = new MenuHeader("Pirates");
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 1"));
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 2"));
        pirates.MenuItems.Add(new MenuItem("Pirates - Item 3"));
        menuHeaders.Add(pirates);

        accordion1.ItemsSource = menuHeaders;
    }
}

【问题讨论】：

标签： data-binding silverlight-4.0 accordion

【解决方案1】：

想通了。

这是有效的 XAML...

    <tk:Accordion HorizontalAlignment="Left" Margin="12,12,0,0" Name="accordion1" Width="181" Height="325" Background="White" VerticalAlignment="Top">
        <tk:Accordion.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding MenuHeaderName}" />
                </StackPanel>
            </DataTemplate>
        </tk:Accordion.ItemTemplate>
        <tk:Accordion.ContentTemplate>
            <DataTemplate>
                <ListBox ItemsSource="{Binding MenuItems}" BorderThickness="0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding MenuItemName}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </DataTemplate>
        </tk:Accordion.ContentTemplate>         
    </tk:Accordion>

【讨论】：