Blogger news

Blogger templates

Friday, February 25, 2011

Silverlight Accordion

Before start reading this I strongly recommend for the basic understanding of DataBinding in Silverlight. Please click here to redirect to my blog on DataBinding.

The Accordion control lets you include a collection of expandable and collapsible panels that allow you to show groups of content. Each accordion contains a header item and a content item. When the user clicks on the header item, it either expands or collapses the section, showing or hiding its content items. I will explain step by step with an example,

Step1:
Create a new Silverlight application in Visual Studio 2010 called AccordionControl as below. Click image to expand,
Step 2: Allow Visual Studio to create a Web Application project to host the application as shown below. Click OK, Step 3:

With the MainPage.xaml file selected, position the cursor in the source in the 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"

Click image below to see the XAML for the same,
If Accordion is not in tool box add it from Silverlight components as show below. Click images to expand,




Select Accordion from components and click ok. Now Accordion will add to your tool box.

Step 4:
After you’ve added the Accordion, right-click on the control in the design view and select Reset Layout ➤ All, as shown image below. Then Name the Accordion CategoryList, set its Width to 200, and specify a Margin of 10.
or add Name and width in XAML as below,

<Grid x:Name="LayoutRoot" Background="White">
<toolkit:Accordion Name="ProductList" Width="200" Margin="10" />
Grid>


Step 5:

Switch to the code behind in the file MainPage.xaml.cs. 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 one for Prodcuts. see the code snippet below,

namespace AccordionControl
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
}

public class Category
{
public string CategoryName { get; set; }
public List<Product> Products { get; set; }
}

public class Product
{
public string ProductName { get; set; }
}
}

Step 6:

Next we need to populate the classes with some data. To do this, first wire up the Loaded event and insert the following code inside constructor ( MainPage() )

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

then write a method with name
"MainPage_Loaded" and Populate entities(Category and Product) with data as shown below,

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Category category1 = new Category
{
CategoryName = "Vehicle",
Products = new List<Product>
{
new Product {ProductName = "Car"},
new Product {ProductName = "Bus"},
new Product {ProductName = "Truck"},
new Product {ProductName = "Bike"}
}

};

Category category2 = new Category
{
CategoryName = "Soft Drinks",
Products = new List<Product>
{
new Product {ProductName = "Pepsi"},
new Product {ProductName = "ThumsUp"},
new Product {ProductName = "Coca-Cola"},
new Product {ProductName = "7 Up"}
}
};

List<Category> categories = new List<Category> { category1, category2 };
}

Above code i have initialized Category entity and stored it in a Category List.

Step 7:

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’ll simply define a TextBlock that will display the Category. For the ContentTemplate, we’ll define a ListBox control that will contain a list of TextBlocks, each displaying a ProductName.

Click image below to see the xaml code,


or see code below

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

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

<toolkit:Accordion.ContentTemplate>

<DataTemplate>

<ListBox ItemsSource="{Binding Products}" BorderThickness="0">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock FontWeight="Bold" Text="{Binding ProductName}" />

DataTemplate>

ListBox.ItemTemplate>

ListBox>

DataTemplate>

toolkit:Accordion.ContentTemplate>

<toolkit:Accordion.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding CategoryName}" />

DataTemplate>

toolkit:Accordion.ItemTemplate>

toolkit:Accordion>

Grid>


Click image below see the description of above XAML code,

Step 8:

Next we need to bind the categories data source to the Accordion control as shown below,

this.ProductList.ItemsSource = categories;

The full code is listed below,

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

namespace AccordionControl

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Category category1 = new Category
{

CategoryName = "Vehicle",

Products = new List<Product>

{

new Product {ProductName = "Car"},

new Product {ProductName = "Bus"},

new Product {ProductName = "Truck"},

new Product {ProductName = "Bike"}

}

};

Category category2 = new Category

{

CategoryName = "Soft Drinks",

Products = new List<Product>

{

new Product {ProductName = "Pepsi"},

new Product {ProductName = "ThumsUp"},

new Product {ProductName = "Coca-Cola"},

new Product {ProductName = "7 Up"}

}

};

List<Category> categories = new List<Category> { category1, category2 };

this.ProductList.ItemsSource = categories;

}

}

public class Category

{

public string CategoryName { get; set; }

public List<Product> Products { get; set; }

}

public class Product

{

public string ProductName { get; set; }

}

}

Step 9:

Now run the application. Yes now you can see Siliverlight Accordion control as show below. You can expand and collapse each. Click image below to expand,



No comments:

Post a Comment