Filling the RadDiagramToolbox (in MVVM)

3 posts, 0 answers
  1. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 09 Jul 2012 Link to this post

    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 { getset; }
    	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;
    	}
  2. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 10 Jul 2012 Link to this post

    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}" />
    
  3. DevCraft banner
  4. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 11 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top