Filling the RadDiagramToolbox (in MVVM)

[Tom]

I'm having trouble filling the RadDiagramToolbox  (Telerik.Windows.Controls.Diagrams.Extensions.RadDiagramToolbox) with my custom shapes.    

I had this working when using the old, externally compiled, RadDiagramToolbox (in the 'Features' solution), but the only output here are the type names (see attached).     The custom shapes, which are all pulled from the application's Resources, worked fine with that component.


___________________________________

Xaml

<telerik:RadDiagramToolbox x:Name="ToolBox" Title="Gallery" 
	Margin="0 0 -1 -1" Grid.Row="1" Grid.Column="1" 
	d:LayoutOverrides="Height" 
	Width="260" HorizontalAlignment="Right"  
	ItemsSource="{Binding ToolboxItems}" />

Code:

	public HierarchicalGalleryItemsCollection _toolboxItems { get; set; }
	public HierarchicalGalleryItemsCollection ToolboxItems
	{
		get
		{
			if (_toolboxItems== null)
				LoadToolbox();
			return _toolboxItems;
		}
		set 
		{ 
			_toolboxItems = value;
		}
	}

	private void LoadToolbox()
	{
		var items = new HierarchicalGalleryItemsCollection();
		items.Clear();
 
		var controlList = <list of resource names> 
		var galleryCollection = new Gallery() { Header = "General"}; 
		controlList.ForEach(c => galleryCollection.Items.Add(
				new GalleryItem(c, 
					new CustomShape() 
					{
						 Name = c, 
						Style = (Style)Application.Current.Resources[c] 
					})));
		items.Add(galleryCollection);
 
		_toolboxItems = items;
	}

[Tom]

I found the problem -->  it needed a data template:

<telerik:HierarchicalDataTemplate x:Key="itemTemplate" ItemsSource="{Binding Items}">
       <telerik:HierarchicalDataTemplate.ItemTemplate>
                    <DataTemplate>
                         <telerik:RadDiagramShape Content="{Binding Shape}" Width="60" Height="60" />
                    </DataTemplate>
              </telerik:HierarchicalDataTemplate.ItemTemplate>
	<TextBlock Text="{Binding Header}"></TextBlock>
</telerik:HierarchicalDataTemplate>

<telerik:RadDiagramToolbox x:Name="ToolBox" ItemTemplate="{StaticResource itemTemplate}" ItemsSource="{Binding ToolboxItems}" />

[Miro Miroslavov]

Hello Tom,

 Yes, it needs a DataTemplate. We usually use the following template:

<DataTemplate x:Key="ToolboxItemTemplate">
    <Border Background="Transparent" Margin="0 1 1 0" Width="76" Height="100">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Viewbox Width="64" Height="50" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center"
                    Margin="5 10 5 0">
                <telerik:RadDiagramShape Margin="15" VerticalAlignment="Top" HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center" Geometry="{Binding Shape.Geometry}"
                        IsHitTestVisible="False" />
            </Viewbox>
            <TextBlock Grid.Row="1" Text="{Binding Header}" TextWrapping="Wrap" Padding="4 0" Margin="0 0 0 5"
                    TextAlignment="Center" FontFamily="Segoe UI Semibold" HorizontalAlignment="Center" />
        </Grid>
    </Border>

</DataTemplate>
<telerik:HierarchicalDataTemplate x:Key="ToolboxTemplate" ItemsSource="{Binding Items}"
        ItemTemplate="{StaticResource ToolboxItemTemplate}">
    <TextBlock Text="{Binding Header}" />
</telerik:HierarchicalDataTemplate>

It just has a Header and the viewbox is supposed to stretch the shape in it. But it can be anything.
Let us know if you have further questions. 

Kind regards,
Miro Miroslavov
the Telerik team