WPF中Ribbon控件的使用

简介: 原文:WPF中Ribbon控件的使用这篇博客将分享如何在WPF程序中使用Ribbon控件。Ribbon可以很大的提高软件的便捷性。 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu。
原文: WPF中Ribbon控件的使用

这篇博客将分享如何在WPF程序中使用Ribbon控件。Ribbon可以很大的提高软件的便捷性。

上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu。在Outlook 2003时代,将Home下面的Menu都垂直的排列下来,操作的便捷程度降低了很多。Ribbon的布局会随着窗体的变化动态的调整。

上面的图片中标注了Ribbon的4个区块。

下面我们就在WPF中使用Ribbon控件来实现一个简单的界面。

1. 添加System.Windows.Controls.Ribbon的引用;

2. XAML Code:

<RibbonWindow x:Class="WpfRibbonWinApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
        xmlns:local="clr-namespace:WpfRibbonWinApp"
        mc:Ignorable="d"
        Title="Ribbon Window App" 
        WindowStartupLocation="CenterScreen"
        Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Ribbon Grid.Row="0">
            <!--Ribbon Quick Access Toolbar-->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton SmallImageSource="Resources\Images\Save_30px.png" />
                    <RibbonSplitButton SmallImageSource="Resources\Images\Undo_30px.png">
                        <RibbonSplitMenuItem Header="Undo1" />
                        <RibbonSplitMenuItem Header="Undo2" />
                        <RibbonSplitMenuItem Header="Undo3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton SmallImageSource="Resources\Images\Redo_30px.png">
                        <RibbonSplitMenuItem Header="Redo1" />
                        <RibbonSplitMenuItem Header="Redo2" />
                        <RibbonSplitMenuItem Header="Redo3" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>

            <!--Ribbon Help Pane Content-->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Resources\Images\Help_30px.png" />
            </Ribbon.HelpPaneContent>

            <!--Ribbon Application Menu-->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <RibbonApplicationMenuItem Header="Save" Width="150" ImageSource="Resources\Images\Save_30px.png"/>
                    <RibbonApplicationMenuItem Header="Options" ImageSource="Resources\Images\Settings_30px.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>

            <!--Ribbon Tab #1 Home-->
            <RibbonTab Header="Home" KeyTip="H">
                <RibbonGroup Header="Home">
                    <RibbonMenuButton LargeImageSource="Resources\Images\Paste_30px.png" Label="Paste" KeyTip="V">
                        <RibbonMenuItem Header="Keep Text Only" />
                        <RibbonMenuItem Header="Keep Source Format" />
                    </RibbonMenuButton>

                    <RibbonButton SmallImageSource="Resources\Images\Undo_30px.png" Label="Copy" />
                    <RibbonButton SmallImageSource="Resources\Images\Redo_30px.png" Label="Format" />
                </RibbonGroup>

                <RibbonGroup Header="Operation">
                    <RibbonMenuButton LargeImageSource="Resources\Images\Delete_30px.png" Label="Delete" />
                    <RibbonMenuButton SmallImageSource="Resources\Images\Save_30px.png" Label="Save" />
                    <RibbonMenuButton SmallImageSource="Resources\Images\Print_30px.png" Label="Print" />
                </RibbonGroup>
            </RibbonTab>

            <RibbonTab Header="View" KeyTip="V">
                
            </RibbonTab>

            <RibbonTab Header="Help">
                
            </RibbonTab>
        </Ribbon>
    </Grid>
</RibbonWindow>

运行结果:

XAML代码中标粗的LargeImageSource和SmallImageSource对应的RibbonButton在大小上是有区别的。另外,如果需要在一个Ribbon Tab下有不同的功能分类,可以使用Ribbon Group进行划分。

另外上面的运行结果截图的窗体很怪异,左右两边明显很宽。这个问题在Windows 8一下的平台是不存在的。可以通过下面的方式解决。设置WindowsChrome,

    xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"

    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="{x:Static shell:WindowChrome.GlassFrameCompleteThickness}" />
    </WindowChrome.WindowChrome>

运行结果如下:

这篇博客就简单的介绍一下WPF中Ribbon控件的使用。另外除了.NET 提供的Ribbon库之外,有一些很优秀的WPF Ribbon控件库,例如:Fluent.Ribbon.功能比较全面。可以支持Metro样式的Ribbon。本篇博客的代码点击这里下载。

感谢您的阅读。

目录
相关文章
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
191 1
|
3月前
|
C# 前端开发 UED
WPF数据验证实战:内置控件与自定义规则,带你玩转前端数据验证,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据验证是确保输入正确性的关键环节。前端验证能及时发现错误,提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法,并通过示例展示了如何使用内置验证控件(如`TextBox`)及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证;自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
115 0
|
3月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
68 0
|
3月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
|
3月前
|
前端开发 C#
wpfui:一个开源免费具有现代化设计趋势的WPF控件库
wpfui:一个开源免费具有现代化设计趋势的WPF控件库
139 0
|
3月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
|
3月前
|
开发框架 前端开发 JavaScript
在WPF应用中使用GongSolutions.WPF.DragDrop实现列表集合控件的拖动处理
在WPF应用中使用GongSolutions.WPF.DragDrop实现列表集合控件的拖动处理