How to show BackStage layout in Designer

[Lasse]

1. Is it possible to show the BackStage in the designer, so it would be easier to design the layout?
2. Is it possible to change the width of the left menu, containing the BackStageItems?

Here is my current XAML:

<telerik:RadRibbonView Name="RadRibbonView" Title="" ApplicationName="Test Application" IsTextSearchEnabled="False" UseLayoutRounding="True" TitleBarVisibility="Visible" IsBackstageOpen="True" QuickAccessToolBarPosition="AboveRibbon">
    <telerik:RadRibbonView.Backstage>
        <telerik:RadRibbonBackstage Name="RadRibbonBackstage">
            <telerik:RadRibbonBackstageItem Header="About Test Application" Height="36" Margin="0,7,0,0" Name="radRibbonBackstageItem1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="127" />
        </telerik:RadRibbonBackstage>
    </telerik:RadRibbonView.Backstage>
    <telerik:RadRibbonView.ApplicationButtonContent>
        <TextBlock Text="File" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 4 0 0" />
    </telerik:RadRibbonView.ApplicationButtonContent>

    <telerik:RadRibbonTab Header="Home" Name="RibbonTabHome">
        <telerik:RadRibbonGroup Header="New" Icon="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png" Name="GroupHomeNew">
            <telerik:RadRibbonButton Content="Add" Name="ButtonAddNew" />
        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Icon="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png" Header="Delete" Name="GroupHomeDelete" VerticalAlignment="Stretch">
            <telerik:RadCollapsiblePanel>
                <telerik:RadButtonGroup Margin="2">
                    <telerik:RadRibbonButton Content="Test" Size="Large" />
                    <telerik:RadRibbonButton Content="Test" Size="Large" />
                    <telerik:RadRibbonButton Content="Test" Size="Large" />
                </telerik:RadButtonGroup>
            </telerik:RadCollapsiblePanel>
        </telerik:RadRibbonGroup>
        <telerik:RadRibbonGroup Icon="/Telerik.Windows.Controls.RibbonView;component/RibbonGroupCollapsedIcon.png" />
    </telerik:RadRibbonTab>

</telerik:RadRibbonView>

[Petar Mladenov]

Hi Mikkel,

There is no way to show the RibbonBackStage in designer unless you define it outside the RadRibbonView:

<telerik:RadRibbonBackstage >
                   <telerik:RadRibbonBackstageItem Header="ITEM WITH BIG HEADER TEXT" />
</telerik:RadRibbonBackstage>

Basically the left Menu that contains the BackStageItems has MinWidth set to 130 and expands to the width of the widest BackstageItem's Header (if it is wider than 130). You can edit the Style of the RadRibbonBackstage and control this Minwidth like so:

<Style x:Key="RadRibbonBackstageStyle1" TargetType="telerik:RadRibbonBackstage">
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="Align" Value="Right"/>
           <Setter Property="TabStripPlacement" Value="Left"/>
           <Setter Property="TabOrientation" Value="Vertical"/>
           <Setter Property="IsTabStop" Value="False"/>
           <Setter Property="Background" Value="{StaticResource RibbonnBackStage_Background}"/>
           <Setter Property="BorderBrush" Value="{StaticResource RibbonnBackStage_BorderBrush}"/>
           <Setter Property="BorderThickness" Value="0,0,1,0"/>
           <Setter Property="ItemContainerStyleSelector">
               <Setter.Value>
                   <telerik:BackstageContainerStyleSelector>
                       <telerik:BackstageContainerStyle ContainerStyle="{StaticResource BackstageGroupSeparator}"/>
                   </telerik:BackstageContainerStyleSelector>
               </Setter.Value>
           </Setter>
           <Setter Property="ItemsPanel">
               <Setter.Value>
                   <ItemsPanelTemplate>
                       <StackPanel MinWidth="250"/>
                   </ItemsPanelTemplate>
               </Setter.Value>
           </Setter>
           <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
           <Setter Property="Template" Value="{StaticResource TabControlTemplate}"/>
       </Style>

The Green Background shows the changed MinWidth (from 130 to 250). Please let us know if you need further assistance. All the best,
Petar Mladenov
the Telerik team