This is a migrated thread and some comments may be shown as answers.

How to use a TreeListView to make a map legend

2 Answers 125 Views
TreeListView
This is a migrated thread and some comments may be shown as answers.
Hector
Top achievements
Rank 1
Hector asked on 04 Feb 2010, 08:40 PM
I need to build a map legend in silverlight and I would like to use the TreeListView.  I have attaced a screen shot of what the legend should look like.  The data is in a SQL Server and the schema is like so.  All the tables are associated.
LayerInfo:
  ID
  MapResourceDefinitionID
  LayerID
  Name

SymbologyGroup
  ID
  LayerInfoID
  Heading

SymbolInfo
  ID
  Label
  SymbolImage

How can I bind to this data using a TreeListView and display the symbol image from the database when they open the SymbolInfo level.  I was able to create the tree programatically adding each node, but I cannot display the image.  
If the TreeListView is no the best solution what is it?

Thanks in advance!

2 Answers, 1 is accepted

Sort by
0
Tihomir Petkov
Telerik team
answered on 10 Feb 2010, 12:20 PM
Hi Hector,

You only need to set the correct CellTemplate for the column that will display your images. You can see an example of TreeListView that contains images in the link below:

http://demos.telerik.com/silverlight/#TreeListView/FirstLook

Sincerely yours,
Tihomir Petkov
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
0
Hector
Top achievements
Rank 1
answered on 10 Feb 2010, 01:36 PM
Thanks, I did follow the example; however, I was having difficulty getting the image to display.  The image column is a byte[] array type and I was using an <Image> and binding to the source on that column.  It would not show up, so I ended up using a Converter for that column.  Here is the code.  Page.xaml:
<UserControl xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"  xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"  x:Class="RadTreeViewContainerBindings.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    xmlns:local="clr-namespace:RadTreeViewContainerBindings" 
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
    > 
      
    <UserControl.Resources> 
        <local:ImageByteConverter x:Key="ImageConverter" /> 
        <DataTemplate x:Key="SymbolInfo">  
            <StackPanel Orientation="Horizontal" Background="AliceBlue">  
                <Image  Source="{Binding Image, Converter={StaticResource ImageConverter}}" Stretch="Fill" Loaded="Image_Loaded"/>  
                <TextBlock Text="{Binding Label}" Foreground="Blue" FontWeight="Bold" FontSize="9" /> 
            </StackPanel> 
        </DataTemplate> 
 
        <telerik:HierarchicalDataTemplate x:Key="SymbologyGroup" ItemsSource="{Binding SymbolInfos}">  
            <StackPanel Orientation="Horizontal">  
                <TextBlock Text="{Binding Heading}" Foreground="Green"  FontWeight="Bold" FontSize="12" /> 
            </StackPanel> 
        </telerik:HierarchicalDataTemplate> 
 
        <telerik:HierarchicalDataTemplate x:Key="LayerInfo" ItemsSource="{Binding SymbologyGroups}">  
            <StackPanel Orientation="Horizontal">  
                <TextBlock Text="{Binding Name}" Foreground="Black" FontWeight="Bold" FontSize="15" /> 
            </StackPanel> 
        </telerik:HierarchicalDataTemplate> 
        <local:SymboleDataTemplateSelector x:Key="myDataTemplateSelector" LayerTemplate="{StaticResource LayerInfo}"    
                                           SymbologyGroupTemplate="{StaticResource SymbologyGroup}"    
                                           SymbolTemplate="{StaticResource SymbolInfo}"/>  
    </UserControl.Resources> 
 
 
    <Grid x:Name="LayoutRoot" Background="White" Width="500"  HorizontalAlignment="Center" VerticalAlignment="Center">  
        <Grid.Resources> 
            <!-- Expander Style 1--> 
            <Style x:Key="ExpanderStyle1" TargetType="ToggleButton">  
                <Setter Property="IsEnabled" Value="True" /> 
                <Setter Property="IsTabStop" Value="False" /> 
                <Setter Property="Cursor" Value="Hand" /> 
                <Setter Property="Template">  
                    <Setter.Value> 
                        <ControlTemplate TargetType="ToggleButton">  
                            <Grid> 
                                <VisualStateManager.VisualStateGroups> 
                                    <VisualStateGroup x:Name="CommonStates">  
                                        <VisualState x:Name="Normal">  
 
                                        </VisualState> 
                                        <VisualState x:Name="MouseOver">  
                                            <Storyboard> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="Button" 
                                                        Storyboard.TargetProperty="Opacity" To="0" /> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="ButtonOver" 
                                                        Storyboard.TargetProperty="Opacity" To="1" /> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="CheckStates">  
                                        <VisualState x:Name="Checked">  
                                            <Storyboard> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="CollapsedVisual" 
                                                        Storyboard.TargetProperty="Opacity" To="0" /> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="CollapsedVisualOver" 
                                                        Storyboard.TargetProperty="Opacity" To="0" /> 
                                            </Storyboard> 
                                        </VisualState> 
 
                                        <VisualState x:Name="Unchecked">  
                                            <Storyboard> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="CollapsedVisual" 
                                                        Storyboard.TargetProperty="Opacity" To="1" /> 
                                                <DoubleAnimation Duration="0:0:0.05" 
                                                        Storyboard.TargetName="CollapsedVisualOver" 
                                                        Storyboard.TargetProperty="Opacity" To="1" /> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                </VisualStateManager.VisualStateGroups> 
 
                                <Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right" 
                                        VerticalAlignment="Top" Width="11" Height="11">  
                                    <Grid.Background> 
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
                                            <GradientStop Color="#3F047BA5" Offset="0.996" /> 
                                            <GradientStop Color="#00000000" Offset="0" /> 
                                        </LinearGradientBrush> 
                                    </Grid.Background> 
                                    <Rectangle Stroke="#FF000000" HorizontalAlignment="Left" 
                                            VerticalAlignment="Top" Width="11" Height="11" /> 
 
                                    <Rectangle x:Name="CollapsedVisual" Fill="#FF000000" 
                                            HorizontalAlignment="Left" VerticalAlignment="Top" 
                                            Width="1" Height="5" Margin="5,3,0,0" /> 
                                    <Rectangle Fill="#FF000000" VerticalAlignment="Top" 
                                            HorizontalAlignment="Left" Height="1" Width="5" 
                                            Margin="3,5,0,0" /> 
                                </Grid> 
 
                                <Grid x:Name="ButtonOver" Margin="0,7,4,0" 
                                        HorizontalAlignment="Right" VerticalAlignment="Top" 
                                        Width="11" Height="11">  
                                    <Rectangle Stroke="#FF167497" HorizontalAlignment="Left" 
                                            VerticalAlignment="Top" Width="11" Height="11">  
                                        <Rectangle.Fill> 
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
                                                <GradientStop Color="#26167497" Offset="1" /> 
                                                <GradientStop Color="#00167497" Offset="0" /> 
                                            </LinearGradientBrush> 
                                        </Rectangle.Fill> 
                                    </Rectangle> 
                                    <Rectangle x:Name="CollapsedVisualOver" Fill="#FF167497" 
                                            HorizontalAlignment="Left" VerticalAlignment="Top" 
                                            Width="1" Height="5" Margin="5,3,0,0" /> 
                                    <Rectangle Fill="#FF167497" VerticalAlignment="Top" 
                                            HorizontalAlignment="Left" Height="1" Width="5" 
                                            Margin="3,5,0,0" /> 
 
                                </Grid> 
                            </Grid> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </Grid.Resources> 
        <ScrollBar Height="400" /> 
        <StackPanel> 
             
        <dataInput:Label Content="Legend:"></dataInput:Label> 
            <telerikNavigation:RadTreeView x:Name="LegendTreeView" Width="290"  ExpanderStyle="{StaticResource ExpanderStyle1}" 
                ItemTemplateSelector="{StaticResource myDataTemplateSelector}"   
                 /> 
        </StackPanel> 
              
    </Grid> 
</UserControl> 
 
Page.xaml.cs
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
using WebApplication1;  
using System.Windows.Ria.Data;  
using Telerik.Windows.Controls;  
using System.Windows.Data;  
using System.IO;  
using System.Windows.Media.Imaging;  
using System.Threading;  
 
 
 
namespace RadTreeViewContainerBindings  
{  
    public partial class Page : UserControl  
    {  
        LegendInfoContext lendDataContext = new LegendInfoContext();  
        IList<LayerInfo> _layerData = new List<LayerInfo>();  
          
        public Page()  
        {  
            InitializeComponent();  
            this.Loaded += new RoutedEventHandler(Page_Loaded);  
        }  
 
        void Page_Loaded(object sender, RoutedEventArgs e)  
        {  
            //Get the legend info for the dynamic service  
            int MapResourceID = 27;  
            EntityQuery<LayerInfo> query = from l in lendDataContext.GetLayerInfosQuery()  
                                                  where l.MapResourceDefinitionID == MapResourceID  
                                                  select l;  
            object state = null;  
            LoadOperation loadOp = lendDataContext.Load(query, LoadLegendInfoCallBack, state);  
        }  
 
        private void LoadLegendInfoCallBack(LoadOperation<LayerInfo> lo)  
        {  
            if (lo.HasError) return;  
 
            foreach (LayerInfo li in lo.Entities)  
            {  
                _layerData.Add(li);  
            }  
            this.LegendTreeView.ItemsSource = _layerData;  
        }  
 
        private void Image_Loaded(object sender, RoutedEventArgs e)  
        {  
 
        }  
    }  
 
    public class SymboleDataTemplateSelector : DataTemplateSelector  
    {  
        public HierarchicalDataTemplate LayerTemplate  
        {  
            get;  
            set;  
        }  
 
        public HierarchicalDataTemplate SymbologyGroupTemplate  
        {  
            get;  
            set;  
        }  
        public DataTemplate SymbolTemplate  
        {  
            get;  
            set;  
        }  
 
        public override DataTemplate SelectTemplate(object item, DependencyObject container)  
        {  
            base.SelectTemplate(item, container);  
 
            if (item is LayerInfo)  
            {  
                return this.LayerTemplate;  
            }  
            else if (item is SymbologyGroup)  
            {  
                return this.SymbologyGroupTemplate;  
            }  
            else if (item is SymbolInfo)  
            {  
                return this.SymbolTemplate; ;  
            }  
            return null;  
        }  
    }  
 
 
}  
 

ImageByteConverter.cs
using System;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Ink;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
using System.Windows.Data;  
using System.IO;  
using System.Windows.Media.Imaging;  
using System.Globalization;  
using WebApplication1;  
using System.Collections.Generic;  
using System.Windows.Ria.Data;  
 
namespace RadTreeViewContainerBindings  
{  
    public class ImageByteConverter : IValueConverter  
    {  
        public static object ByteToBitmap(byte[] byteImg)  
        {  
            using (MemoryStream ms = new MemoryStream(byteImg, 0, byteImg.Length))  
            {  
                //Convert byte[] to image  
                Image image = new Image();  
                BitmapImage bitmapimage = new BitmapImage();  
                MemoryStream stream = new MemoryStream(byteImg);  
                bitmapimage.SetSource(stream);  
                return bitmapimage;  
            }  
        }  
 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            byte[] byteImg = (byte[])value;  
            //Convert byte to image  
            return ByteToBitmap(byteImg);  
        }  
 
          
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
 
    }  
 
    public class GetFirstImage : IValueConverter  
    {  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            EntityCollection<SymbologyGroup> symbolGroup = (EntityCollection<SymbologyGroup>)value;  
            ImageByteConverter converter = new ImageByteConverter();  
            return converter.Convert(symbolGroup[0].SymbolInfos[0].Image,nullnullnull);  
        }  
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
    }  
}  
 

It is working great now.  Thanks.
Tags
TreeListView
Asked by
Hector
Top achievements
Rank 1
Answers by
Tihomir Petkov
Telerik team
Hector
Top achievements
Rank 1
Share this question
or