How to use a TreeListView to make a map legend

3 posts, 0 answers
  1. Hector
    Hector avatar
    92 posts
    Member since:
    May 2009

    Posted 04 Feb 2010 Link to this post

    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. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 10 Feb 2010 Link to this post

    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.
  3. DevCraft banner
  4. Hector
    Hector avatar
    92 posts
    Member since:
    May 2009

    Posted 10 Feb 2010 Link to this post

    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.
Back to Top