WPF - Ribbon Controls á la Office (alebo Windows 7)

V tomto seriály si ukážeme vytvorenie Ribbon Controlu, ktorý prvýkrát uvidel svetlo sveta príchodom MS Office 2007...

Sťahujeme a inštalujeme

Takže, prvé čo budeme potrebovať je IDE, máte na výber z dvoch aplikácií:

• MS Expression Blend
• MS Visual Studio

Obidve aplikácie sú platené resp. pod trial licenciou. Visual Studio má tzv. Express Edíciu (je freeware), ktorú stiahnete na stráke Microsoftu: http://microsoft.com/express Ja budem používať MS Visual C# 2010 Express Edition Beta 2. Ďalej budeme potrebovať Ribbon Control Library (DLL knižnica) od MS Office developerov. Na stiahnutie je na stránke: http://msdn.microsoft.com/sk-sk/office/aa973809%28en-us%29.aspx kde je pod nádpisom Featured Content odkaz Licence the Office UI. Kliknite naň, prihlaste sa pomocou Live Id, potom vyplńte tento formulár, a dole potvrďte, potom uvidíte peknú stránku kde máte na výber stiahnúť si PDF súbor s ukážkami, nejaké zdrojáky, a tretí je zip s Ribbon Control Library, tak si ho stiahnite a niekde uložte, následne ho rozpakujte. Tu už máte daný RibbonControlLibrary.dll.

Vytvárame náš prvý projekt s RibbonControlom

Takže si vytvoríme, WPF projekt presnejšie WPF Application.Po vytvorení si ho niekde uložte (Ctrl+S). Teraz si pridáme tzv. Referencie. Takže sa presunieme do Solution Exploreru,pravým tlačidlom klikneme na názov nášho projektu a klikneme "Add Reference...". Vyskočí dialógové okno s tabmi, preto sa presunieme do "Browse" tabu. Vyhľadáme si Dllku, ktorú sme si rozpakovali predchvíľou, zvolíme ju a potvrdíme. Ďalej si pridáme do XAML kódu namespace ribbon controlu.

 <Window x:Class="RibbonTutorial.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">

pridaním riadku:

           xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

by ste mali mať:

<Window x:Class="RibbonTutorial.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
 Title="MainWindow" Height="350" Width="525">

To ale nejde skompilovať pretože, treba vytvoriť špeciálne okno tzv. RibbonWindow:

 <r:RibbonWindow x:Class="RibbonTutorial.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
 Title="MainWindow" Height="350" Width="525">
   <Grid>
   <!-- Všetko pôjde sem. -->
   </Grid>
</r:RibbonWindow>

a samozrejme v kóde (ja mám MainWindow.xaml.cs) je treba zmeniť predka triedy z Window na RibbonWindow:

 namespace RibbonTutorial
{
    public partial class MainWindow : Window // Tu
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

na:

 namespace RibbonTutorial
{
    public partial class MainWindow : RibbonWindow // Tu
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

a ešte budeme používať namespace:

using Microsoft.Windows.Controls.Ribbon;

Tým je všetko základné nastavené, v ďalšej časti si ukážeme podrobenšie, prídávanie prvkov.