Search code examples
wpfxamlribbon

How to use the same toolbar in WPF ribbon tabs?


I am new to WPF and I was playing with the ribbon control. I have three different ribbon tabs as shown in the code below. I am using the same toll bar buttons. The way I wrote as I shown below does not seem like a memory optimal approach. Can anyone please help to modify the code, so that I can use the same toolbar without repetition in all ribbon tabs?

        <ribbon:RibbonTab x:Name="HomeTab" 
                          Header="Home">
            <ribbon:RibbonGroup x:Name="Group1" 
                                Header="">
                <ribbon:RibbonButton x:Name="Update1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Update" />
                <ribbon:RibbonButton x:Name="Register1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Register" />
                <ribbon:RibbonButton x:Name="Uninstall1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Uninstall"  />
                <ribbon:RibbonButton x:Name="Invisible1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Go invisible" Click="Invisible_Click"/>
                <ribbon:RibbonButton x:Name="Help1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Help" />
                <ribbon:RibbonButton x:Name="Quit1"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Quit" Click="Quit_Click"/>
            </ribbon:RibbonGroup>

        </ribbon:RibbonTab>
        <ribbon:RibbonTab x:Name="LogTab" 
                          Header="Log History">
            <ribbon:RibbonGroup x:Name="Group11" 
                                Header="">
                <ribbon:RibbonButton x:Name="Update2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Update" />

                <ribbon:RibbonButton x:Name="Regiter2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Register" />
                <ribbon:RibbonButton x:Name="Uninstall2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Uninstall" />
                <ribbon:RibbonButton x:Name="Invisible2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Go invisible" Click="Invisible_Click"/>
                <ribbon:RibbonButton x:Name="Help2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Help" />
                <ribbon:RibbonButton x:Name="Quit2"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Quit" Click="Quit_Click" />
            </ribbon:RibbonGroup>

        </ribbon:RibbonTab>
        <ribbon:RibbonTab x:Name="SettingsTab" 
                          Header="Settings">
            <ribbon:RibbonGroup x:Name="Group21" 
                                Header="">
                <ribbon:RibbonButton x:Name="Update3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Update" />

                <ribbon:RibbonButton x:Name="Register3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Register" />
                <ribbon:RibbonButton x:Name="Uninstall3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Uninstall" />
                <ribbon:RibbonButton x:Name="Invisible3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Go invisible" Click="Invisible_Click" />
                <ribbon:RibbonButton x:Name="Help3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Help" />
                <ribbon:RibbonButton x:Name="Quit3"
                                     LargeImageSource="/T-Spy;component/Resources/favicon.ico"
                                     Label="Quit"  Click="Quit_Click"/>
            </ribbon:RibbonGroup>

        </ribbon:RibbonTab>

Solution

  • Why not just create a UserControl with a base type of ribbon:RibbonGroup, and then just drop it into each section as needed? Then you have the unique context of each control so there are no conflicts.

    Any property manipulation would need to be managed with Dependency Properties.