In Using Asynchronous Methods in ASP.NET 4.5 and in MVC 4, I provided examples of the new asynchronous methods introduced in .NET Framework 4.5, and I showed a WPF sample application. In this article, I present detailed examples of the most useful new features and improvements in WPF 4.5. The first of these is a new ribbon control.
Ribbon Control in WPF 4.5
WPF 4.5 includes a built-in Ribbon control (finally!), so there is no need to incorporate separate downloads for your project. Microsoft Office, SharePoint, and Office 365 make extensive use of Ribbons, and therefore, it usually necessary to use a Ribbon control in WPF applications.
By default, a new WPF project that targets .NET Framework 4.5 won't include the necessary library reference to start using the Ribbon control and all its related sub-controls. Thus, before adding a Ribbon to your application, you must add a reference to the System.Windows.Controls.Ribbon library (see Figure 1).
Figure 1: Adding a reference to System.Windows.Controls.Ribbon in a WPF 4.5 application.
Once you've added this reference, you can input the XAML code to define a new Ribbon control and you will see it in the XAML preview (also known as the designer). By default, the Ribbon is empty (see Figure 2):
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Ribbon>
<!-- All ribbon sub-controls go here -->
</Ribbon>
</Grid>
</Window>
Figure 2: An empty Ribbon control in the XAML preview.
The most convenient way to understand both the power and flexibility of the Ribbon control is to use a simple yet complete example that takes advantage of many of the Ribbon sub-controls. I use a WPF 4.5 application that has the following PNG images in the ribbon. I've located them in an Images folder (see Figure 3):
- blue.png
- copy.png
- cut.png
- format_painter.png
- green.png
- help.png
- options.png
- paste.png
- quit.png
- red.png
- redo.png
- save.png
- undo.png
Figure 3: The Ribbon control will use the PNG images within the Images folder as icons.
The following code defines a Ribbon and includes many of its sub-controls (see Figure 4):
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="450" Width="525" WindowStyle="ThreeDBorderWindow">
<Grid>
<Ribbon x:Name="Ribbon" SelectedIndex="0">
<!-- Help Pane, located at the right-hand side -->
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>
<!-- Quick Access Toolbar - located at the upper-left corner -->
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonButton x:Name ="Save" SmallImageSource="Images\save.png" />
<RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\undo.png" >
<RibbonSplitMenuItem Header="Undo action #1" />
<RibbonSplitMenuItem Header="Undo action #2" />
<RibbonSplitMenuItem Header="Undo action #3" />
</RibbonSplitButton>
<RibbonSplitButton x:Name="Redo" SmallImageSource="Images\redo.png" >
<RibbonSplitMenuItem Header="Redo action #1" />
<RibbonSplitMenuItem Header="Redo action #2" />
</RibbonSplitButton>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<!-- Application Menu, located at the left-hand side (down arrow) -->
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu KeyTip="F">
<RibbonApplicationMenuItem Header="Options" ImageSource="Images\options.png" />
<RibbonApplicationMenuItem Header="Exit" ImageSource="Images\quit.png" />
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<!-- Ribbon Tab #1: Home -->
<RibbonTab Header="Home" KeyTip="H" >
<!-- Home/Clipboard group-->
<RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
<RibbonMenuButton LargeImageSource="Images\paste.png" Label="Paste" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\cut.png" Label="Cut" KeyTip="X" />
<RibbonButton SmallImageSource="Images\copy.png" Label="Copy" KeyTip="C" />
<RibbonButton SmallImageSource="Images\format_painter.png" Label="Format Painter" KeyTip="FP" />
</RibbonGroup>
<!-- Home/Colors group-->
<RibbonGroup x:Name="Color" Header="Colors">
<RibbonRadioButton LargeImageSource="Images\red.png" Label="Red" KeyTip="R" IsChecked="True"/>
<RibbonRadioButton LargeImageSource="Images\green.png" Label="Green" KeyTip="G"/>
<RibbonRadioButton LargeImageSource="Images\blue.png" Label="Blue" KeyTip="B"/>
</RibbonGroup>
</RibbonTab>
<!-- Ribbon Tab #2: Launch -->
<RibbonTab Header="Launch" KeyTip="L">
<!-- Launch/Applications group-->
<RibbonGroup x:Name="DesktopApplication" Header="Desktop Applications">
</RibbonGroup>
<!-- Launch/Games group-->
<RibbonGroup x:Name="App" Header="Apps">
</RibbonGroup>
</RibbonTab>
</Ribbon>
</Grid>
</Window>
Figure 4: A Ribbon with many sub-controls in the XAML preview.
The help pane (Ribbon.HelpPaneContent) is located on the
right side. In this example, the help pane shows a button
(RibbonButton) with a help icon (see Figure 5).
Figure 5: The help pane with a button.
