Microsoft ribbon control is a toolkit available within .net framework to create a beautiful control system which can act as the menu of the desktop application. The most recognizable example of the same would be the Ribbon-Control introduced in Office 2007. It became so popular due to it’s user-friendliness and intuitiveness that many application developers made sure that their applications’ navigation system was based on the ribbon format.
How to build it to your application :
Requirement:
1. Visual Studio 2008 or 2010
2. Microsoft ribbon control library to be downloaded from here.
Language choice : You can choose any language belonging to .net like vb.net, c#.net, F#.net, vc++ etc .. However, in this blog our focus will be on the front end rather than the back-end.
Process : After installing the file downloaded from the above link when you go to create project you will get option windows presentation foundation project with ribbon control (You can choose this or even if you choose just WPF application you still can add the ribbon control)
Prologue: I was working on a college library management system as my semester project and used the ribbon control library to make it look sleek and beautiful. Lets look at a image of what I am trying to achieve :
Ok now into the technical part:
WPF user interface is made using a language called XAML (Pronounced ‘Zammel’) which stands for Extended Application Mark Up language and syntactically and functionally is a XML type of language. Person with HTML/XML or any other Mark-up language knowledge will enjoy the code a lot and it would feel very intuitive. The best part is with .net 3.5 and above we write fully object-oriented code in the back-end and it feels very powerful and natural. To demonstrate the XAML mark-up required for the above application I give you the code below :
Window x:Class="LMSWindow" xmlns="http:schemas.microsoft.comwinfx2006xamlpresentation" xmlns:x="http:schemas.microsoft.comwinfx2006xaml" Title="Garden City College Library Management System" x:Name="LMSWindow" Height="625" Width="900" WindowState="Maximized" xmlns:my="http:schemas.microsoft.comwinfx2006xamlpresentationribbon" Icon="Library_Management_System;componentImagesLMS.ico" WindowStartupLocation="CenterScreen" Grid my:Ribbon Name="Ribbon" Background="#FF6EBE44" BorderBrush="Black" my:Ribbon.BindingGroup BindingGroup Name="RibbonBinding" NotifyOnValidationError="False" my:Ribbon.BindingGroup my:Ribbon.QuickAccessToolBar my:RibbonQuickAccessToolBar HorizontalAlignment="Center" Margin="3,-0.5,3,-1.4" my:RibbonButton SmallImageSource="Library_Management_System;componentImagesHome.png" Name="RibbonButton1" my:RibbonButton x:Name="marginl" SmallImageSource="Library_Management_System;componentImagesPicture.png" my:RibbonQuickAccessToolBar my:Ribbon.QuickAccessToolBar my:Ribbon.ApplicationMenu my:RibbonApplicationMenu Background="Green" KeyTip="l" SmallImageSource="Library_Management_System;componentImageslms_text.ico" my:RibbonApplicationMenuItem Header="Lock" KeyTip="l" x:Name="MenuItemlock" ImageSource="Library_Management_System;componentImagesJunior%20Icon%20130.ico" my:RibbonApplicationMenuItem Header="Themes" x:Name="MenuItemThemes" ImageSource="Library_Management_System;componentImagesJunior%20Icon%20126.ico" KeyTip="t" my:RibbonApplicationMenuItem Header="Backup" x:Name="MenuItemBackup" KeyTip="b" ImageSource="Library_Management_System;componentImagesTime%20Machine.ico" my:RibbonApplicationMenuItem Header="User Settings" x:Name="MenuItemuserset" ImageSource="Library_Management_System;componentImagesJunior%20Icon%2074.ico" KeyTip="s" my:RibbonApplicationMenuItem Header="View" x:Name="MenuItemuserview" ImageSource="Library_Management_System;componentImagespotter.ico" KeyTip="v" my:RibbonApplicationMenuItem Header="Change User NamePassword" x:Name="MenuItemuserchange" ImageSource="Library_Management_System;componentImagesJunior%20Icon%2033.ico" KeyTip="c" my:RibbonApplicationMenuItem my:RibbonApplicationMenu.FooterPaneContent my:RibbonButton Label="Exit" HorizontalAlignment="Right" Name="btnexit" SmallImageSource="Library_Management_System;componentImagesIllustratorCS2.png" KeyTip="e" my:RibbonApplicationMenu.FooterPaneContent my:RibbonApplicationMenu my:Ribbon.ApplicationMenu my:RibbonTab x:Name="ManageTab" Header="Manage" KeyTip="m" my:RibbonGroup x:Name="GroupAdd" Header="Add" my:RibbonSplitButton x:Name="btnamem" Label="Add Member" ToolTipTitle="Adding Members" ToolTip="Adding Members" ToolTipDescription="Adding Students or Faculty into Library Membership." LargeImageSource="Library_Management_System;componentImagesAFriends.png" ToolTipImageSource="Library_Management_System;componentImagesFriends.png" KeyTip="ma" my:RibbonMenuItem Header="Add Student" x:Name="btnstudadd" ImageSource="Library_Management_System;componentImagesuser_male_add.png" KeyTip="s" my:RibbonMenuItem Header="Add Faculty" x:Name="btnfacadd" ImageSource="Library_Management_System;componentImagesAholmes.ico" KeyTip="f" my:RibbonSplitButton my:RibbonButton x:Name="btnacdvd" Height="30" Label="CDDVD" SmallImageSource="Library_Management_System;componentImagesAMusic.png" KeyTip="ca" my:RibbonButton x:Name="btnaperi" Height="30" Label="Periodicals" SmallImageSource="Library_Management_System;componentImagesAPage.png" KeyTip="pa" my:RibbonButton x:Name="btnabook" Label="Add Book" LargeImageSource ="Library_Management_System;componentImagesANotebook.png" KeyTip="ba" my:RibbonGroup my:RibbonGroup x:Name="GroupRemove" Header="Remove" my:RibbonSplitButton x:Name="btnrmem" Label="Remove Member" LargeImageSource="Library_Management_System;componentImagesRFriends.png" KeyTip="mr" my:RibbonMenuItem x:Name="btnrstud" Header="Remove Student" ImageSource="Library_Management_System;componentImagesuser_male_remove.png" KeyTip="s" my:RibbonMenuItem x:Name="btnrfac" Header="Remove Faculty" ImageSource="Library_Management_System;componentImagesRholmes.ico" KeyTip="f" my:RibbonSplitButton my:RibbonButton x:Name="btnrcd" Height="30" Label="CDDVD" SmallImageSource="Library_Management_System;componentImagesRMusic.png" KeyTip="cr" my:RibbonButton x:Name="btnrp" Height="30" Label="Periodicals" SmallImageSource="Library_Management_System;componentImagesRPage.png" KeyTip="pr" my:RibbonButton x:Name="btnrbok" Label="Remove Book" LargeImageSource="Library_Management_System;componentImagesRNotebook.png" KeyTip="br" my:RibbonGroup my:RibbonGroup Header="Edit" x:Name="GroupEdit" my:RibbonSplitButton x:Name="btnemem" Label="Edit Member" LargeImageSource="Library_Management_System;componentImagesEFriends.png" KeyTip="me" my:RibbonMenuItem x:Name="btnestud" Header="Edit Student" ImageSource="Library_Management_System;componentImagesuser_male_edit.png" KeyTip="s" my:RibbonMenuItem x:Name="btnefac" Header="Edit Faculty" ImageSource="Library_Management_System;componentImagesEholmes.ico" KeyTip="f" my:RibbonSplitButton my:RibbonButton x:Name="btnecd" Height="30" Label="CDDVD" SmallImageSource="Library_Management_System;componentImagesEMusic.png" KeyTip="ce" my:RibbonButton x:Name="btnep" Height="30" Label="Periodicals" SmallImageSource="Library_Management_System;componentImagesEPage.png" KeyTip="pe" my:RibbonButton x:Name="btnebok" Label="Edit Book" LargeImageSource="Library_Management_System;componentImagesENotebook.png" KeyTip="be" my:RibbonGroup my:RibbonTab my:RibbonTab x:Name="SearchTab" Header="Search" KeyTip="s" my:RibbonGroup x:Name="btnsrcsmem" Header="Member" my:RibbonButton Label="Search Student" x:Name="btnsrcstud" LargeImageSource="Library_Management_System;componentImagesuser_male_search.png" KeyTip="s" Image Source="Library_Management_System;componentImagesAdobe_AI_CS2_256.png" my:RibbonButton Label="Search Faculty" x:Name="btnsrcfac" LargeImageSource="Library_Management_System;componentImagesSholmes.ico" KeyTip="f" my:RibbonGroup my:RibbonGroup Header="Book And Other" x:Name="srcbookao" my:RibbonButton x:Name="btnsrcbook" Label="Search Book" SmallImageSource="Library_Management_System;componentImagesSNotebook.png" KeyTip="b" my:RibbonButton x:Name="btnsrccddvd" Label="Search CDDVD" SmallImageSource="Library_Management_System;componentImagesSMusic.png" KeyTip="c" my:RibbonButton x:Name="btnsrcperi" Label="Search Periodicals" SmallImageSource="Library_Management_System;componentImagesSPage.png" KeyTip="p" Image Source="Library_Management_System;componentImagesAdobe_CS2_256.png" my:RibbonGroup my:RibbonGroup Header="Book Issued for" x:Name="srcbokisuefor" my:RibbonButton x:Name="btnsrcbokxerox" Label="Search for Xerox" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%20112.ico" KeyTip="x" my:RibbonButton x:Name="btnsrcbokbind" Label="Search for Binding" SmallImageSource="Library_Management_System;componentImagesYoritsuki_disk.png" KeyTip="i" my:RibbonButton x:Name="btnsrcbokdigit" Label="Search for Digitize" SmallImageSource="Library_Management_System;componentImagese-mail.png" KeyTip="d" Image Source="Library_Management_System;componentImagesPhotoshopCS2.png" my:RibbonGroup my:RibbonTab my:RibbonTab x:Name="CirculationTab" Header="Circulation" KeyTip="c" my:RibbonGroup Header="Lending" my:RibbonButton Label="Book-Bank issue" Name="btnbookbank" LargeImageSource="Library_Management_System;componentImagesbooks.ico" KeyTip="bb" Image Source="Library_Management_System;componentImagesAdobe_ID_CS2_256.png" my:RibbonButton Label="Book Weekly issue" Name="btnbookweeks" SmallImageSource="Library_Management_System;componentImagesBooks%202.png" KeyTip="bl" my:RibbonButton Label="Periodical Weekly issue" Name="btnperiweeks" SmallImageSource="Library_Management_System;componentImagespost.png" KeyTip="pl" my:RibbonButton Label="CDDVD Weekly issue" Name="btncddvweeks" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%2062.ico" KeyTip="cl" my:RibbonGroup my:RibbonGroup Header="Reading" Image Source="Library_Management_System;componentImagesAdobe_GL_CS2_256.png" my:RibbonButton Label="Book Reading room" Name="btnbookread" SmallImageSource="Library_Management_System;componentImagesBooks%201.png" KeyTip="br" my:RibbonButton Label="Periodical Reading room" Name="btnperiread" SmallImageSource="Library_Management_System;componentImagesDigital%20Editions.ico" KeyTip="pr" my:RibbonButton Label="CDDVD Reading room" Name="btncdvdread" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%2061.ico" KeyTip="cr" my:RibbonGroup my:RibbonGroup Header="Others Issue" my:RibbonButton Label="For Xerox" Name="btnxerox" SmallImageSource="Library_Management_System;componentImagesCopy.png" KeyTip="x" my:RibbonButton Label="For Binding" Name="btnbind" SmallImageSource="Library_Management_System;componentImagesFolder.png" KeyTip="i" my:RibbonButton Label="For Digitizing" Name="btndigitize" SmallImageSource="Library_Management_System;componentImagesrich-text-document.png" KeyTip="d" Image Source="Library_Management_System;componentImagesAdobe_PS_CS2_256.png" my:RibbonGroup my:RibbonTab my:RibbonTab Header="Return and Renew" x:Name="returnnrenewtab" KeyTip="R" my:RibbonGroup Header="Return" my:RibbonButton Label="Return Book-Bank" Content="Button" x:Name="btnrebookbank" LargeImageSource="Library_Management_System;componentImagesTourist%20guidebook.png" KeyTip="bb" Image Source="Library_Management_System;componentImagesAdobe_IC_CS2_256.png" my:RibbonButton Label="Return Book" Content="Button" x:Name="btnrebook" SmallImageSource="Library_Management_System;componentImagesemblem_library.png" KeyTip="br" my:RibbonButton Label="Return CDDVD" Content="Button" x:Name="btnrecdvd" SmallImageSource="Library_Management_System;componentImagescd_dvd_drive.png" KeyTip="cr" my:RibbonButton Label="Return Periodical" Content="Button" x:Name="btnreperi" SmallImageSource="Library_Management_System;componentImagescomment_up.png" KeyTip="pr" my:RibbonGroup my:RibbonGroup Header="Renew" Image Source="Library_Management_System;componentImagesAdobe_Acrobat_CS2_256.png" my:RibbonButton Label="Renew Book" Content="Button" x:Name="btnrenbook" SmallImageSource="Library_Management_System;componentImagesaddress_book.png" KeyTip="re" my:RibbonButton x:Name="btnrencdvd" Label="Renew CDDVD" Content="Button" SmallImageSource="Library_Management_System;componentImagescd_dvd_drive_w.png" KeyTip="ce" my:RibbonButton x:Name="btnrenperi" Label="Renew Periodical" Content="Button" SmallImageSource="Library_Management_System;componentImagescontakt.png" KeyTip="pe" my:RibbonGroup my:RibbonGroup Header="Others" my:RibbonButton Label="Return from Xerox" Content="Button" x:Name="btnrexerox" SmallImageSource="Library_Management_System;componentImagesAddressBook%20%285%29.png" KeyTip="x" my:RibbonButton Label="Return from Binding" Content="Button" x:Name="btnrebind" SmallImageSource="Library_Management_System;componentImagesFolder2.png" KeyTip="i" my:RibbonButton Label="Return From Digitizing" Content="Button" x:Name="btnredigitixe" SmallImageSource="Library_Management_System;componentImageswrite-document.png" KeyTip="d" Image Source="Library_Management_System;componentImagesmy-recent-document.png" my:RibbonGroup my:RibbonTab my:RibbonTab Header="Report" KeyTip="P" my:RibbonGroup Header="Book" my:RibbonButton x:Name="btnrptboklen" Content="Button" Label="For lending book" SmallImageSource="Library_Management_System;componentImagesBooks%202.png" KeyTip="bl" my:RibbonButton x:Name="btnrptbokred" Content="Button" Label="For reading book" SmallImageSource="Library_Management_System;componentImagesBooks%201.png" KeyTip="br" my:RibbonButton x:Name="btnrptbokpur" Content="Button" Label="For purchased book" SmallImageSource="Library_Management_System;componentImagesNotebook.png" KeyTip="bp" Image Source="Library_Management_System;componentImagesInDesignCS2.png" my:RibbonGroup my:RibbonGroup Header="Periodical" my:RibbonButton x:Name="btnrptperilen" Content="Button" Label="For lending Periodical" SmallImageSource="Library_Management_System;componentImagespost.png" KeyTip="pl" my:RibbonButton x:Name="btnrptperired" Content="Button" Label="For reading Periodical" SmallImageSource="Library_Management_System;componentImagesDigital%20Editions.ico" KeyTip="pr" my:RibbonButton x:Name="btnrptperipur" Content="Button" Label="For purchased Periodical" SmallImageSource="Library_Management_System;componentImagespage_folded.png" KeyTip="pp" Image Source="Library_Management_System;componentImagesGoliveCS2.png" my:RibbonGroup my:RibbonGroup Header="CDDVD" my:RibbonButton x:Name="btnrptcdvdlen" Content="Button" Label="For lending CDDVD" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%2062.ico" KeyTip="cl" my:RibbonButton x:Name="btnrptcdvdred" Content="Button" Label="For reading CDDVD" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%2061.ico" KeyTip="cr" my:RibbonButton x:Name="btnrptcdvdpur" Content="Button" Label="For purchased CDDVD" SmallImageSource="Library_Management_System;componentImagesMusic.png" KeyTip="cp" Image Source="Library_Management_System;componentImagesImageReadyCS2.png" my:RibbonGroup my:RibbonTab my:RibbonTab x:Name="ToolsTab" Header="Tools" KeyTip="t" my:RibbonGroup x:Name="tools" Header="Quick Tools" my:RibbonButton Label="Calculator" x:Name="btncalc" LargeImageSource="Library_Management_System;componentImagestoolscalc.png" KeyTip="s" DataContext="{Binding}" Image Source="Library_Management_System;componentImagesAdobe_AI_CS2_256.png" my:RibbonButton Label="Notepad" x:Name="btnnpad" LargeImageSource="Library_Management_System;componentImagestoolsnpad.png" KeyTip="f" my:RibbonGroup my:RibbonTab my:Ribbon my:RibbonButton Content="Button" Height="22" Name="btnhelp" VerticalAlignment="Top" MouseOverBorderBrush="#FFE5D71D" FocusedBorderBrush="#FFFFB700" SmallImageSource="Library_Management_System;componentImagesHelp.ico" HorizontalAlignment="Right" Margin="0,0,12,0" KeyTip="h" my:RibbonButton.FocusedBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFF5FF24" Offset="1" GradientStop Color="#FFFFE944" Offset="0.262" LinearGradientBrush my:RibbonButton.FocusedBackground my:RibbonButton.MouseOverBackground LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5" GradientStop Color="#FFF3DF48" Offset="0.593" GradientStop Color="#FFFFFF48" Offset="1" LinearGradientBrush my:RibbonButton.MouseOverBackground my:RibbonButton TextBlock Name="txtlogeduser" Height="23" Foreground="#FFAD0D12" FontSize="13" Width="200" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,40,0" FlowDirection="RightToLeft" Frame Name="Frame1" Background="#5db95f" Margin="0,147,0,43" NavigationUIVisibility="Visible" Frame Grid x:Name="grid2" Background="White" Margin="12,0,12,11" Height="27" VerticalAlignment="Bottom" my:RibbonButton x:Name="btnhome" Width="20" KeyTip="o" SmallImageSource="Library_Management_System;componentImagesHome.png" Margin="6,2,728,3" HorizontalAlignment="Left" FocusedBorderBrush="#FFFFB700" MouseOverBorderBrush="#FFFFB700" PressedBorderBrush="#FFC29B29" my:RibbonButton.PressedBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFEBAD64" Offset="0.471" GradientStop Color="#FFEBDB15" Offset="0" GradientStop Color="#FFDBCD22" Offset="1" LinearGradientBrush my:RibbonButton.PressedBackground my:RibbonButton.FocusedBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFEBEB2A" Offset="1" GradientStop Color="#FFEBC382" Offset="0.494" GradientStop Color="#FFEBEB82" Offset="0" LinearGradientBrush my:RibbonButton.FocusedBackground my:RibbonButton.MouseOverBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFEBBA6D" Offset="0.465" GradientStop Color="#FFEFEF37" Offset="0" GradientStop Color="#FFF2F23B" Offset="1" LinearGradientBrush my:RibbonButton.MouseOverBackground my:RibbonButton my:RibbonButton x:Name="btnweb" Width="20" KeyTip="w" SmallImageSource="Library_Management_System;componentImagesJunior%20Icon%2004.ico" Margin="40,2,694,3" HorizontalAlignment="Left" FocusedBorderBrush="#FFFFB700" MouseOverBorderBrush="#FFFFB700" PressedBorderBrush="#FFC29B29" my:RibbonButton.PressedBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFEBAD64" Offset="0.471" GradientStop Color="#FFEBDB15" Offset="0" GradientStop Color="#FFDBCD22" Offset="1" LinearGradientBrush my:RibbonButton.PressedBackground my:RibbonButton.FocusedBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FFEBEB2A" Offset="1" GradientStop Color="#FFEBC382" Offset="0.494" GradientStop Color="#FFEBEB82" Offset="0" LinearGradientBrush my:RibbonButton.FocusedBackground my:RibbonButton.MouseOverBackground LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#FF189D0C" Offset="0.465" GradientStop Color="#FF79E821" Offset="0" GradientStop Color="#FFA2FF00" Offset="1" LinearGradientBrush my:RibbonButton.MouseOverBackground my:RibbonButton Label x:Name="Labelstatus" Content="Ready" Margin="66,0,385,0" FontSize="14" Foreground="#FF344666" Label x:Name="lbltime" FontSize="14" HorizontalAlignment="Right" Width="199" Foreground="#FF344666" HorizontalContentAlignment="Right" Grid Grid.Background LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" GradientStop Color="#cff326" Offset="0.605" GradientStop Color="CadetBlue" Offset="1" GradientStop Color="Black" Offset="0" LinearGradientBrush Grid.Background Grid WindowThe above is the complete code for the page, however the Ribbon control starts after grid opening tag and ends at the closing tag.
So how the Ribbon control structure works (! very important once you understand this logic rest all follows naturally)
To understand this lets understand my design requirement:-
I have main menu items as
1.Manage
2.Search
3.Circulation
4.Return & Renew
5.Report
6.ToolsThese come from the Ribbon Tab and the names are given in the ribbon tab header.
Under the Tabs we can create groups like in the above example the manage tab has three groups
1.Add
2.Remove
3.EditEach group is separated by a separator and they have their images and going by the above code is self explanatory
The Gradient brush etc are used to give colour and styling. I hope the above code and the brief explanation will give you a proper head’s up and you can start from here and move on.
happy coding.
Regards
Shakeel Osmani
Gmail:shakeel.osmani@gmail.com
shakeel osmani 