TreeView Control in Visual Studio LightSwtch 2011

In this article you will see, how to use the Treeview control in a Visual Studio LightSwitch application.


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