How to RadDiagram Toolbox shape in Item area orientation as vertical ?

[Hiren]

Hello,

I Required to make the RadDiagramToolBox ItemArea on Vertical so that only one shape can display in one row next shape will be display in second line and so on.

Please find the attached screen shot how it look likes

ToolboxOrignal.Png is the Actually functionaliyt
ToolBoxItemsAreaVertial.png  is what we want to achieve.

Please let me know if you required more information.

Thanks,
Hiren

[Pavel R. Pavlov]

Hello Hiren,

I am happy to inform you that there is straightforward approach to achieve your requirement. You can try setting the Width property of the RadDiagramToolbox control. If you for example set it to 250 pixels (or something similar) the items in a group will be reordered as you require.

Please try this approach out and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

[Kunal Chowdhury]

Hi Hiren,

Exactly the same requirement I had and I resolved this by using a small trick. Here I documented the trick in my blog: http://www.kunal-chowdhury.com/2013/12/how-to-set-no-of-columns-in-teleriks.html. Please check it out and let me know, if that worked for you. Mark As Answer if it helped.

[Marco]

This is unfortunaly not working. Do you have an other solution for this problem? It still shows me three columns, now cutted.

 

<telerik:RadDiagramToolbox x:Name="ControlToolbox" 
                                   Width="290"
                                   Title="Controls" 
                                   Header="{Binding SelectedItem.Header, 
                                            RelativeSource={RelativeSource Self}}" 
                                   ItemsSource="{Binding Items}" 
                                   ItemTemplate="{StaticResource ToolboxGroupTemplate}" />

[Martin Ivanov]

Hello Marco,

You are right. Setting the Width doesn't work as expected. Instead, you can use the Kunal's approach. In other words, set the ItemsPanel of RadDiagramToolboxGroup to UnformGrid. For example:

<Window.Resources>
	<Style TargetType="telerik:RadDiagramToolboxGroup">
		<Setter Property="ItemsPanel">
			<Setter.Value>
				<ItemsPanelTemplate>
					<telerik:RadUniformGrid VerticalAlignment="Top" Columns="1" />
				</ItemsPanelTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>

Regards,
Martin Ivanov
Progress Telerik

[Marco]

Not this lead that the ToolboxGroup is hidden. I have the solution with a HierarchicalDataTemplate as Group Template. maybe this can explain.

 <view:UserControlBase.Resources>
        <!-- Generic toolbox template -->
        <DataTemplate x:Key="ToolboxItemTemplate">
            <telerik:RadDiagramToolboxItem Name="ControlItem" Width="Auto" Background="Transparent">
                <Border BorderThickness="1" 
                    BorderBrush="Black"
                    Background="Transparent">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Viewbox Width="Auto" MaxWidth="100"  
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" 
                            IsHitTestVisible="False"
                            ToolTip="{Binding Presentation.Value.LocationString.Value, Converter={StaticResource StringToResourceConverter}, Mode=OneWay}"
                            Stretch="Uniform">
                            <Image Margin="0"
                                   VerticalAlignment="Top" 
                                   Source="{Binding Presentation.Value.IconResource.Value, Converter={StaticResource StringToResourceConverter}, Mode=OneWay}"
                                   IsHitTestVisible="True" />
                        </Viewbox>
                        <TextBlock Grid.Row="1" 
                                   HorizontalAlignment="Center" 
                                   Padding="1 0" 
                                   Text="{Binding Presentation.Value.PresentableText.Value}" 
                                   TextAlignment="Center" 
                                   FontSize="12"
                                   TextWrapping="Wrap" />
                    </Grid>
                </Border>
            </telerik:RadDiagramToolboxItem>
        </DataTemplate>

        <!-- Generic toolbox template -->
        <DataTemplate x:Key="ToolboxHeader">
            <TextBlock Text="Drop to diagram to add." 
                       FontStyle="Italic"
                       FontSize="9"
                       Foreground="Black" 
                       VerticalAlignment="Center" />
        </DataTemplate>

        <HierarchicalDataTemplate x:Key="ToolboxGroup"
                                  ItemTemplate="{StaticResource ToolboxItemTemplate}"
                                  ItemsSource="{Binding Children}" >
            <StackPanel Orientation="Horizontal">
                <Image Margin="2,2,5,2" Width="20"
                       VerticalAlignment="Top" 
                       Source="{Binding Presentation.Value.IconResource.Value, Converter={StaticResource StringToResourceConverter}, Mode=OneWay}" />
                <TextBlock Text="{Binding Presentation.Value.PresentableText.Value}" 
                           FontWeight="Bold" 
                           Foreground="Black" 
                           VerticalAlignment="Center" />
            </StackPanel>
        </HierarchicalDataTemplate>

       
    </view:UserControlBase.Resources>

    <Grid>
        <!-- Tree area -->
        <ScrollViewer Width="Auto"
                      HorizontalScrollBarVisibility="Auto" 
                      VerticalScrollBarVisibility="Auto"
                      HorizontalAlignment="Left">
            <telerik:RadDiagramToolbox x:Name="ControlToolbox" 
                                   Title="Extended Controls" 
                                   HorizontalAlignment="Left"
                                   Header="{Binding SelectedItem.Presentation.Value.PresentableText.Value, RelativeSource={RelativeSource Self}}" 
                                   HeaderTemplate ="{StaticResource ToolboxHeader}"
                                   ItemsSource="{Binding ToolboxTreeControls.Roots}"
                                   ItemTemplate="{StaticResource ToolboxGroup}"
                                   Visibility="{Binding IsChecked, ElementName=toolboxButton, Converter={StaticResource BooleanToVisibilityConverter}}">
            </telerik:RadDiagramToolbox>
        </ScrollViewer>

    </Grid>
</view:UserControlBase>

[Martin Ivanov]

Hello Marco,

Thank you for sharing your code.

About the hidden RadDiagramToolboxGroup, I will guess that NoXaml dlls are referenced in the project. You can see how to troubleshoot this in the Missing Controls in the UI article. If this is your case, you can show the group by setting the BasedOn property of the Style object.

<Window.Resources>
	<Style TargetType="telerik:RadDiagramToolboxGroup" BasedOn="{StaticResource RadDiagramToolboxGroupStyle}">
		<Setter Property="ItemsPanel">
			<Setter.Value>
				<ItemsPanelTemplate>
					<telerik:RadUniformGrid VerticalAlignment="Top" Columns="1" />
				</ItemsPanelTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>

Regards,
Martin Ivanov
Progress Telerik

[Marco]

Thank you verry much thsi worked for me.