Introduction
Visual Studio LightSwitch is a Microsoft tool for building business applications. There are many Silverlight controls available in Visual Studio LightSwitch. In which Treeview is a also Silverlight control. Treeview is used for displaying data in a tree form. We can say that when we want to display our data in a hierarchal format then we can use the Treeview control in a LightSwitch application. Reference by (http://lightswitchhelpwebsite.com/)
How to use Treeview control
Step 1 : First of all open Visual Studio LightSwitch->New project->Select LightSwitch application->Write name (TreeviewControl)->Ok.
![Image1.png]()
Step 2 : Click on create new table.
![Image2.png]()
Step 3 : Create table like as Category.
![Image3.png]()
Step 4 : Now we will establish a relationship among Categories table.
Click on relationship->select name and multiplicity->ok.
![Image4.png]()
Step 5 : Now we will add a screen. Right click on screens->Add screen.
![Image5.png]()
Step 6 : Select Editable Grid Screen->Select screen data (Categories)->Ok.
![Image6.png]()
Step 7 : Click on add data item->Select query->select categories->Write name (CategoriesTree)->ok.
![Image7.png]()
Step 8 : Click on EditQuery in CategoriesTree.
![Image8.png]()
Step 9 : Click on filter->Select IsRootNode>Select literal->True.
![Image9.png]()
Step 10 : Go to menu bar->File->Add->New project.
![Image10.png]()
Step 11 : Select Silverlight->Select Silverlight Class library->Write name (SilverlightProject)->Ok->Select Silverlight 4->Ok.
![Image11.png]()
Step 12 : Right click on SilverlightProject->Add references.
![Image12.png]()
Step 13 : Browse (C:\Program Files\Visual Studio 2010\Common7\IDE\LightSwitch\1.0\client)->Select Microsoft.LightSwitch.Base.Client.dll, Microsoft.LightSwitch.Client.dll and Microsoft.LightSwitch.dll->Ok.
![Image13.png]()
Step 14 : Now delete the class1.cs from SilverlightProject.
![Image14.png]()
Step 15 : Now we will add a new class. Right click on SilverlightProject->Add->New item.
![Image15.png]()
Step 16 : Select Class->Write name (EntityCollectionValueConverter.cs)->Add->Write code.
![Image16.png]()
code : Reference by LightSwitchHelpWebsite
using System;
using System.Windows.Data;
using Microsoft.LightSwitch;
using System.Diagnostics;
using System.Collections.ObjectModel;
using System.Collections.Generic;
namespace SilverlightProject
{
public class EntityCollectionValueConverter : IValueConverter
{
public object Convert(object value,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
string strErrorMessage
= "Converter parameter set to the property name that will serve as data source";
IEntityObject entity = value as IEntityObject;
if (entity == null)
throw new ArgumentException("The converter using an entity object");
string sourcePropertyName = parameter as string;
if (string.IsNullOrWhiteSpace(sourcePropertyName))
throw new ArgumentException(strErrorMessage);
var entities = new ObservableCollection<IEntityObject>();
var temporaryEntites = new List<IEntityObject>();
entity.Details.Dispatcher.BeginInvoke(delegate
{
IEntityCollection eCollection =
entity.Details.Properties[sourcePropertyName].Value as IEntityCollection;
if (eCollection == null)
{
Debug.Assert(false, "The property is " + sourcePropertyName + " not an entity collection");
return;
}
foreach (IEntityObject e in eCollection)
{
temporaryEntites.Add(e);
}
Microsoft.LightSwitch.Threading.Dispatchers.Main.BeginInvoke(delegate
{
foreach (IEntityObject e in temporaryEntites)
{
entities.Add(e);
}
});
});
return entities;
}
public object ConvertBack(object value,
Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Step 17 : Now we will add Silverlight User Control.
Right click on SilverlightProject->Add->New item->Select Silverlight User Control->Write name (SilverlightTreeControl.xaml)->Add->Write xaml code.
![Image17.png]()
Code
<UserControl x:Class="SilverlightProject.SilverlightTreeControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SilverlightProject"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<local:EntityCollectionValueConverter x:Key="EntityCollectionValueConverter" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal">
<sdk:TreeView Name="treeViewControl" ItemsSource="{Binding Screen.CategoriesTree}">
<sdk:TreeView.ItemTemplate>
<sdk:HierarchicalDataTemplate
ItemsSource="{Binding
Converter={StaticResource EntityCollectionValueConverter},
ConverterParameter=Categories}">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
<TextBlock Text="{Binding Path=CategoryName, Mode=TwoWay}"
Margin="5,0" Width="74" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
</sdk:TreeView.ItemTemplate>
</sdk:TreeView>
</StackPanel>
</Grid>
</UserControl>
Step 18 : Expand add->New custom control.
![Image18.png]()
Step 19 : Click on add references->Select SilverlightProject->Ok.
![Image20.png]()
Step 20 : Expand SilverlightProject->Select SilverlightTreecontrol->Ok.
![Image21.png]()
Step 21 : Run application (Press F5). Now click on + sign to fill data. Now you can select categories like as one-one or two-one.
![Image22.png]()
Conclusion
So in this article you saw, how to use a Treeview control in a LightSwitch application.
Some Helpful Resources