XAML.cz Magazín moderních technologií založených na XAML

V dnešním světě je u vývoje aplikací kladen obrovský nátlak na vzhled aplikace. Do nedávna byla většina aplikací ve stylu klasického „formulářového“ vzhledu. S příchodem WPF a dalších podobných technologií bylo umožněno vytvářet graficky velmi zajímavé aplikace snadno.

Uživatelé mají ale rádi, když jsou si aplikace na pohled podobné. Je to z důvodu intuitivního ovládání a obecně znalosti se v takové aplikaci naučit rychle orientovat a ovládat ji. V prostředí Windows to byly vždy takové klasické „formulářové“ aplikace, které měly stavový řádek, lištu nabídek a nějaké to triviální menu. Tento styl se traduje už od dávných dob prvních Windows. Zásadní krok ale udělal Microsoft s uvedením kancelářské aplikace Office 07, kde poprvé představil nový koncept GUI aplikace – tzv. Ribbon (česky také nazýván „Pás karet“). Toto byl zásadní zásah do tvorby UI aplikací. Postupně se tento styl návrhu GUI prokousává i do dalších aplikací, jako je například Malování, balík Live Essentials či WordPad a spousty dalších.

Pakliže jste ale chtěli vytvářet vlastní aplikace ve stylu Ribbon menu, nebyla to žádná legrace. Neexistovala žádná komplexnější komponenta a každé hotové řešení bylo značně komplikované či placené. Nebylo to prostě ono. Je tomu ale pár měsíců, co Microsoft uvolnil Microsoft Ribbon for WPF, který tvorbu Ribbon aplikací značně usnadňuje. A právě na tento toolkit se lehce podíváme a představíme si některé základní možnosti a vlastnosti.

Začínáme

Než začneme vytvářet aplikace, musíme zavítat na stránky Microsoftu a toolkit si stáhnout – stahujte z této adresy. Jako minimální požadavek pro vývoj je zmiňováno Visual Studio 2010 nebo Blend 4 a je zapotřebí mít .NET Framework 3.5 SP1, popř. vyšší. Sám používám VS 2010, tak si netroufám říct, zda to poběží i ve starších verzích Visual Studia.

Po stažení a nainstalování Microsoft Ribbon for WPF otevřete Visual Studio. Při zakládání nového projektu přibyla nová možnost – WPF Ribbon Application. Jedná se o jednoduchou šablonu Ribbon aplikace, kde je pro vás připravena nová komponenta a několik málo ovládacích prvků.

Zvolte tuto možnost, potvrďte a hned uvidíte vaší první Ribbon aplikaci. Visual Studio vám vygeneroval jednoduchý projekt, který obsahuje Ribbon komponentu s několika málo prvky.

<ribbon:Ribbon x:Name="Ribbon">
    <ribbon:Ribbon.ApplicationMenu>
        <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
            <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
                                                x:Name="MenuItem1"
                                                ImageSource="Images\LargeIcon.png"/>
        </ribbon:RibbonApplicationMenu>
    </ribbon:Ribbon.ApplicationMenu>
    <ribbon:RibbonTab x:Name="HomeTab" 
                        Header="Home">
        <ribbon:RibbonGroup x:Name="Group1" 
                            Header="Group1">
            <ribbon:RibbonButton x:Name="Button1"
                                    LargeImageSource="Images\LargeIcon.png"
                                    Label="Button1" />
 
            <ribbon:RibbonButton x:Name="Button2"
                                    SmallImageSource="Images\SmallIcon.png"
                                    Label="Button2" />
            <ribbon:RibbonButton x:Name="Button3"
                                    SmallImageSource="Images\SmallIcon.png"
                                    Label="Button3" />
            <ribbon:RibbonButton x:Name="Button4"
                                    SmallImageSource="Images\SmallIcon.png"
                                    Label="Button4" />
                    
        </ribbon:RibbonGroup>
                
    </ribbon:RibbonTab>
</ribbon:Ribbon> 

Povšiměte si, že jednotlivé elementy v xaml kódu mají přídomek „ribbon“. Jedná se o referenci na Assembly RibbonControlsLibrary, kde jsou všechny komponenty a třídy, které s Ribbon komponentou souvisí. Nemůžeme bohužel používat ty klasické WPF komponenty, na které jsme zvyklí. V Toolboxu ve Visual Studiu také proto přibyla nová záložka se všemi prvky, které můžeme používat. Celá komponenta je postavena na technologii WPF.

Dále se podívejte, že je zde použita třída RibbonWindow. Tato volba je dobrovolná a obstarává za nás některé základní chování okna aplikace, jako je tažení okna, panel „Rychlý přístup“ či kontextové záhlaví.

K dispozici jsou následující komponenty, se kterými můžeme v pásu karet pracovat.

• RibbonButton
• RibbonToggleButton
• RibbonRadioButton
• RibbonCheckBox
• RibbonTextBox
• RibbonMenuButton
• RibbonSplitButton
• RibbonComboBox

Pakliže mají nějaké komponenty vlastnost Content (obsah), pak pro tuto vlastnost lze použít následující objekty.

• Label
• SmallImageSource
• LargeImageSource

Vkládání dalších ovládacích prvků

RibbonControlsLibrary nabízí celou řadu ovládacích prvků, většina z nich má svůj přímý ekvivalent mezi klasickými WPF komponenty. Proto práce s nimi není těžká – chováním a vlastnostmi jsou velmi obdobné těm standardním.

<ribbon:RibbonGroup Header="Moje prvky">
    <ribbon:RibbonRadioButton GroupName="MojeRad" Label="Radio1" />
    <ribbon:RibbonRadioButton GroupName="MojeRad" Label="Radio2" />
    <ribbon:RibbonCheckBox Label="Checkbox" />
    <ribbon:RibbonComboBox>
        <ribbon:RibbonMenuItem Header="Polozka 1" />
        <ribbon:RibbonMenuItem Header="Polozka 2" />
    </ribbon:RibbonComboBox>
</ribbon:RibbonGroup>

Taby a skupiny tabů (záložek)

Vytváření dalších tabů se provádí vložením elementu RibbonTab, kde do jeho těla lze přidávat ovládací prvky. Chcete-li mít některé taby specificky odlišeny, jako je tomu třeba v aplikaci Word 07, kde například při editaci tabulky se vám otevřou nové taby (záložky), které jsou ve své vlastní skupině (Nástroje tabulky) - na tento počin se používá objekt ContextualTabGroups, který seskupuje jednotlivé taby.

<ribbon:RibbonTab x:Name="MujTab1"
                    ContextualTabGroupHeader="Moje skupina"
                    Header="Záložka 1">
</ribbon:RibbonTab>
<ribbon:RibbonTab x:Name="MujTab2"
                    ContextualTabGroupHeader="Moje skupina"
                    Header="Záložka 2">
</ribbon:RibbonTab>
<ribbon:Ribbon.ContextualTabGroups>
    <ribbon:RibbonContextualTabGroup Header="Moje skupina"
                                        Visibility="Visible"
                                        Background="Red" />
</ribbon:Ribbon.ContextualTabGroups>
</ribbon:Ribbon>

Změny barev grafického rozhraní

Velmi dobře se modifikuje grafické rozhraní komponenty. Pokud zaměníte pouze vlastnost Background u objektu Ribbon, zamění se pozadí – zachová se ale barevný přechod. Podobně reagují na změny barev i jiné prvky. Lze tak snadno měnit celkové barevné pojetí a při tom si zachovat veškeré barevné přechody, které dávají celé komponentě svěží moderní vzhled.

<ribbon:Ribbon x:Name="Ribbon" Background="Chartreuse">

Ribbon komponenta ve webovém prohlížeči

Pokud vytváříte webové aplikace, teď mám na mysli WPF Browser Application, nikoliv ASP.NET, velmi oceníte, že tato komponenta funguje perfektně i zde.

Závěrem

Komponenta je to velmi zdařilá a přes svoji jednoduchost si poradí i se složitými scénáři aplikace. Je dobré, že Microsoft uvolnil tuto komponentu a my vývojáři můžeme vytvářet GUI aplikace v tom to moderním stylu. Ovládací pás disponuje vším co je potřeba, například klávesovými zkratky, automatická změna velikosti, rychlý přístup a spousty dalších maličkostí. Popis všech vlastností a možností naleznete klasicky v dokumentaci msdn.