RibbonView + Resizing

[Jason]

Hi there,

I'm currently using a trial version of your ribbon view in order to determine if it can provide all the functionality we require, before making a potential purchase.

I'm currently looking at resizing, and have found the documentation lacking, and quite confusing.

Can someone please explain the relationship between RadRibbonGroup.Variants, RadCollapsiblePanel and RadRibbonButton.CollapseToXXX (Medium/Small)

Essentially what i want is a RadRibbonTab, with X RibbonGroups, each containing Y RibbonButtons.

• Shrinking the window will cause the ribbon groups (and i guess the buttons in them) to go from Large->Medium->Small->Collapsed.
• Expanding the window causes the ribbon groups (and i guess the buttons in them) to go from Collapsed->Small->Medium->Large

I'm having a range of problems which vary depending on a number of unknowns

• What order should my variants be in if i want them all? (Is this documented anywhere?)
• What order is priority processed in?
• Do i need a CollapsiblePanel?
• Is RibbonButton.CollapseToXXX a one way operation? Or should the button expand when the ribbon group does?
• Is the resizing really right to left? It looks left to right to me.

Would it be possible to get some sample code which has the aforementioned functionality, so i can see where im going wrong?

Many Thanks

[Jason]

Ok, So i've managed to exactly pin down the erratic behavior and it appears related using variants on a group containing a RibbonDropDownButton.

• Start App

• Using the code at the bottom of this post. Slowly shrink the outer window from the right hand side, so that the first tab group goes down each resizing stage from Large -> Collapsed
• Shrink it a little more, so that the RibbonDropDown button gets resized. On resize, notice that after this all groups in this tab get scaled down, and cant be scaled back up.

• Close & Start the app
• Quickly shrink the window from the right hand side, so that all groups are collapsed.
• After expanding, notice that the RibbonDropDownButton will resize correctlly and no longer breaks the scaling of the other groups, even when slowly shrinking the window.

Note: a.png is a 16x16 PNG

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:t="http://schemas.telerik.com/2008/xaml/presentation" Title="MainWindow">

   <Window.Resources>
      <Style TargetType="t:RadRibbonButton">
         <Setter Property="CollapseToMedium" Value="WhenGroupIsMedium"/>
         <Setter Property="CollapseToSmall" Value="WhenGroupIsSmall"/>
         <Setter Property="IsAutoSize" Value="True"/>
         <Setter Property="Size" Value="Large"/>
      </Style>
   </Window.Resources>

   <Grid>

      <t:RadRibbonView>
         <t:RadRibbonTab>
            <t:RadRibbonGroup Header="Home">
               <t:RadRibbonGroup.Variants>
                  <t:GroupVariant Variant="Medium"/>
                  <t:GroupVariant Variant="Small"/>
                  <t:GroupVariant Variant="Collapsed"/>
               </t:RadRibbonGroup.Variants>
               <t:RadCollapsiblePanel>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
               </t:RadCollapsiblePanel>
            </t:RadRibbonGroup>

            <t:RadRibbonGroup Header="Next">
               <t:RadRibbonGroup.Variants>
                  <t:GroupVariant Variant="Medium"/>
                  <t:GroupVariant Variant="Small"/>
                  <t:GroupVariant Variant="Collapsed"/>
               </t:RadRibbonGroup.Variants>
               <t:RadCollapsiblePanel>
                  <t:RadRibbonDropDownButton Text="Zoom" SmallImage="/Res/a.png" LargeImage="/Res/a.png">
                     <t:RadRibbonDropDownButton.DropDownContent>
                        <t:RadMenu Orientation="Vertical">
                           <t:RadMenuItem Header="Zoom In (x2)" />
                           <t:RadMenuItem Header="Zoom Out (x2)"  />
                           <t:RadMenuItem Header="Zoom In" />
                        </t:RadMenu >
                     </t:RadRibbonDropDownButton.DropDownContent>
                  </t:RadRibbonDropDownButton>
                  <t:RadRibbonDropDownButton Text="Pan" SmallImage="/Res/a.png" LargeImage="/Res/a.png">
                     <t:RadRibbonDropDownButton.DropDownContent>
                        <t:RadMenu Orientation="Vertical">
                           <t:RadMenuItem Header="West" />
                           <t:RadMenuItem Header="East" />
                           <t:RadMenuItem Header="North" />
                           <t:RadMenuItem Header="South" />
                           <t:RadMenuItem Header="Manually" />
                        </t:RadMenu>
                     </t:RadRibbonDropDownButton.DropDownContent>
                  </t:RadRibbonDropDownButton>
               </t:RadCollapsiblePanel>
            </t:RadRibbonGroup>

            <t:RadRibbonGroup Header="Next">
               <t:RadRibbonGroup.Variants>
                  <t:GroupVariant Variant="Medium"/>
                  <t:GroupVariant Variant="Small"/>
                  <t:GroupVariant Variant="Collapsed"/>
               </t:RadRibbonGroup.Variants>
               <t:RadCollapsiblePanel>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>

               </t:RadCollapsiblePanel>
            </t:RadRibbonGroup>

            <t:RadRibbonGroup Header="Next">
               <t:RadRibbonGroup.Variants>
                  <t:GroupVariant Variant="Medium"/>
                  <t:GroupVariant Variant="Small"/>
                  <t:GroupVariant Variant="Collapsed"/>
               </t:RadRibbonGroup.Variants>
               <t:RadCollapsiblePanel>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
               </t:RadCollapsiblePanel>
            </t:RadRibbonGroup>

            <t:RadRibbonGroup Header="Next">
               <t:RadRibbonGroup.Variants>
                  <t:GroupVariant Variant="Medium"/>
                  <t:GroupVariant Variant="Small"/>
                  <t:GroupVariant Variant="Collapsed"/>
               </t:RadRibbonGroup.Variants>
               <t:RadCollapsiblePanel>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
                  <t:RadRibbonButton Text="One" SmallImage="/Res/a.png" LargeImage="/Res/a.png"/>
               </t:RadCollapsiblePanel>
            </t:RadRibbonGroup>

         </t:RadRibbonTab>

      </t:RadRibbonView>

   </Grid>
</Window>

[Tina Stancheva]

Hi Jason,

Thank you for sanding your sample code. I noticed that you haven't applied any resizing settings on the RadRibbonDropDownButtons, but you have creates a custom style defining the resizing logic of the RadRibbonButtons. This is the reason why the second RibbonGroups behaves differently.

Also, please note that you need to specify Priority for the Variants. The Priority will define the order in which the size of the groups will be changed. A Priority of 1 defines that a variant will be applied first and a Priority of 10 defines that a variant will be applied 10th in order. So basically the lowest number sets the highest priority as the logic is such that the Priorities actually control the order of the resizing operations.

I attached a sample solution based on your code snippet where I applied a style on the RadRibbonDropDownButtons to set up their resizing logic and I also defined the order in which the groups should change their size - from right to left they change their size Large-Medium-Small-Collapsed. I also applied a smaller CollapseThresholdSize on the RadRibbonView as it's usually collapsed when its size is under 300x250px.

I hope the solution will help you in building your custom logic. But please have in mind that there is currently an issue with the Variants priorities logic so it may not work in all scenarios - basically if you remove the RadCollapsiblePanel from the sample application, you'll notice how the most right-aligned groups can't enter their Medium size. This issue is logged in our PITS where you can track its progress.

Let me know if I can further assist you.

Regards,
Tina Stancheva
the Telerik team