Ribbon Bar with separator and a header on each section

[Declan Hillier]

I have a ribbon bar with 6 items and a header ("Operational Tools").  I've been asked to split these into two, each with a separate header for each group by still retaining the overall header.  So something like this:-

I've tried a few things and the closest I can get is:-

                <sf:RibbonBar Header="Operational Tools" IsEnabled="{Binding IsNotRunning}" IsLauncherButtonVisible="False">

                    <Label>State Updating</Label>

                    <sf:RibbonButton Label="Setup" SmallIcon="..\Images\Copy24x24.bmp" ToolTip="Import/export Setup" Click="OperationsSetupButton_Click" />

                    <sf:RibbonButton Label="Export" SmallIcon="..\Images\Export32x32.png" ToolTip="Export parameters" Click="OperationsExportButton_Click" />

                    <sf:RibbonButton Label="Import" SmallIcon="..\Images\Import32x32.png" ToolTip="Import parameters" Click="OperationsImportButton_Click" />

                    <sf:RibbonSeparator/>

                    <Label>Production Planning</Label>

                    <sf:RibbonButton Label="Set vars" SmallIcon="..\Images\Buttons\Redo.bmp" ToolTip="Set planning run variables" Click="PlanningSetupButton_Click" />

                    <sf:RibbonButton Label="Unset vars" SmallIcon="..\Images\Buttons\Undo.bmp" ToolTip="Unset planning run variables" Click="PlanningUnsetButton_Click" />

                    <sf:RibbonButton Label="Planning" SmallIcon="..\Images\Planning.ico" ToolTip="Generate production plan" Click="GeneratePlanButton_Click" />

                </sf:RibbonBar>

but that causes the header label to flow in the same way as the elements.  I've also tried putting a grid inside the bar to manually arrange the elements but that stops them from flowing and producing the dropdown when the area's too small so the lower items just get cut off.

Is there any way I can achieve the layout in the screenshot

[BagavathiPerumal Apranandham]

Hi Declan Hillier,

To meet your specific requirements, you can utilize the RibbonItemHost and customize the ContentTemplate of the RibbonItemHost. We have prepared the sample based on your requirement. Please refer to the attached sample for your reference.

CodeSnippets:

<syncfusion:RibbonItemHost>
    <syncfusion:RibbonItemHost.ContentTemplate>
       <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                      <RowDefinition Height="*"/>
                     <RowDefinition Height="*"/>
                     <RowDefinition Height="*"/>
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*"/>
                   <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>

         <Label >Operational Tools</Label>
         <syncfusion:RibbonButton Label="Setup" Grid.Row="1"  ToolTip="Import/export Setup"  />

       
<syncfusion:RibbonButton Label="Export" Grid.Column="1" Grid.Row="1" ToolTip="Export parameters"  />

         <syncfusion:RibbonButton Label="Import" Grid.Row="2" ToolTip="Import parameters" />
       </Grid>
 

</DataTemplate>
  </syncfusion:RibbonItemHost.ContentTemplate>
</syncfusion:RibbonItemHost>

Regards,
Bagavathi Perumal A

Attachment: RibbonRibbonBarWPF_9228ff58.zip

[Declan Hillier]

Thank you. That's definitely got me closer but hasn't quite got me across the line. I still don't quite get a sensible layout.

First I tried just using the grid layout as described:-

State Updating

Production Planning

That gives me the approximate layout but the buttons kind of collapse over each other (note the labels not showing at the top and the bottom of the third button being cut off):-

If I change the row heights to Auto the collapsing is resolved but the final button isn't shown (I'm guessing it's falling outside the bound of the control):-

To get around that I tried adding a wrap panel:-

State Updating

Production Planning

I get the same layout as above so I'm guessing the third button is being drawn `behind the Ribbon Bar Header rather than wrapping onto the next line?

Any suggestions on how I can resolve this last bit?

Edit> Further to that, By adding a couple of extra buttons I can see in the designer that the extra buttons are indeed extending below the visual scope of the ribbon button so that's what's preventing the desired wrapping behaviour:-

[BagavathiPerumal Apranandham]

Hi Declan Hillier,



We suggest you to change the height of the RibbonBar to achieve your requirement because the added items are cropped or not visible due to the RibbonBar height. We have prepared the sample based on your requirement. Please refer to the attached sample for your reference.

Regards,
Bagavathi Perumal A

Attachment: RibbonBarWPF_35ed57e5.zip