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
0
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.
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:
Page.xaml.cs
ImageByteConverter.cs
It is working great now. Thanks.
<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> |
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,null, null, null); |
} |
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) |
{ |
throw new NotImplementedException(); |
} |
} |
} |
It is working great now. Thanks.