Developpez.com

Une très vaste base de connaissances en informatique avec
plus de 100 FAQ et 10 000 réponses à vos questions

Developpez.com - Microsoft DotNET
X

Choisissez d'abord la catégorieensuite la rubrique :


Test du composant ruban d'infragistics

Date de publication : 28 mai 2008

Par Lainé Vincent (autres articles)
 


0. Présentation des contrôles en quelques mots
0-A. Avant de commencer ...
I. Codons un peu de Xaml
I-A. Import des espaces de nom Xml
I-B. Déclaration de l'élément principal du ruban
I-C. Premier Tab
I-D. Le groupement des tab dans le ruban
I-E. Le menu principal
II. Intégrer le ruban dans la fenêtre
III. Conclusions


0. Présentation des contrôles en quelques mots

Assurément les contrôles imitant le ruban d'office 2007 sont à la mode. Toutes les sociétés éditrices de composants nous sortent leurs solutions. Généralement ces composants sont écrits à l'aide de winform et ne profite pas de la puissance de WPF. Parmi les sociétés qui ont choisie de publier des composants à la fois pour les Winforms et WPF, il y a Infragistics. Ce sont leurs composants, en version WPF, que nous allons tester au cours de cet article. Ces contrôles étant en WPF nous nous attacherons évidement à l'apparence mais également à la clarté du code XAML et au Binding possible.


0-A. Avant de commencer ...

Avant de commencer à parle installation, code et autre voyons les pré-requis :

Bref rien de bien méchant. Ensuite il vous faut évidement les composants d'infragistics. Heureusement une version de démonstration est disponible sur leur site après enregistrement. Voyons maintenant à quoi ressemble le ruban :


Comme vous le voyer le rendu est très bon et surtout très proche du ruban d'office. Dès lors les possibilités deviennent infinies et ne sont limités que par votre imagination ;).


I. Codons un peu de Xaml

Il est temps de plonger en eau clair et d'aller trifouiller du code Xaml afin de créer notre ruban perso. Dans cette partie nous allons voir point par point comment créer un ruban digne de ce nom en Xaml.


I-A. Import des espaces de nom Xml

Avant de nous lancer à corps perdu dans le Xaml il faut ajouter une directive d'import dans la déclaration de la classe en Xaml :
xmlns:Ribbon=http://infragistics.com/Ribbon
Cette directive est donc à ajouter dans la balise root de la fenêtre qui héberge le ruban.
<Window x:Class="TestRibbonInfra.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="502" Width="686"
        xmlns:Ribbon="http://infragistics.com/Ribbon"
        >
La directive d'inclusion nous permet de déclarer un nouveau namespace xml nommé Ribbon qui va nous donner accès à tous les éléments concernant le Ruban d'infragistic.


I-B. Déclaration de l'élément principal du ruban

La première chose à faire est donc de créer le conteneur principal de notre ruban. Pour cela il suffit d'ajouter un élément de type XamRibbon à notre fenêtre WPF.
<Ribbon:XamRibbon x:Name="ribbon"> </Ribbon:XamRibbon>
Nous définissons le nom du ruban à « ribbon » afin de pouvoir y accèder en code-behing par la suite.

Voici à quoi doit ressembler votre premier ruban à cette étape :

1.JPG

I-C. Premier Tab

Maintenant que nous avons la base encore faut-il la peupler. Pour l'instant nous n'avons défini aucun tab de ruban. Les tab permettent de rassembler de façon logique les différents points d'accès aux fonctions qui ont toute un rôle similaire. Ainsi vous aller regrouper toutes les fonctions concernant la gestion des connexions réseaux dans un même tab. Les tab ne sont eux même que des containers et ils ne peuvent héberger que des groupes. Ces groupes permettent de grouper de façon encore plus précise les éléments de l'interface. Dans notre exemple nous allons grouper ensemble les boutons de connexion/déconnexion et de choix de la connexion. Un autre groupe contiendra les boutons d'ajout de connexion et de suppression.

Nous allons commencer par ajouter l'élément supérieur : le Tab
<Ribbon:RibbonTabItem Header="Réseau">                
</Ribbon:RibbonTabItem>
L'attribut Header permet de définir le texte affiché dans le haut du Tab.

Ajoutons maintenant le premier des deux groupes :
<Ribbon:XamRibbon x:Name="ribbon">
<Ribbon:RibbonTabItem Header="Réseaux"  >    
<Ribbon:RibbonGroup Caption="Opérations" >
                    
</Ribbon:RibbonGroup>
</Ribbon:RibbonTabItem>
</Ribbon:XamRibbon>
A partir de la nous pouvons ajouter n'importe quel élément dans le groupe. Toutefois afin de respecter l'aspect graphique du ruban il est conseillé d'utiliser les composants fourni par infragistic et qui sont spécialement conçut pour être inséré dans le ruban :

Ces composants sont destinés à être directement inséré dans un groupe. Toutefois il existe également des composants destiné à faire du placement :

Maintenant que nous connaissons les composants mis à notre disposition nous pouvons continuer notre petit exemple :
<Ribbon:RibbonTabItem Header="Réseaux"  >
                
                <Ribbon:RibbonGroup Caption="Opérations" >
                    <Ribbon:ButtonGroup>
                        <Ribbon:ButtonTool Caption="Connexion" />
                        <Ribbon:ButtonTool Caption="Deconnexion" />
                    </Ribbon:ButtonGroup>
                    <Ribbon:ComboEditorTool Text="connexions dispo"/>
                </Ribbon:RibbonGroup>

                <Ribbon:RibbonGroup Caption="Configuration" >
                    <Ribbon:ComboEditorTool Text="Connexions" />
                    <Ribbon:ButtonTool Caption="Ajouter"/>
                    <Ribbon:ButtonTool Caption="Supprimer" />
                </Ribbon:RibbonGroup>

</Ribbon:RibbonTabItem>
Ce qui nous donne cela :

2.JPG
Maintenant que nous savons faire des tab il ne manque qu'une chose pour compléter notre aperçu des tab.


I-D. Le groupement des tab dans le ruban

En effet dans Office il existe une fonctionnalité assez intéressante qui permet de regrouper différent tab au sein d'une même collection. Avec les composants infragistics cela est également possible mais au prix d'une petite gymnastique. En effet les tab groupé et les tab non groupé ne sont pas considéré de la même façon dans le système. Avant d'ajouter un tab dans un groupe il faut donc le supprimer de la collection de tab du ruban ! Et inversement si le tab doit quitter le groupement.

Au niveau Xaml cela se traduit comme cela :
<Ribbon:XamRibbon.ContextualTabGroups>
                <Ribbon:ContextualTabGroup BaseBackColor="Red" Key="main1" Caption="Main">
                    <Ribbon:RibbonTabItem Header="Accueil">
                        <Ribbon:RibbonGroup Caption="Ajouter">
                            <Ribbon:ButtonTool Caption="Ajouter"/>
                            <Ribbon:ButtonTool Caption="Supprimer"/>
                        </Ribbon:RibbonGroup>
                    </Ribbon:RibbonTabItem>
                </Ribbon:ContextualTabGroup>
            </Ribbon:XamRibbon.ContextualTabGroups>
La collection de groupement (appelée ContextualTabGroups dans les composants infragistiscs) est défini directement par le composants XamRibbon.

Au final nous avons donc cela :

3.JPG

I-E. Le menu principal

Il nous reste une dernière à configurer : Le menu principal représenté par une boule en haut à gauche du ruban. Ce menu est divisé « traditionnellement » en 3 zones : les actions à gauche, l'historique à droite et les options en bas. Le ruban d'infragistics nous permet de restpecter cet agencement et d'accéder aux différents emplacements de façon simple.

Pour commencer nous allons récupérer la référence au menu dans le xaml :
<Ribbon:XamRibbon.ApplicationMenu>
<Ribbon:ApplicationMenu x:Name="menuApplication">
</Ribbon:ApplicationMenu>
</Ribbon:XamRibbon.ApplicationMenu>
A partir de la nous pouvons commencer à peupler notre menu avec les boutons du menu principal :
<Ribbon:ApplicationMenu.Items>
<Ribbon:ButtonTool Caption="New" ToolTip="New" />
<Ribbon:ButtonTool Caption="Open"></Ribbon:ButtonTool>
</Ribbon:ApplicationMenu.Items>
La seule subtilité réside dans le fait qu'il ne faut pas directement ajouter les éléments dans le menu il mais il faut passer par la référence à la collection des éléments ici nommé « Items ». Bien entendu vous pouvez y insérer ce que vous voulez mais gardez à l'esprit qu'il faut que votre interface reste cohérente avec ce que l'utilisateur à l'habitude de voir.

Une fois les éléments principaux ajoutés nous pouvons ajouter les éléments d'histoire :
<Ribbon:ApplicationMenu.RecentItems>
<Ribbon:ButtonTool Caption="Histo 1" />
</Ribbon:ApplicationMenu.RecentItems>

Il ne reste plus que les éléments de configuration en bas du menu :
<Ribbon:ApplicationMenu.FooterToolbar>
<Ribbon:ApplicationMenuFooterToolbar>
<Ribbon:ButtonTool Caption="Options" SmallImage="/images/tabHeader.png" />
          <Ribbon:ButtonTool Caption="Quitter" />
</Ribbon:ApplicationMenuFooterToolbar>
</Ribbon:ApplicationMenu.FooterToolbar>
Au passage vous remarquerez que pour ajouter une image à un ButtonTool il faut passer par la propriété SmallImage du bouton ou LargeImage.


II. Intégrer le ruban dans la fenêtre

Dans les captures précédentes vous avez surement remarqué que le ruban n'est pas intégré dans le barre de la fenêtre. En soit ce n'est pas grave mais ce n'est pas très joli. Les composants d'infragistics permettent d'intégrer le ruban dans la barre de titre en utilisant non pas pour base la classe Window mais la classe XamRibbonWindow. Pour faire cela rien de plus simple.

Il faut commencer par modifier le code Xaml de la fenetre :
<Ribbon:XamRibbonWindow x:Class="TestRibbonInfra.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="502" Width="686"
        xmlns:Ribbon="http://infragistics.com/Ribbon"
        >
    <Ribbon:RibbonWindowContentHost>

        <Ribbon:RibbonWindowContentHost.Ribbon>
.

L'élément racine n'est donc plus Window mais XamRibbonWindow . Rien de spécial ni de compliqué.

Ensuite vous remarquerez l'arrivé d'un élément RibbonWindowContentHost qui permet d'ajouter du contenu à la fenetre. C'est juste un composant conteneur qui va vous permettre d'héberger votre contenu et surtout de spécifier le ruban à utiliser. Pour faire cela c'est simple, il suffit d'écrire le ruban dans la balise RibbonWindowContentHost.Ribbon. Une fois la modification du Xaml faite n'oubliez pas de modifier également la déclaration dans votre code :
public partial class Window1 : XamRibbonWindow
Il ne reste plus qu'à tout recompiler et voici le résultat :

xamribbonwindow.JPG

III. Conclusions

Le ruban WPF d'infragistics est à la fois simple à comprendre (mis à part les deux/trois petits pièges) et puissant puisque vous avez accès à la totalité des fonctionnalités du ruban. L'utilisation de ce composant est une vraie plus value pour votre développement « style office » car sa simplicité vous permettra de gagner de nombreuses heures de développement.



Valid XHTML 1.1!Valid CSS!

Copyright © 2008 Vincent Lainé. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Responsable bénévole de la rubrique Microsoft DotNET : Hinault Romaric -