Adding Controls to the Toolbox

Even thought the Visual Studio designer is read-only for Silverlight, it can still be handy to drag/drop controls from the toolbox into the XAML editor. In order to include the new Silverlight Toolkit controls to your toolbox, just follow these steps:

1.       Right-click the VS toolbox and select “Add New Tab.” Name the tab “Silverlight Toolkit.”

2.       Right-click within the new tab and select “Choose Items.”

3.       In the “Choose Toolbox Items” dialog, go to the “Silverlight Components” tab.

4.       Navigate to the folder where you extracted the toolkit, and then to the Binaries subfolder. Then select the Microsoft.Windows.Controls.dll.  This assembly contains all new controls except the new Charting controls.

5.       Repeat the above step, selecting the Microsoft.Windows.Controls.DataVisualization.dll assembly. This assembly contains the new charting functionality.

TreeView Control

This control does what you might expect  - show a hierarchy of items in an expandable list. But what makes this TreeView control different than what you might be used to is the power of templating in Silverlight.

Let’s look at a very simple example. To add items to the TreeView at runtime, we can define TreeViewItem objects and give them “Header” objects for labels:

    TreeViewItem fruits = new TreeViewItem();
            fruits.Header = "Fruits";
            fruits.Items.Add("Banana");
            fruits.Items.Add("Orange");
            fruits.Items.Add("Apple");

            TreeViewItem veggies = new TreeViewItem();
            veggies.Header = "Veggies";
            veggies.Items.Add("Carrots");
            veggies.Items.Add("Celery");
            veggies.Items.Add("Lettuce");

            tvTest.Items.Add(fruits);
            tvTest.Items.Add(veggies);

 

Hierarchical Data Sources

We can also bind the TreeView to a hierarchical Data Source using the HierarchicalDataTemplate control, and the TreeView will automatically traverse the hierarchy and render each cascading node appropriately. Take, for example this class:

 public class FoodItem 
    {
        public FoodItem(string name, string url)
        {
            Name = name;
            ImageUrl = url;
        }

        public List<FoodItem> Items { get; set; }
        public string Name { get; set; }
        public string ImageUrl { get; set; }
  }

Note that the FoodItem class contains a list of more FoodItems. This allows us to define a hierarchy with FoodItems – for example, Fruits and Veggies:

List<FoodItem> categories = new List<FoodItem>();
FoodItem fruits = new FoodItem("Fruits", " Fruit_in_basket.jpg");
fruits.Items = new List<FoodItem>();
fruits.Items.Add(new FoodItem("Apple", "Red_Delicious.jpg"));
fruits.Items.Add(new FoodItem("Banana", " Banana.png"));
fruits.Items.Add(new FoodItem("Orange", "Orange.JPG"));
categories.Add(fruits); 

FoodItem veggies = new FoodItem("Veggies", "salad.jpg");
veggies.Items = new List<FoodItem>();
veggies.Items.Add(new FoodItem("Carrots", " Carrots.JPG"));
veggies.Items.Add(new FoodItem("Cucumbers", " Cucumbers.jpg"));
veggies.Items.Add(new FoodItem("Peppers", " peppers.jpg"));
categories.Add(veggies);

In order to consume the hierarchical data source, we set up a HierarchicalDataTemplate, with our preferred visual layout for each node in the TreeView. Note how we set the Binding of the HierarchicalDataTemplate to the member collection in the data source class that defines the hierarchy (in this case the generic List “Items”):

<controls:TreeView x:Name="tvFoodItems">
    <controls:TreeView.ItemTemplate>
        <controls:HierarchicalDataTemplate ItemsSource="{Binding Items}">
            <StackPanel Orientation="Horizontal">
                <Image Height="30" HorizontalAlignment="Left" Width="30" Source="{Binding ImageUrl}" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" HorizontalAlignment="Left" FontSize="18" />
            StackPanel>
        controls:HierarchicalDataTemplate>
      controls:TreeView.ItemTemplate>
controls:TreeView>

We can then bind the TreeView in code to our hierarchical list:

tvFoodItems.ItemsSource = categories;

… after which we have an expandable hierarchy like so:

So Much More

I expect there to be a flood of blog posts and resources cropping up over the next week or so on the Silverlight Toolkit – and I’m very excited about the future of the toolkit. According to ScottGu’s release blog post, he says “We will continually add new controls to the control pack over the next few months (we expect to ultimately have more than 100 controls total). ”  Wow! That’s a lot of controls, and given what’s in this initial release, I look forward to seeing what great things the team comes up with!