Use of ribbon for WPF

Ribbon for WPF is the command bar for Microsoft's office and other applications.ProgramFunction is organized into a series of tabs at the top of the application window. The ribbon User Interface (UI) makes it easier to discover features and functions, allows faster understanding of applications, and makes users feel more controllable about the application experience. It is also suitable for programmers who are not good at UI organizations. Using it can easily organize a beautiful UI (you only need to find the appropriate icon ).

We will learn how to use ribbon from several aspects.

1. components: Application menu, quick access toolbar, tabs, groups, and controls

2. Resize with the target window

3. Use of some controls

Let's start our ribbon journey. We will use a small example to learn how to use ribbon for development.

First, create a WPF application, delete the default window1.xaml, and create a new ribbonwindow (which needs to be installed first)

In addition, we need to modify startupuri in APP. XAML and change its value to ribbonwindow1.xaml. At this time, the program can run. But it's just a framework. What we need to do now is to add content to the framework.

Before adding content, we need to understand the structure of the ribbonwindow:

In addition, we need to understand the hierarchy of elements.

• Ribbon

  • Ribbon...:. helppanecontent

  • Ribbonquickaccesstoolbar

    • Ribbonbutton, ribbonradiobutton, ribbontogglebutton, ribboncheckbox, ribbontextbox

    • Ribboncombobox, ribbonmenubutton, ribbonsplitbutton

    • Customizemenubutton

  • Ribbonapplicationmenu

    • Ribbonapplicationmenuitem

    • Ribbonapplicationsplitmenuitem

    • Footerpanecontent

    • Auxiliarypanecontent

  • Ribbontab

    • Ribbongroup

      • Ribbonbutton, ribbonradiobutton, ribbontogglebutton, ribboncheckbox, ribbontextbox

      • Ribboncombobox, ribbonmenubutton, ribbonsplitbutton

      • Ribboncontrolgroup

① Quick access toolbar (quickaccesstoolbar)

<Ribbon: ribbon. quickaccesstoolbar> <Ribbon: ribbonquickaccesstoolbar> <Ribbon: ribbonbutton smallimagesource = "/images/save.png" largeimagesource = "/images/save.png" tooltiptitle = "save" tooltipdescription = "this email has been saved in other forms" command = "saveas"/> <ribbon: ribbonbutton smallimagesource = "/images/undo.png" largeimagesource = "/images/undo.png" tooltiptitle = "" tooltipdescription = "this email has been saved in other forms" command = "applicationcommands. undo "/> <Ribbon: ribbonbutton smallimagesource = "/images/redo.png" largeimagesource = "/images/redo.png" tooltiptitle = "Restore" tooltipdescription = "this email has been saved in other forms" command = "applicationcommands. redo "/> <Ribbon: ribbonbutton smallimagesource = "/images/attach.png" largeimagesource = "/images/attach.png" tooltiptitle = "attachment" tooltipdescription = "this email has been saved in other forms" X: name = "quickattachbtn" Click = "attachmentbtn_click"/> </Ribbon: ribbonquickaccesstoolbar> </Ribbon: ribbon. quickaccesstoolbar>

This is the quick access toolbar next to the window icon. It is mainly used for some commonly used buttons. In addition, Microsoft provides many built-in commands for us. Currently, I only find applicationcommands and editingcommands. (If you have more commands, do not share them with others ).

② Applicationmenu)

<Ribbon: ribbon. applicationmenu> <Ribbon: ribbonapplicationmenu smallimagesource = "images/applicationmenuicon.png" keytip = "F"> <Ribbon: ribbonapplicationmenuitem header = "open" command = "open" imagesource = "images/open32.png" keytip = "O"/> <Ribbon: ribbonapplicationmenuitem header = "save" command = "save" imagesource = "images/save32.png" keytip = "S"/> <Ribbon: ribbonapplicationsplitmenuitem header = "Save as" command = "saveas" imagesource = "images/saveas32.png" keytip = "v"> <Ribbon: ribbonapplicationmenuitem header = "Rich Text Document" command = "saveas" commandparameter = "rtf" imagesource = "images/saveasrtf32.png" keytip = "R"/> <Ribbon: ribbonapplicationmenuitem header = "plain text document" command = "saveas" commandparameter = "TXT" imagesource = "images/saveastxt32.png" keytip = "p"/> <Ribbon: ribbonapplicationmenuitem header = "other format" command = "saveas" imagesource = "images/saveas32.png" keytip = "O"/> </Ribbon: ribbonapplicationsplitmenuitem> <Ribbon: ribbonseparator/> <Ribbon: ribbonapplicationsplitmenuitem header = "print" imagesource = "images/print32.png" keytip = "R"/>
<Ribbon: ribbonapplicationmenuitem header = "Page setup" imagesource = "images/printsetup32.png" keytip = "G"/> <Ribbon: ribbonapplicationmenu. footerpanecontent> <dockpanel lastchildfill = "false"> <Ribbon: ribbonbutton command = "applicationcommands. close "label =" exit "tooltiptitle =" exit "smallimagesource =" Images \ exit16.png "keytip =" X "dockpanel. dock = "right" margin = "2" borderbrush = "# b8114eaf"/> </dockpanel> </Ribbon: ribbonapplicationmenu. footerpanecontent> <Ribbon: ribbonapplicationmenu. auxiliarypanecontent> <Ribbon: ribbongallery canuserfilter = "false" scrollviewer. credential = "Auto"> <Ribbon: ribbongallerycategory header = "Recent events" background = "Transparent" itemssource = "{dynamicresource mostrecentfiles}"> <Ribbon: ribbongallerycategory. itemspanel> <itemspaneltemplate> <stackpanel orientation = "vertical" isitemshost = "true"/> </itemspaneltemplate> </Ribbon: ribbongallerycategory. itemspanel> </Ribbon: ribbongallerycategory> </Ribbon: ribbongallery> </Ribbon: ribbonapplicationmenu. auxiliarypanecontent> </Ribbon: ribbonapplicationmenu> </Ribbon: ribbon. applicationmenu>

Effect

Applicaiton menu is mainly composed of ribbonapplicationmenu, which can be stacked layer by layer like a normal menuitem. Use ribbonseparator for segmentation. You can add footerpanecontent at the end, and auxiliarypanecontent can be used to set the secondary pane.

③ Tabs (ribbontab) and groups (ribbongroup)

These two elements constitute the main part of the ribbon application. One application can have multiple ribbontabs, and one tab can have multiple ribbongroups.

<Ribbon: ribbontab X: Name = "hometab" header = "home"> <Ribbon: ribbongroup X: Name = "group1" header = "group1">
<Ribbon: ribbongroup. groupsizedefinitions>

<Ribbon: ribbongroupsizedefinitioncollection>

<Ribbon: ribbongroupsizedefinition>

<Ribbon: ribboncontrolsizedefinition imagesize = "large"/>

<Ribbon: ribboncontrolsizedefinition imagesize = "small"/>

<Ribbon: ribboncontrolsizedefinition imagesize = "small"/>
 
</Ribbon: ribbongroupsizedefinition>

</Ribbon: ribbongroupsizedefinitioncollection>

</Ribbon: ribbongroup. groupsizedefinitions>
<Ribbon: ribbonbutton X: Name = "button3"

Largeimagesource = "Images \ largeicon.png"

Label = "button1"/>

<Ribbon: ribbonbutton X: Name = "button1" smallimagesource = "Images \ smallicon.png" label = "button3"/> <Ribbon: ribbonbutton X: name = "button2" smallimagesource = "Images \ smallicon.png" label = "button4"/> </Ribbon: ribbongroup> <Ribbon: ribbonbutton X: name = "button3" largeimagesource = "Images \ largeicon.png" label = "button1"/> <Ribbon: ribbonbutton X: name = "button4" smallimagesource = "Images \ smallicon.png" label = "button2"/> </Ribbon: ribbongroup> </Ribbon: ribbontab>

To make the Group conform to our idea, you must first use groupsizedefinitions to set the layout in the group (of course, it is also possible not to set the layout, however, when we talk about making the ribbon automatically adjust with the application size, we need to use groupsizedefinitions), and use imagesize to specify the size of the corresponding position control, use islabelvisible to set whether the lable of the control is visible.

2. Adjust the ribbongroup size with the target window

Next, we need to make the group automatically adjust with the window size.

Let's take a look at the clipborad group.

As the window is reduced:

Zoom in again:

(You can use live mail to try the specific effect)

How is this implemented? Let's seeCode.

In a ribbongroup, we insert such a piece of code (of course, several ribboncontrolsizedefinition depends on your choice). When narrowing down the window, WPF automatically selects a ribbongroupsizedefinition that best fits the current window. In this way, the above effect is achieved.

That's all ~~~ Because there are a lot of things, I will write another blog post on the control introduction. For more information about the above errors ~