Giới thiệu

Trong bài này, csharpcanban.com sẽ hướng dẫn các bạn sử dụng WPF để thiết kế Ribbon Bar như hình trên. Các bạn hãy chú ý thực hiện từng bước, cuối bài có sẵn code để các bạn tải về.

Các bước thực hiện

Bước 1: Tạo một dự án WPF mới

Bước 2: Thêm thư viện Ribbon Bar của Window vào dự án

– Nhấp chuột phải vào mục Project Solution Explorer.

– Chọn “Add reference“;

–  Tìm thư viện system.windows.controls.ribbon dll.

– Thêm vào dự án

Bước 3: Thêm Điều khiển Ribbon vào Form

Hãy copy đoạn mã XAML dưới đây và dán vào file XAML của bạn.

<Window x:Class=" RibbonBar.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>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto"/>  
            <RowDefinition/>  
        </Grid.RowDefinitions>         
            <Ribbon x:Name="RibbonWin"  SelectedIndex="0">            
            </Ribbon>          
    </Grid>  
</Window>

Bước 4: Thêm ảnh vào dự án

Bước 5: Thêm các nốt bấm vào Ribbon Bar

Hãy thêm đoạn mã sau

<RibbonWindow  x:Class="RibbonWin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:RibbonWin="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Ribbon"
        Title="Employee Info" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Ribbon x:Name="RibbonWin"  SelectedIndex="0">

            <!-- Help Pane, located at the right-hand side -->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Imageshelp.png" />
            </Ribbon.HelpPaneContent>
            <!-- Quick Access Toolbar - located at the upper-left corner -->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton x:Name ="Save" SmallImageSource="Imagessave.png" />
                    <RibbonSplitButton x:Name ="Undo" SmallImageSource="Imagesundo.png" >
                        <RibbonSplitMenuItem Header="Undo 1" />
                        <RibbonSplitMenuItem Header="Undo 2" />
                        <RibbonSplitMenuItem Header="Undo 3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton x:Name="Redo" SmallImageSource="Imagesredo.png" >
                        <RibbonSplitMenuItem Header="Redo 1" />
                        <RibbonSplitMenuItem Header="Redo 2" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <!-- Application Menu, located at the left-hand side (down arrow) -->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <RibbonApplicationMenuItem Header="Options" ImageSource="Imagesoptions.png" />
                    <RibbonApplicationMenuItem Header="Exit" ImageSource="Imagesquit.png" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            
            <!-- Ribbon Tab #1: Home -->
            <RibbonTab Header="Home" KeyTip="H" >
                
                <!-- Home  group-->
                <RibbonGroup x:Name="ClipboardGroup" Header="Home">
                    <RibbonMenuButton LargeImageSource="Imagespaste.png" Label="Paste" KeyTip="V">
                        <RibbonMenuItem ImageSource="Imagespaste.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Imagespaste.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Imagescut.png" Label="Cut" KeyTip="X" />
                    <RibbonButton SmallImageSource="Imagescopy.png" Label="Copy" KeyTip="C" />
                    <RibbonButton SmallImageSource="Imagesformat_painter.png" Label="Format Painter" KeyTip="FP" />
                </RibbonGroup>

                <!-- Employee And Payroll group-->
                <RibbonGroup x:Name="Employee" Header="Employee And Payroll">
                    <RibbonMenuButton LargeImageSource="Imagespersonal.png" Label="Employee" KeyTip="V">
                        <RibbonMenuItem ImageSource="Imagespaste.png" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Imagespaste.png" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Imagessave.png" Label="Save" KeyTip="X" />
                    <RibbonButton SmallImageSource="Imagesadd.png" Label="Add" KeyTip="C" />

                </RibbonGroup>

            </RibbonTab>
            
            <!-- Ribbon Tab #2: Launch -->
            <RibbonTab Header="Insert" KeyTip="I">
                <!-- Launch/Applications group-->
            
               
            </RibbonTab>

            <RibbonTab Header="PageLayout" KeyTip="L">
                <!-- Launch/Applications group-->

            </RibbonTab>
        </Ribbon>
        <DockPanel Name="UIPanel" Grid.Row="1">
            
        </DockPanel>
    </Grid>

</RibbonWindow >

Bước 6: Sửa lại file *.cs như sau

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Ribbon;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;


namespace RibbonWin
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
           
        }
    }
}

Bước 7: Nhấn F5 để khởi chạy ứng dụng

Tải mã nguồn

Chúc các bạn vui vẻ.