April 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Spruce up your next application with the WPF Ribbon, Page 2

  • December 28, 2009
  • By Chris Bennett
  • Send Email »
  • More Articles »

The images refereced above are used to display the body of the button. The large image is a 40x40 PNG with transparency. This image is used for buttons on the Ribbon as well as menu Items within the Application Menu. The small image is a 20x20 PNG with transparency. This image is used when the window size is changed to shrink the Ribbon as well as for the Quick Access toolbar. Also, be sure to create an OpenCommand_Executed method in the code behind to capture the click events. Next, Insert the following XAML snippet into the File Operation Ribbon Group.

  <my:RibbonButton Name="Open" Command="{StaticResource OpenCommand}"/>

This change will create an Open button and associate the OpenCommand, created above with it as shown below.

Open Button
Figure 3 - Open Button

Now that we have a basic Ribbon, we can start to populate the Application Menu. Insert the following snippet into the Ribbon tag.

  <my:Ribbon.ApplicationMenu> 
     <my:RibbonApplicationMenu Name="AppMenu"> 
        <my:RibbonApplicationMenu.Command> 
           <my:RibbonCommand LabelTitle="WPF Ribbon Example" LargeImageSource="Images\Round2.png" />
        </my:RibbonApplicationMenu.Command> 
        <my:RibbonApplicationMenuItem Name="MenuOpen" Command="{StaticResource OpenCommand}"/>
     </my:RibbonApplicationMenu> 
  </my:Ribbon.ApplicationMenu>

This XAML will create the Application Menu, Assign the Application Button and create an Open Menu Item.  The Round2.png image is a 36x36 pixel image with transparency. Below is an image of the Application Menu at this point.

Application Menu
Click here for larger image

Figure 4 - Application Menu

Finally, to create the Quick Access toolbar we insert the following snippet into the Ribbon tag.

  <my:Ribbon.QuickAccessToolBar> 
     <my:RibbonQuickAccessToolBar> 
        <my:RibbonButton Name="QLOpen" Command="{StaticResource OpenCommand}"/> 
     </my:RibbonQuickAccessToolBar> 
  </my:Ribbon.QuickAccessToolBar>

This will create a single Open button within the Quick Access Toolbar as shown below:

Quick Access Toolbar
Figure 5 - Quick Access Toolbar

Conclusion

The WPF Ribbon provides a wide range of functionality including additional controls, popup dialogs, control galleries and the ability to control how the ribbon shrinks when the window is resized. Using the WPF Ribbon within your application can drastically improve the usability of your application and provide a familiar user interface to those who use Office 2007.

Download the example source code by clicking here.

About the Author

Chris Bennett is with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris .bennett@crowehorwath.com





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel