Current filter:
                                You should refresh the page.
                                  • Hi There

                                    I'm working with refactoring my Ribbon to make use of MVVM to populate the RibbonPageGroups and their items. It works just nicely, but I have one small issue left re. merging two RibbonPages within the same RibbonControl

                                    I have this XAML:

                                    [XAML]
                                    <dx:ThemedWindow x:Class="RibbonMerge.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Window.Resources> <DataTemplate x:Key="RibbonItemTemplate"> <dxb:BarButtonItem Content="{Binding Content}"/> </DataTemplate> <DataTemplate x:Key="RibbonGroupTemplate"> <dxr:RibbonPageGroup Caption="{Binding Caption}" ItemTemplate="{StaticResource RibbonItemTemplate}" ItemLinksSource="{Binding RibbonItemList}"> </dxr:RibbonPageGroup> </DataTemplate> </Window.Resources> <dxr:RibbonControl DockPanel.Dock="Top" RibbonStyle="Office2019" ShowApplicationButton="False"> <dxr:RibbonDefaultPageCategory> <!--Home Ribbon Page with Hardcoded Content--> <dxr:RibbonPage Caption="Home"> <dxr:RibbonPageGroup Caption="Mode" MergeOrder="2"> <dxr:RibbonGalleryBarItem DropDownGalleryEnabled="False"> <dxr:RibbonGalleryBarItem.Gallery> <dxb:Gallery RowCount="3" ColCount="1" > <dxb:GalleryItemGroup ItemsSource="{Binding RibbonGalleryShortCutList}"> <dxb:GalleryItemGroup.ItemTemplate> <DataTemplate> <dxb:GalleryItem Caption="{Binding Caption}"></dxb:GalleryItem> </DataTemplate> </dxb:GalleryItemGroup.ItemTemplate> </dxb:GalleryItemGroup> </dxb:Gallery> </dxr:RibbonGalleryBarItem.Gallery> </dxr:RibbonGalleryBarItem> </dxr:RibbonPageGroup> </dxr:RibbonPage> <!--Home Ribbon Page with MVMM to get RibbonGroups and Items --> <!--Should merge with previous RibbonPage--> <dxr:RibbonPage Caption="Home" GroupsSource="{Binding RibbonGroupList}" GroupTemplate="{StaticResource RibbonGroupTemplate}"/> </dxr:RibbonDefaultPageCategory> </dxr:RibbonControl> </dx:ThemedWindow>

                                    and a ViewModel:

                                    [C#]
                                    using RibbonMerge.Models; using System.Collections.Generic; using System.Linq; namespace RibbonMerge { public class MainViewModel { private List<RibbonItem> RibbonItemList; public List<RibbonGroup> RibbonGroupList { get; set; } public List<RibbonGalleryShortCut> RibbonGalleryShortCutList { get; set; } public MainViewModel() { RibbonItemList = new List<RibbonItem> { new RibbonItem { Content = "Edit", RibbonGroup = RibbonGroups.A }, new RibbonItem { Content = "Other", RibbonGroup = RibbonGroups.B }, new RibbonItem { Content = "Order", RibbonGroup = RibbonGroups.C }, new RibbonItem { Content = "Recall", RibbonGroup = RibbonGroups.D }, new RibbonItem { Content = "Move", RibbonGroup = RibbonGroups.D } }; RibbonGroupList = new List<RibbonGroup> { new RibbonGroup { Caption = "A", MergeOrder = (int)RibbonGroups.A, RibbonItemList = RibbonItemList.Where(r => r.RibbonGroup == RibbonGroups.A).ToList() }, new RibbonGroup { Caption = "B", MergeOrder = (int)RibbonGroups.B, RibbonItemList = RibbonItemList.Where(r => r.RibbonGroup == RibbonGroups.B).ToList() }, new RibbonGroup { Caption = "C", MergeOrder = (int)RibbonGroups.C, RibbonItemList = RibbonItemList.Where(r => r.RibbonGroup == RibbonGroups.C).ToList() }, new RibbonGroup { Caption = "D", MergeOrder = (int)RibbonGroups.D, RibbonItemList = RibbonItemList.Where(r => r.RibbonGroup == RibbonGroups.D).ToList() } }; RibbonGalleryShortCutList = new List<RibbonGalleryShortCut>(); RibbonGalleryShortCutList.Add(new RibbonGalleryShortCut {ApplicationMode = ApplicationModes.Engineering, Caption = ApplicationModes.Engineering.ToString() }); RibbonGalleryShortCutList.Add(new RibbonGalleryShortCut {ApplicationMode = ApplicationModes.Production, Caption = ApplicationModes.Production.ToString() }); RibbonGalleryShortCutList.Add(new RibbonGalleryShortCut {ApplicationMode = ApplicationModes.All, Caption = ApplicationModes.All.ToString() }); } } }

                                    This gives me two RibbonPages - each called 'Home', and each of them with the expected content, but I need the two RibbonPages to merge their content so I only have one 'Home' RibbonPage.

                                    If I move the items from the hardcoded RibbonPage to the MVVM RibbonPage, only the items from the MVVM is shown.

                                    Is there any method for using both hardcoded items - and MVVM in the same RibbonPage?

                                    Thanks - for any hints or ideas..

                                    /Thomas - Copenhagen
                                     

                                • Thomas Elbek 07.25.2019

                                  Aaarh - hold your horses - I got an idea to make an ItemTemplateSelector that makes it possible to have multiple kind of items (DataTemplates) within the same MVVM based RibbonPage, so I avoid having two 'Home' RibbonPages.

                                  I'll be back with more status tomorrow, don't spend any time on it untill then.

                                • Andrey Marten (DevExpress Support) 07.25.2019

                                  Hello Thomas,

                                  The use of a custom ItemTemplateSelector to show different items in the same group/page is a proper solution. Please keep us informed about your results.

                                  Thanks,
                                  Andrey

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Andrey

                                I managed to develop a TemplateSelector and having just one "Home" RibbonPage. I simply love the way that XAML works where you can make a Banana look like an Orange just by templating it.

                                I've developed and attached a small App showing my solution for future reference.

                                Case Closed :-D

                                • Andrey Marten (DevExpress Support) 07.26.2019

                                  I'm happy to hear that, Thomas. Thank you for keeping us informed.
                                  Feel free to contact us if you have additional questions.
                                  Andrey