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 :
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é :
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).
