This is a migrated thread and some comments may be shown as answers.

How to show BackStage layout in Designer

1 Answer 99 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Lasse
Top achievements
Rank 1
Lasse asked on 14 Dec 2011, 11:32 AM


  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>

1 Answer, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 19 Dec 2011, 09:34 AM
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

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

Tags
RibbonView and RibbonWindow
Asked by
Lasse
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Share this question
or