Les DataTemplate WPF – Partie 1

Tout d’abord nous partons d’un petit projet dont voici l’arborescence :

MainView. xaml :

<UserControl x:Class="DataTemplateTest2.View.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ViewModel="clr-namespace:DataTemplateTest2.ViewModel"
    xmlns:View="clr-namespace:DataTemplateTest2.View">
    <UserControl.Resources>
        <DataTemplate DataType="{x:Type ViewModel:PopinViewModel}">
            <View:PopinView />
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Content="Test" Grid.Column="0" Grid.Row="0" Command="{Binding PopinCommand}" Width="50" Height="20" />
        <ContentControl Content="{Binding Popin}" Grid.ColumnSpan="2" Grid.RowSpan="2" />
    </Grid>
</UserControl>

Notre vue est composée d’une grille dans laquelle se trouve deux éléments. Un bouton pour exécuter une action qui a pour objectif d’ouvrir la PopIn et un ContentControl. Le ContentControl nous permet de présenter un objet issu du ViewModel à l’écran. Si aucun DataTemplate n’est défini, le résultat de la méthode ToString () de l’objet s’affichera à l’écran.

Dans notre cas, un DataTemplate est défini pour les objets de type PopinViewModel. Ce DataTemplate contient la vue PopinView.

MainViewModel :

public class MainViewModel: BaseViewModel
{
	public PopinViewModel Popin { get; set; }
	public CommandBase PopinCommand { get; set; }
	public MainViewModel()
	{
		PopinCommand = new CommandBase(onPopin);
	}
	private void onPopin(object obj)
	{
		if (Popin == null)
		{
			Popin = new PopinViewModel();
			Popin.CloseHandler = ClosePopin;
			Notify("Popin");
		}
	}
	private void ClosePopin()
	{
		Popin = null;
		Notify("Popin");
	}
}

Rien de très compliqué, simplement une commande, qui instancie une PopinViewModel. Nous pouvons voir ici que la classe PopinViewModel expose une propriété CloseHandler. Celle-ci est appelée lorsque la Popin décide de se fermer. Il est aussi envisageable de le faire avec un système d’événements.

PopinView :

<UserControl x:Class="DataTemplateTest2.View.PopinView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
        <Button Content="Close" Command="{Binding QuitCommand}" Width="50" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" />
    </Grid>
</UserControl>

Une vue très simple qui est composée d’un bouton qui permet de déclencher la command QuitCommand du PopinViewModel.

PopinViewModel :

public class PopinViewModel: BaseViewModel
{
	public CommandBase QuitCommand { get; set; }
	public Action CloseHandler { get; set; }
	public PopinViewModel()
	{
		QuitCommand = new CommandBase(onQuit);
	}
	private void onQuit(object obj)
	{
		if (CloseHandler != null)
			CloseHandler();
	}
}

Voici le résultat :

résultat

Sur cet écran, nous pouvons uniquement voir le bouton permettant d’ouvrir la Popin. Le contenu de celle-ci n’est pas affiché car la propriété Popin du MainViewModel est à null. Le DataTemplate n’est donc pas résolu.

Lorsque nous cliquons sur le bouton Test, la propriété Popin est “ settée ” avec un PopinViewModel. Ensuite, il est nécessaire de notifier la vue, avec “ Notify ” pour changer la propriété. Le DataTemplate est résolu puis affiché :

datatemplate résolu

Une fois la Popin ouverte, la PopinView est affichée au centre de la fenêtre principale. Dans cette Popin se trouve un bouton qui exécute la méthode “ CloseHandler ”. Cette méthode appartient au MainViewModel, elle “ set ” la propriété Popin à null et notifie la vue correspondante. Dans ce cas, la Popin ne s’affiche plus à l’écran.

Vous trouverez ici une archive contenant le code source complet du projet (DataTemplateTest2.rar, 17,60 kb).

Les DataTemplate WPF – Partie 3

Ne ratez plus aucune actualité avec la newsletter mensuelle de SoftFluent

Newsletter SoftFluent