zoukankan      html  css  js  c++  java
  • Working with the Accordion Control in Silverlight 4.0

    In this example we will use the Accordion control to display a list of books, grouped by category.

    1. Create a new SL application in VS 2010 called AccordionControl. Allow VS to create a web applition project to host the application.

    2. With the MainPage.Xaml file selected, position the cursor in the source in Layout Grid. Find and double-click on the Accordion control in the Toolbox. This will add the control to the page, as well as the proper namespace reference:

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    3. After you have added the Accordion, right-click on the control in the design view and select Reset Layout -> All. Then Name the Accordion BookList, set its width to 200, and specify a Margin of 10.

    <Grid x:Name="LayoutRoot" Background="White" >

      <toolkit:Accordion Name="BookList" Width="200" Margin="10" />

    </Grid>

    4. Switch to the code behind in the file MainPae.xaml.cs file. We need to define the data we'll be binding to the Accordion. For simplicity, we'll define the data right in the code behind file. Add two classes, one for Categories and one for Books.

     public class BookCategory
        {
            public string CategoryName { get; set; }
            public List<Booknew> Books { get; set; }
        }
        public class Booknew
        {
            public string Title { get; set; }
        }

    5. Next we need to populate the classes with some data. To do this, first wire up the Loaded event and insert the following code:

    public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            }
     
            void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                List<BookCategory> Library = new List<BookCategory>();
     
                BookCategory cat1 = new BookCategory() { 
                    CategoryName = "Silverlight", 
                    Books = new List<Book>() };
                cat1.Books.Add(new Book() { Title = "Beginning Silverlight 4" });
                cat1.Books.Add(new Book() { Title = "Pro Silverlight 4" });
                Library.Add(cat1);
     
                BookCategory cat2 = new BookCategory() { 
                    CategoryName = "ASP.NET", 
                    Books = new List<Book>() };
                cat2.Books.Add(new Book() { Title = "Pro ASP.NET 4" }) ;
                Library.Add(cat2);
            }
        }
     
        public class BookCategory
        {
            public string CategoryName { get; set; }
            public List<Book> Books { get; set; }
        }
     
        public class Book
        {
            public string Title { get; set; }
        }

    6. Now we need to define the header and content items, using the ItemTemplate for the header and the ContentTemplate for the content. For the ItemTemplate, we will simply define a TextBlock that will display the BookCategory. For the CotentTemplate, we will define a ListBox control that will contain a list of TextBlocks, each displaying a book Title.

    <toolkit:Accordion Width="200" x:Name="BookList" Margin="10" >
                <toolkit:Accordion.ContentTemplate>
                    <DataTemplate>
                        <ListBox ItemsSource="{Binding Books}" BorderThickness="0">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock FontWeight="Bold" Text="{Binding Title}" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </DataTemplate>
                </toolkit:Accordion.ContentTemplate>
                <toolkit:Accordion.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding CategoryName}" />
                    </DataTemplate>
                </toolkit:Accordion.ItemTemplate>
            </toolkit:Accordion>

    7. Next we need to bind the Library data source to the Accordion Control.

          this.BookList.ItemsSource = Library;

    8. Press F5 to run the solution.

  • 相关阅读:
    bootstrap组件+模板地址
    10个自动化测试框架,测试工程师用起来
    IP地址分类(A类 B类 C类 D类 E类)
    来不及解释!Linux常用命令大全,先收藏再说
    凭借祖传配方年入21亿(王守义十三香),一生坚持不上市,亏待自己也要善待员工
    不同手指戴戒指的含义
    Soul App 是一款怎样的产品? SOUL APP 机缘巧合我开始使用 今天第四天内心想知道大家对它的感受 又其实并没有那么想大家把感受具象化再描述出来 嗯 还是希望大家能说一说(网恋需谨慎,小心骗子)
    解放双手,markdown文章神器,Typora+PicGo+七牛云图床实现自动上传图片
    度学习与自然语言处理
    软件测试面试之剖析面试官
  • 原文地址:https://www.cnblogs.com/jerrychenfly/p/2139565.html
Copyright © 2011-2022 走看看