Channels ▼
RSS

.NET

What's New In WPF 4.5


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Comments:

Video