How to set width and height for each RibbonGalleryItem in a RibbonGallery of WPF Ribbon control?
You can change the height and width of the RibbonGalleryItems by using ItemHeight and ItemWidth properties of the RibbonGallery in WPF Ribbon control. These properties are applied to all RibbonGalleryItems when it is set to RibbonGallery.
The same has been explained in the following code example.
XAML
<syncfusion:Ribbon> <syncfusion:RibbonTab Caption="Tab1"> <syncfusion:RibbonBar Header="Bar1" x:Name="bar"> <syncfusion:RibbonGallery ItemWidth="200" ItemHeight="150" VisualMode="DropDown" SizeForm="Large" Label="Design"> <syncfusion:RibbonGallery.GalleryFilters> <syncfusion:RibbonGalleryFilter Label="All"/> <syncfusion:RibbonGalleryFilter Label="Group 1"/> </syncfusion:RibbonGallery.GalleryFilters> <syncfusion:RibbonGallery.GalleryGroups> <syncfusion:RibbonGalleryGroup Label="Group 1" syncfusion:RibbonGallery.FilterIndexes="0, 1"> <syncfusion:RibbonGalleryItem> <Image Source="Images/RedLarge.png" Width="40" Height="40" /> </syncfusion:RibbonGalleryItem> <syncfusion:RibbonGalleryItem> <Image Source="Images/OrangeLarge.png" Width="40" Height="40" /> </syncfusion:RibbonGalleryItem> <syncfusion:RibbonGalleryItem > <Image Source="Images/BlueLarge.png" Width="40" Height="40"/> </syncfusion:RibbonGalleryItem> <syncfusion:RibbonGalleryItem> <Image Source="Images/GrayLarge.png" Width="40" Height="40" /> </syncfusion:RibbonGalleryItem> <syncfusion:RibbonGalleryItem > <Image Source="Images/PinkLarge.png" Width="40" Height="40" /> </syncfusion:RibbonGalleryItem> </syncfusion:RibbonGalleryGroup> </syncfusion:RibbonGallery.GalleryGroups> </syncfusion:RibbonGallery> </syncfusion:RibbonBar> </syncfusion:RibbonTab> </syncfusion:Ribbon>
C#
//Ribbon
Ribbon ribbon = new Ribbon();
//Ribbon Tab
RibbonTab ribbonTab = new RibbonTab() { Caption = "Tab1" };
//Ribbon Bar
RibbonBar ribbonBar = new RibbonBar() { Header = "Bar1" };
//Ribbon Gallery items
RibbonGalleryItem item1 = new RibbonGalleryItem() { Content = new Image() { Source = new BitmapImage(new Uri("/Images/RedLarge.png", UriKind.RelativeOrAbsolute)), Width = 40, Height = 40 } };
RibbonGalleryItem item2 = new RibbonGalleryItem() { Content = new Image() { Source = new BitmapImage(new Uri("/Images/OrangeLarge.png", UriKind.RelativeOrAbsolute)), Width = 40, Height = 40 } };
RibbonGalleryItem item3 = new RibbonGalleryItem() { Content = new Image() { Source = new BitmapImage(new Uri("/Images/BlueLarge.png", UriKind.RelativeOrAbsolute)), Width = 40, Height = 40 } };
RibbonGalleryItem item4 = new RibbonGalleryItem() { Content = new Image() { Source = new BitmapImage(new Uri("/Images/GrayLarge.png", UriKind.RelativeOrAbsolute)), Width = 40, Height = 40 } };
RibbonGalleryItem item5 = new RibbonGalleryItem() { Content = new Image() { Source = new BitmapImage(new Uri("/Images/PinkLarge.png", UriKind.RelativeOrAbsolute)), Width = 40, Height = 40 } };
//Ribbon Gallery Group
RibbonGalleryGroup group1 = new RibbonGalleryGroup() { Label = "Group1" };
Int32Collection filtervalue = new Int32Collection();
filtervalue.Add(0);
filtervalue.Add(1);
RibbonGallery.SetFilterIndexes(group1, filtervalue);
group1.Items.Add(item1);
group1.Items.Add(item2);
group1.Items.Add(item3);
group1.Items.Add(item4);
group1.Items.Add(item5);
RibbonGalleryFilter filter = new RibbonGalleryFilter() { Label = "All" };
RibbonGalleryFilter filter1 = new RibbonGalleryFilter() { Label = "Group1" };
//Ribbon Gallery
RibbonGallery gallery = new RibbonGallery() { ItemHeight = 150, ItemWidth = 200 };
gallery.VisualMode = RibbonGalleryVisualMode.DropDown;
gallery.SizeForm = SizeForm.Large;
gallery.Label = "Design";
gallery.GalleryFilters.Add(filter);
gallery.GalleryFilters.Add(filter1);
gallery.GalleryGroups.Add(group1);
ribbonBar.Items.Add(gallery);
ribbonTab.Items.Add(ribbonBar);
ribbon.Items.Add(ribbonTab);
grid.Children.Add(ribbon);
The following screenshot displays the change in the width and height of the RibbonGalleryItem
I hope you enjoyed learning about how to set width and height for each RibbonGalleryItem in a RibbonGallery of WPF Ribbon control.
You can refer to our WPF Ribbon featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
