TreeView Control in Visual Studio LightSwtch 2011

Vineet Kumar Saini
Feb 05, 2012
15.5k
0
0
Article

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.

Step 2 : Click on create new table.

Step 3 : Create table like as Category.

Step 4 : Now we will establish a relationship among Categories table.

Click on relationship->select name and multiplicity->ok.

Step 5 : Now we will add a screen. Right click on screens->Add screen.

Step 6 : Select Editable Grid Screen->Select screen data (Categories)->Ok.

Step 7 : Click on add data item->Select query->select categories->Write name (CategoriesTree)->ok.

Step 8 : Click on EditQuery in CategoriesTree.

Step 9 : Click on filter->Select IsRootNode>Select literal->True.

Step 10 : Go to menu bar->File->Add->New project.

Step 11 : Select Silverlight->Select Silverlight Class library->Write name (SilverlightProject)->Ok->Select Silverlight 4->Ok.

Step 12 : Right click on SilverlightProject->Add references.

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.

Step 14 : Now delete the class1.cs from SilverlightProject.

Step 15 : Now we will add a new class. Right click on SilverlightProject->Add->New item.

Step 16 : Select Class->Write name (EntityCollectionValueConverter.cs)->Add->Write code.

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.

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>