Wilfried Woivré & .Net

WPF : Utiliser plusieurs templates dans un ItemControls

JANV14

Dans certains cas d’utilisation, il peut vous arriver de vouloir utiliser différents templates dans un ItemControls tel qu’une listbox. Prenons par exemple, un cas concret, soit twitter, si vous voulez réaliser un client WPF pour ce célèbre réseau sociaux, vous pouvez avoir envie de définir différents templates pour les messages que vous avez envoyé, ou ceux que vous recevez (comme on peut le voir dans de nombreux clients).

Le soucis c’est que pour réaliser cela, on voudrait afficher une listbox avec les dernières activités, et donc mixer les templates dans cet ItemControl. Ce qu’on peut faire c’est donc d’utiliser des DataTemplate que l’on va typer selon l’objet. Comment cela marche.

Prenons un cas plus simple d’un model objet de ce type :

image

On a donc une classe Figure, dont tous nos éléments que l’on souhaite afficher vont dériver de cette classe.

Après il nous suffit de déclarer en XAML nos différents DataTemplate en ressources de cette façon :

    <Window.Resources>
        <DataTemplate DataType="{x:Type Model:Rectangle}">
            <Rectangle Height="20" Width="60" Fill="Blue" Margin="2" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type Model:Ellipse}">
            <Ellipse Height="20" Width="40" Fill="Red" Margin="2" />
        </DataTemplate>
    </Window.Resources>

On va donc typer nos différents DataTemplate grâce à la propriété DataType. Il nous suffit donc de créer notre jeu de données de façon on ne peut plus classique.

private void InitData()
{
    var figures = new List<Model.Figure>();
    figures.Add(new Model.Rectangle());
    figures.Add(new Model.Rectangle());
    figures.Add(new Model.Ellipse());
    figures.Add(new Model.Ellipse());
    figures.Add(new Model.Rectangle());
    figures.Add(new Model.Ellipse());

    this.DataContext = figures;
}

Et ensuite de les lier à notre ItemControls de la même façon :

<ListBox ItemsSource="{Binding}" />

Et voilà, ces quelques lignes vous donnent le rendu souhaité

image

 

Tout le code est dans l’article, donc pas besoin que je fournisse le projet de démo!

Merci à Pascal Louveau de m’avoir posé la question.

Remonter

MVVM Template en WPF et Silverlight

JUIL31

Bonjour à tous,

Alors je publie cet article vu le nombre de personne qui visitent mon blog pour les données sur le MVVM, j’espère avant tout qu’elles vous sont précieuses !

En fait durant mes différentes recherches sur le MVVM, principalement sur des projets de template pour réaliser des démonstrations, ou pour créer des projets plus rapidement avant de décider à implémenter mon propre projet de Template qui sera peut être publié un jour (si vous êtes sages !)

 

Vous pouvez donc retrouver un très bon Template sur le MVVM sur le site de codeplex à l’adresse : http://wpf.codeplex.com

 

Maintenant pour Silverlight et WPF, vous avez celui sur le site de Galasoft : http://www.galasoft.ch/mvvm/install/publish.html 

Alors rapidement avant que je ne vois des gens choqués sur mon blog, ces deux templates référence une dll de Galasoft, qui gère le MVVM, néanmoins si vous n’avez pas besoin de changer le comportement de son Toolkit, il suffit amplement pour des projets d’entreprise et de démonstration entre autre. Cependant voici un aperçu de sa dll : http://www.galasoft.ch/mvvm/getstarted/

 

Et voilà, en espérant que cela vous sera utile pour des développements futurs !

Remonter