How to show BackStage layout in Designer

2 posts, 0 answers
  1. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 14 Dec 2011 Link to this post



    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>
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Dec 2011 Link to this post

    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 >>

  3. DevCraft banner
Back to Top