New to Telerik UI for WPF? Download free 30-day trial

Extensions

The RadDiagramRibbon control allows you to easily add one or all of the following RadDiagram and RadRibbonView extensions. This way you can give the user ability to show/hide any of the specified extensions dynamically.

Figure 1: DiagramRibbon Extensions

Diagram Ribbon Overview

RadDiagramToolBox

To add a RadDiagramToolbox to the RadDiagramRibbon control, you can bind the ToolBox property to a RadDiagramToolBox using an ElementName binding.

Example 1: Add RadDiagramToolbox to DiagramRibbon

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <telerik:RadDiagramRibbon Grid.ColumnSpan="2" Diagram="{Binding ElementName=diagram}" Toolbox="{Binding ElementName=toolBox}"/> 
    <telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1"> 
        <telerik:RadDiagramShape Content="Shape 1"/> 
    </telerik:RadDiagram> 
    <telerik:RadDiagramToolbox x:Name="toolBox" Grid.Column="0" Grid.Row="1" ItemsSource="{Binding GalleryItems}" />       
</Grid> 

DiagramNavigationPane

To add a RadDiagramNavigationPane to the RadDiagramRibbon control, you can bind the NavigationPane property to a RadDiagramNavigationPane using an ElementName binding.

Example 2: Add RadDiagramNavigationPane to DiagramRibbon

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <telerik:RadDiagramRibbon Grid.ColumnSpan="2"  
                              Diagram="{Binding ElementName=diagram}"  
                              NavigationPane="{Binding ElementName=navigationPane}"/> 
    <telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1"> 
        <telerik:RadDiagramShape Content="Shape 1"/> 
    </telerik:RadDiagram> 
    <telerik:RadDiagramNavigationPane Grid.Column="1" Grid.Row="1" x:Name="navigationPane" Diagram="{Binding ElementName=diagram}" HorizontalAlignment="Left" VerticalAlignment="Bottom" />     
</Grid> 

RadDiagramRuler

To add a RadDiagramRuler to the DiagramRibbon the VerticalRuler and HorizontalRuler properties can be bound to RadDiagramRuler instances using an ElementName binding.

Example 3: Add RadDiagramRuler to DiagramRibbon

    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
            <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
        <telerik:RadDiagramRibbon Grid.Column="1" 
                                  Diagram="{Binding ElementName=diagram}"     
                                  VerticalRuler="{Binding ElementName=verticalRuler}" 
                                  HorizontalRuler="{Binding ElementName=horizontalRuler}"/> 
        <telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1"> 
            <telerik:RadDiagramShape Content="Shape 1"/> 
        </telerik:RadDiagram> 
        <telerik:RadDiagramRuler x:Name="verticalRuler" Placement="Left" Diagram="{Binding ElementName=diagram}" Grid.Row="1" Grid.Column="0"/> 
        <telerik:RadDiagramRuler x:Name="horizontalRuler" Placement="Bottom" Diagram="{Binding ElementName=diagram}" Grid.Column="1" Grid.Row="2" Grid.RowSpan="2"/> 
    </Grid> 

QuickAccessToolBar

To add QuickAccessToolBar to the DiagramRibbon you can bind the QuickAccessToolBar property a QuickAccessToolBar instance using an ElementName binding.

Example 4: Add QuickAccessToolBar to DiagramRibbon

    <Grid> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
            <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
        <telerik:RadDiagramRibbon Grid.Column="1" 
                                  Diagram="{Binding ElementName=diagram}"   
                                  QuickAccessToolBarPosition="BelowRibbon"> 
            <telerik:RadDiagramRibbon.QuickAccessToolBar> 
                <telerik:QuickAccessToolBar/> 
            </telerik:RadDiagramRibbon.QuickAccessToolBar> 
        </telerik:RadDiagramRibbon> 
        <telerik:RadDiagram x:Name="diagram" Grid.Row="1" Grid.Column="1"> 
            <telerik:RadDiagramShape Content="Shape 1"/> 
        </telerik:RadDiagram>     
    </Grid> 

RadRibbonBackstage

To add a Backstage to the DiagramRibbon you can use the Backstage property and declare a RadRibbonBackstage element.

Example 5: Add Backstage to DiagramRibbon

<Grid x:Name="LayoutRoot"> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <telerik:RadDiagramRibbon Diagram="{Binding ElementName=diagram}"    
                              BackstageClippingElement="{Binding ElementName=LayoutRoot}"> 
        <telerik:RadDiagramRibbon.Backstage> 
            <telerik:RadRibbonBackstage> 
                <telerik:RadRibbonBackstageItem Header="Samples" IsDefault="true"> 
                    <ListBox x:Name="SamplesList" BorderThickness="0" HorizontalAlignment="Center"/> 
                </telerik:RadRibbonBackstageItem> 
            </telerik:RadRibbonBackstage> 
        </telerik:RadDiagramRibbon.Backstage> 
    </telerik:RadDiagramRibbon> 
    <telerik:RadDiagram x:Name="diagram" Grid.Row="1"> 
        <telerik:RadDiagramShape Content="Shape 1"/> 
    </telerik:RadDiagram>     
</Grid> 

See Also

In this article