WPF中Ribbon控制元件的使用

小林野夫發表於2024-04-05
控制元件

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。本篇部落格的程式碼點選這裡下載。

相關文章