How to properly style Menus for Ribbon DropDownButton?

[Timothy Barela]

Hello,

I'm working with the wpf ribbon control, and having a sizing issue with the DropDownButton menu items. 

I use a DataTemplate to bind to MenuItemViewModels. That works fine. The bigger more annoying issue is that the generated Menu Items appear really wide. Originally I used an ItemContainerStyle, for setting Command and CommandParameter bindings, but it just made the final appearance of the items more broken. 

I've tried Margin/Padding/Alignment to no avail. From what I can tell, the ItemContainer becomes really wide, with its item/content centered in the middle.  

Snippet of whats currently in place(sorry, not sure what the code tag is here):

[code]

<sf:RibbonTab.Resources>

<!-- use a data template so we can bind to view models -->

<DataTemplate x:Key="ApplyMenuItemTemplate">

<sf:RibbonMenuItem Header="{Binding Header}" IsChecked="{Binding IsChecked}"

Command="{Binding Command}" CommandParameter="{Binding}">

</sf:RibbonMenuItem>

</DataTemplate>

</sf:RibbonTab.Resources>

 <sf:RibbonBar Header="Apply">

                

<!-- the drop button menus are dynamically generated..  -->

<sf:DropDownButton Label="Flags" HorizontalAlignment="Left" SizeForm="Large"

LargeIcon="/assets/VS2017/BrowserSDK/BrowserSDK_16x_32.bmp"

SmallIcon="/assets/VS2017/EmptyBucket/EmptyBucket_16x.png"

ItemTemplate="{StaticResource ApplyMenuItemTemplate}"

ItemsSource="{Binding Flags.CompositeChildren}"

[/code]

Attachment: widedropdownmenuissue_b3eaacc.zip

[Vijayalakshmi Roopkumar]

Hi Timothy, 

 

Thank you for contacting Syncfusion Support. 

 

We have checked the reported behavior with Ribbon that the Popup of DropDownButton seems to be wider on populating the items using ItemsSource and ItemTemplate. This case can be resolved by using the DropDownGroup. 

 

Please find the code below: XAML 

 

 

<syncfusion:RibbonBar Header="Apply"> 

 

<!--  the drop button menus are dynamically generated..  --> 

<syncfusion:DropDownButton 

HorizontalAlignment="Center" 

HorizontalContentAlignment="Center" 

Label="Flags" 

SizeForm="Large"> 

<syncfusion:DropDownMenuGroup ItemTemplate="{StaticResource ApplyMenuItemTemplate}" ItemsSource="{Binding DropDownItems}" /> 

</syncfusion:DropDownButton> 

</syncfusion:RibbonBar> 

 

 

 

Before using DropDownGroup 

 

 

 

 

After using DropDownGroup 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158422/ze/Ribbon_ItemTemplate566766234 

 

Please try this suggestion and let us know if it is helpful. 

 

Regards, 

Vijayalakshmi VR