WPF - Ribbon

Aspecto geral

 

Antes demais é necessário adicionar ao projecto a referência da bilbioteca System.Windows.Controls.Ribbon (.dll).

Para se ficar com uma janela principal mais "bonita" é necessário substituir o tipo de janela, assim em vez de se usar <Window> que tem este aspecto


usamos o <RibbonWindow> que fica assim

 

Estrutura

Nome da aplicação

É definido na tag principal Ribbon

<Ribbon x:Name="Menu" Title="Nome da aplicação">

Botões de acesso rápido (do lado esquerdo do titulo)

São definidos dentro da tag Ribbon.QuickAccessToolBar. Podem ser adicionados quantos elementos se quiser: button, combobox, etc

<Ribbon.QuickAccessToolBar>
    <RibbonQuickAccessToolBar >
        <RibbonButton x:Name="QATButton1" 
                      SmallImageSource="/Imagens/Icons/action undo.ico" />
        <RibbonButton x:Name="QATButton2" 
                      SmallImageSource="Imagens/Icons/action redo.ico" />
    </RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar> 

Botão de ajuda (fica do lado direito)

Definido na tag Ribbon.HelpPaneContent

<Ribbon.HelpPaneContent>
    <RibbonButton SmallImageSource="Imagens/Icons/Help.ico" />
</Ribbon.HelpPaneContent> 

 

Menu principal da aplicação 

Menu que se abre no botão azul da esquerda

<Ribbon.ApplicationMenu>
    <RibbonApplicationMenu SmallImageSource="Imagens/Icons/settings 4.ico">
        <RibbonApplicationMenuItem Header="Olá"
                                   x:Name="MenuItem1"
                                   ImageSource="Imagens/Icons/Zoom.ico"/>
        <RibbonApplicationMenuItem Header="Sair"
                                   x:Name="MenuSair"
                                   ImageSource="Imagens/Icons/Power.ico"/>
    </RibbonApplicationMenu>
    <RibbonApplicationMenu.AuxiliaryPaneContent>
        <RibbonGallery ScrollViewer.VerticalScrollBarVisibility="Auto">
            <RibbonGalleryCategory MaxColumnCount="1">
                <RibbonGalleryItem
                                x:Name="GalleryItem1" Content="Esta é a parte da galeria" 
                                MouseOverBackground="Transparent"
                                MouseOverBorderBrush="Transparent"
                                CheckedBackground="Transparent"
                                CheckedBorderBrush="Transparent"/>
                <RibbonGalleryItem>
                    <Image Source="/Imagens/Icons/biohazard.ico" Width="50"/>
                </RibbonGalleryItem>
            </RibbonGalleryCategory>
        </RibbonGallery>
    </RibbonApplicationMenu.AuxiliaryPaneContent>
</Ribbon.ApplicationMenu> 

 

Os menus propriamente ditos.

São construidos com Tabulações, Grupos, elementos variáveis

<RibbonTab x:Name="HomeTab" 
           Header="Início">
    <RibbonGroup x:Name="Group1" 
                 Header="Groupo 1">
        <RibbonButton x:Name="Button1"
                      LargeImageSource="Imagens/Icons/Zoom.ico"
                      Label="Botão 1" />
        <RibbonButton x:Name="Button2"
                      SmallImageSource="Imagens/Icons/Zoom in 2.ico"
                      Label="Botão 2" />
        <RibbonButton x:Name="Button3"
                      SmallImageSource="Imagens/Icons/Zoom out 2.ico"
                      Label="Botão 3" />
        <RibbonButton x:Name="Button4"
                      SmallImageSource="Imagens/Icons/Toxic.ico"
                      Label="Botão 4" />
    </RibbonGroup>
</RibbonTab> 

 

 

Link da microsoft onde explicam mais em detalhe Ver

Para a classe Ribbon