Channels ▼
RSS

.NET

What's New In WPF 4.5


The following lines define the help pane:

<Ribbon.HelpPaneContent>
    <RibbonButton SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>

The quick access toolbar (Ribbon.QuickAccessToolBar) is located in the upper-left corner (see Figure 6).


Figure 6: The quick access toolbar displaying the ribbon split menu item for the Undo ribbon split menu.

In this example, the quick access toolbar shows one save button (RibbonButton) and two ribbon split buttons (RibbonSplitButton). The two ribbon split buttons are the typical Undo and Redo menus that provide a list of actions as ribbon split menu items (RibbonSplitMenuItem). The following lines define the quick access toolbar and the items for each ribbon split menu:

<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>

The application menu (Ribbon.ApplicationMenu) is located at the left-hand side and it displays a down arrow (see Figure 7).


Figure 7: The application menu displaying the two menu options.

In this example, the application menu shows two ribbon application menu items (RibbonApplicationMenuItem): Options and Exit. The application menu has an accelerator, also known as a keyboard shortcut or access key (KeyTip). You can preview the accelerators defined for the Ribbon sub-controls in the XAML preview by pressing the Alt key when the Ribbon is selected (see Figure 8).


Figure 8: Visualizing accelerators in the XAML preview.

The following lines define the application menu and the two ribbon application menu items:

  <Ribbon.ApplicationMenu>
    <RibbonApplicationMenu KeyTip="F">
        <RibbonApplicationMenuItem Header="Options" ImageSource="Images\options.png" />
        <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\quit.png" />
    </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>

Ribbon tabs (RibbonTab) are located on the right-hand side of the application menu. In this example, the ribbon shows two tabs: Home and Launch (see Figure 9).


Figure 9: Home and Launch tabs.

Each ribbon tab has an accelerator and two ribbon groups (RibbonGroup). The following lines define the Home tab with two ribbon groups: Clipboard and Colors (see Figure 10).


Figure 10: Two ribbon groups within the Home ribbon tabs — Clipboard and Colors.

<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>


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.
 

Video