在Silverlight 4中数据绑定我的手风琴控件

时间:2010-11-09 21:10:31

标签: data-binding silverlight-4.0 accordion

我一直在网上搜索试图找到一个数据绑定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;
    }
}

1 个答案:

答案 0 :(得分:2)

想出来。

这是有效的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>