IHM - Quelle méthode utiliser ?

**jacquesprogram** · 01/10/2014, 11h07

Bonjour,
dans le cadre d'un projet de gestion de collections, je dois créer une fenêtre permettant l'ajout des différents médias. Ces derniers héritant tous d'une classe générique Media, ils ont tous le 3/4 de leurs propriétés en commun. Seules quelques propriétés sont spécifiques à chaque type de média.

Ma fenêtre doit donc:

afficher un certain nombre de contrôles quelque soit le type de média
afficher les contrôles propres à chaque type de média

Vu que 90% des propriétés de chaque type de média sont les mêmes, je souhaite créer une seule fenêtre AddMedia et afficher, selon le type de média, les contrôles spécifiques à chacun.

Je cherche la meilleure solution:

J'ai pensé aux DataTemplates en constituant un 1er bloc de contrôles (un ItemsControl contenant une Grid qui contiendrait tous les contrôles communs), puis un 2e bloc (ItemsControl idem) dont l'ItemTemplate contiendrait uniquement les contrôles spécifiques à chaque type de média. Mais, petite contrainte supplémentaire: niveau IHM, j'aimerais pouvoir placer certains des contrôles spécifiques à côté des contrôles communs à tous les médias (histoire de cohérence): impossible à faire si je divise mon IHM ainsi en 2 blocs.

J'ai aussi pensé à placer tous les contrôles de tous les types de médias dans la même Grid, et, pour les contrôles spécifiques, de binder leur propriété IsVisible à une propriété que je créerais et qui les rendrait visibles ou pas selon le type de média à ajouter.

Quelle est la bonne solution dans ce contexte ? Y en a t-il d'autres ?

**jacquesprogram** · 01/10/2014, 11h33

Je viens de lire un article sur les DataTemplate.Triggers, qui serait peut-être la solution.
J'afficherais tous les contrôles de tous les types de médias confondus et la propriété IsVisible des contrôles spécifiques serait paramétrée via des Triggers, selon le type de média.

Mais je ne sais pas comment paramétrer la condition "si le média est de type X" (sachant que le DataContext de la fenêtre sera une CollectionViewSource<Book>, CollectionViewSource<Movie>, etc).

Par exemple, pour un Media de type Book, un contrôle spécifique est le txtISBN:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<DataTemplate.Triggers>
       <DataTrigger Binding="{Binding ????}" Value="{x:????}"> <!-- Quoi mettre ici ? -->
        <Setter TargetName="txtISBN" Property="IsVisible" Value="True" />
       </DataTrigger>
</DataTemplate.Triggers>

**Pragmateek** · 01/10/2014, 14h26

Tu peux splitter le rendu des entités en deux : la partie commune et la partie spécifique, via deux ContentControls.

Concernant les autres propriétés partagées visuellement comme le Background du parent il est possible d'utiliser des IValueConverters.

Voici un exemple complet :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
 
namespace SpecificDataTemplate
{
    public class Media
    {
        public string Label { get; set; }
    }
 
    public class Movie : Media
    {
        public string Duration { get; set; }
    }
 
    public class Book : Media
    {
        public string ISBN { get; set; }
    }
 
    public class MediaTypeToBrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value.GetType() == typeof(Movie) ? Brushes.LightBlue :
                   value.GetType() == typeof(Book) ? Brushes.LightCoral :
                   null;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Media[] media = 
            {
                new Movie { Label = "La Fureur du dragon", Duration = "95 min" },
                new Book { Label = "Martine à la ferme", ISBN = "978-2203101012" },
                new Book { Label = "Tintin au Congo", ISBN = "978-2203001015" },
                new Movie { Label = "Missing in Action", Duration = "105 min" }
            };
 
            list.ItemsSource = media;
        }
    }
}

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<Window x:Class="SpecificDataTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SpecificDataTemplate"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox x:Name="list">
            <ListBox.Resources>
                <local:MediaTypeToBrushConverter x:Key="typeToBrushConverter"></local:MediaTypeToBrushConverter>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Margin" Value="2"></Setter>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="{Binding Converter={StaticResource typeToBrushConverter}}">
                        <ContentControl Content="{Binding}">
                            <ContentControl.ContentTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <Label>Label :</Label>
                                        <TextBlock Text="{Binding Label}" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ContentControl.ContentTemplate>
                        </ContentControl>
                        <ContentControl Content="{Binding}">
                            <ContentControl.Resources>
                                <DataTemplate DataType="{x:Type local:Book}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label>ISBN :</Label>
                                        <TextBlock Text="{Binding ISBN}" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                                <DataTemplate DataType="{x:Type local:Movie}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label>Duration :</Label>
                                        <TextBlock Text="{Binding Duration}" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ContentControl.Resources>
                        </ContentControl>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Résultat :

Nom : WPF_SpecializedDataTemplates.png
Affichages : 199
Taille : 17,8 Ko

Selon tes besoins tu auras peut être d'autres cas qui ne seront pas résolubles de ces façons mais il devrait toujours y avoir moyen de factoriser...

**jacquesprogram** · 01/10/2014, 17h32

Envoyé par Pragmateek

Tu peux splitter le rendu des entités en deux : la partie commune et la partie spécifique, via deux ContentControls.

Oui, mais l'inconvénient de scinder en 2 blocs est, comme je l'ai souligné, le fait que je ne pourrai pas placer un contrôle spécifique à un type de média (ex: ISBN) au milieu de contrôles communs: cette rigidité de l'IHM que cela engendre ne me convient pas ; pour un média donné, je souhaite afficher les propriétés en les regroupant de manière cohérente, qui ne correspond pas à cette scission en 2 blocs indépendants.
Nom : IHM.jpg
Affichages : 146
Taille : 19,3 Ko

Nom : IHM.jpg
Affichages : 146
Taille : 19,3 Ko

En revanche, cela conviendra pour d'autres parties de l'IHM, merci beaucoup pour ce code !

**Pragmateek** · 01/10/2014, 18h59

Pas de souci, tu peux réappliquer le même principe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
 
namespace SpecificDataTemplate
{
    public class Media
    {
        public string Label { get; set; }
 
        public string ReleaseDate { get; set; }
    }
 
    public class Movie : Media
    {
        public string Duration { get; set; }
    }
 
    public class Book : Media
    {
        public string ISBN { get; set; }
    }
 
    public class MediaTypeToBrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value.GetType() == typeof(Movie) ? Brushes.LightBlue :
                   value.GetType() == typeof(Book) ? Brushes.LightCoral :
                   null;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Media[] media = 
            {
                new Movie { Label = "La Fureur du dragon", Duration = "95 min", ReleaseDate = "1972-12-30" },
                new Book { Label = "Martine à la ferme", ISBN = "978-2203101012", ReleaseDate = "1954" },
                new Book { Label = "Tintin au Congo", ISBN = "978-2203001015", ReleaseDate = "1931" },
                new Movie { Label = "Missing in Action", Duration = "105 min", ReleaseDate = "1984-11-16" }
            };
 
            list.ItemsSource = media;
        }
    }
}

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Window x:Class="SpecificDataTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SpecificDataTemplate"
        Title="MainWindow"
        SizeToContent="WidthAndHeight">
    <Grid>
        <ListBox x:Name="list">
            <ListBox.Resources>
                <local:MediaTypeToBrushConverter x:Key="typeToBrushConverter"></local:MediaTypeToBrushConverter>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Margin" Value="2"></Setter>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="{Binding Converter={StaticResource typeToBrushConverter}}">
                        <StackPanel Orientation="Horizontal">
                            <Label>Label :</Label>
                            <TextBlock Text="{Binding Label}" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                        <ContentControl Content="{Binding}">
                            <ContentControl.Resources>
                                <DataTemplate DataType="{x:Type local:Book}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label>ISBN :</Label>
                                        <TextBlock Text="{Binding ISBN}" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                                <DataTemplate DataType="{x:Type local:Movie}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label>Duration :</Label>
                                        <TextBlock Text="{Binding Duration}" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ContentControl.Resources>
                        </ContentControl>
                        <StackPanel Orientation="Horizontal">
                            <Label>Release Date :</Label>
                            <TextBlock Text="{Binding ReleaseDate}" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

J'ai simplifié un peu pour clarifier : l'idée est que partout où il y a de la spécificité tu utilises un ContentControl en y listant les templates idoines.

Résultat :

Nom : WPF_SpecializedDataTemplates_v2.png
Affichages : 144
Taille : 20,7 Ko

Nom : WPF_SpecializedDataTemplates_v2.png
Affichages : 144
Taille : 20,7 Ko

Au passage ton cas d'utilisation illustre très bien ce principe assez général : WPF est très puissant et permet de trouver des solutions élégantes et "simples" à des problèmes assez avancés, mais demande de connaitre pas mal de concepts et outils.

**jacquesprogram** · 01/10/2014, 21h10

Super ! Merci.
J'ai cependant un petit souci pour l'adapter à ma situation:
Ma fenêtre sert à ajouter UN Média, donc mes contrôles se situent directement dans une Grid et non pas dans un ListBoxItem.
Dans quoi dois-je mettre ton DataTemplate ?

**Pragmateek** · 01/10/2014, 21h37

Dans ce cas tu as juste besoin du StackPanel défini à la racine du DataTemplate :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<StackPanel Background="{Binding Converter={StaticResource typeToBrushConverter}}">
    ...
</StackPanel>

Et tu peux aussi très bien le supprimer tout simplement si ta mise en page repose sur une Grid.

**jacquesprogram** · 01/10/2014, 22h09

OK. Je viens de tester mais j'ai un petit souci. Voici le résultat à l'affichage:
Nom : result.jpg
Affichages : 155
Taille : 5,3 Ko

J'ai mis ceci dans ma fenêtre:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <Label Content="Titre" />
                        <TextBox x:Name="txtTitle" Text="{Binding Title, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                    </StackPanel>
                    <ContentControl Content="{Binding}">
                        <ContentControl.Resources>
                            <DataTemplate DataType="{x:Type local:Movie}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label Content="Titre Original" />
                                        <TextBox x:Name="txtOriginalTitle" Text="{Binding OriginalTitle, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                                    </StackPanel>
                            </DataTemplate>
                            <DataTemplate DataType="{x:Type local:Book}">
                                    <StackPanel Orientation="Horizontal">
                                        <Label Content="Nbre de pages" />
                                        <TextBox x:Name="txtNbPages" Text="{Binding NbOfPages, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
 
                                        <Label Name="lblISBN" Content="ISBN" />
                                        <TextBox x:Name="txtISBN" Text="{Binding ISBN, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                                    </StackPanel>
                            </DataTemplate>
                        </ContentControl.Resources>
                    </ContentControl>
</StackPanel>

Et le code:

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public partial class AddMedia : Window
    {
        public AddMedia()
        {
            InitializeComponent();
        }
 
        private CollectioDBContext mycontext;
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
 
            System.Windows.Data.CollectionViewSource movieViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("movieViewSource")));
            mycontext = new CollectioDBContext();
            var query = from movie in mycontext.Medias.OfType<Movie>()
                        select movie;
            movieViewSource.Source = query.ToList<Movie>();
        }
    }

**jacquesprogram** · 01/10/2014, 22h25

Ooops ! Je pense que c'est parce que ma movieViewSource est vide ; j'ai oublié que j'avais re-générer ma base de données...
Je testerai demain.

**jacquesprogram** · 02/10/2014, 07h39

Bon, même avec des données, j'ai le même affichage...

Le problème vient de:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

<ContentControl Content="{Binding}">

Si j'enlève Content="{Binding}", plus rien ne s'affiche.

Pour être plus précis, voici le Xaml plus complet de la fenêtre:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Collectio" mc:Ignorable="d" x:Class="Collectio.AddMedia"
        Title="AddMedia" Height="527" Width="747" Loaded="Window_Loaded">
    <Window.Resources>
        <CollectionViewSource x:Key="movieViewSource" d:DesignSource="{d:DesignInstance {x:Type local:Movie}, CreateList=True}"/>
    </Window.Resources>
 
    <Grid DataContext="{StaticResource movieViewSource}">
        <TabControl HorizontalAlignment="Left" Height="501" VerticalAlignment="Top" Width="739">
            <TabItem Header="TEST IHM">
                 <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <Label Content="{DynamicResource strTitle}" />
                        <TextBox x:Name="TEST_txtTitle" Text="{Binding Title, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                    </StackPanel>
                    <ContentControl Content="{Binding}">
                        <ContentControl.Resources>
                            <DataTemplate DataType="{x:Type local:Movie}">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="Titre Original" />
                                    <TextBox x:Name="txtOriginalTitle" Text="{Binding OriginalTitle, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                                </StackPanel>
                            </DataTemplate>
                            <DataTemplate DataType="{x:Type local:Book}">
                                <StackPanel Orientation="Horizontal">                                   
                                    <Label Content="Nbre de pages" />
                                    <TextBox x:Name="txtNbPages" Text="{Binding NbOfPages, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                                    <Label Content="ISBN" />
                                    <TextBox x:Name="txtISBN" Text="{Binding ISBN, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                                </StackPanel>
                            </DataTemplate>
                        </ContentControl.Resources>
                    </ContentControl>
                </StackPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

J'ai essayé en remplaçant le Content par:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

<ContentControl Content="{StaticResource movieViewSource}">

Mais le ContentControl affiche juste System.Windows.Data.CollectionViewSource

Il devrait d'ailleurs afficher la même chose avec Content={Binding}, vu qu'en remontant l'arbre, il devrait tomber sur le DataContext de la Grid qui est une CollectionViewSource ; or, il affiche System.Windows.Data.ListCollectionView

Je n'arrive pas à comprendre pourquoi...

**jacquesprogram** · 02/10/2014, 13h26

En remplaçant le ContentControl par un ItemsControl:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

<ItemsControl ItemsSource="{Binding}">

Ça marche.

J'aurais bien aimé comprendre pourquoi le ContentControl ne fonctionne pas dans mon cas...

**Pragmateek** · 02/10/2014, 13h59

ContentControl c'est pour afficher un seul objet, ItemsControl plusieurs.

Comme tu as une collection il te faut donc le second.

**jacquesprogram** · 02/10/2014, 15h25

OK. Merci.
Par contre, en continuant de construire mon IHM, je viens de me rendre compte d'un nouveau problème:
ma fenêtre est actuellement bindée à une CollectionViewSource<Movie> et partout où j'ai mis des ItemsControl prévus pour des types Book ou Music, à l'exécution, en lieu et place de ceux-ci, voilà ce qui est affiché (ceux qui sont spécifiques au type Movie s'affichent comme il faut ; ex: Titre Original):
Nom : IHM.jpg
Affichages : 132
Taille : 50,6 Ko

Nom : IHM.jpg
Affichages : 132
Taille : 50,6 Ko

P.S: si j'enlève ItemsSource={Binding} pour les ItemsControl de types autres que Movie, ces lignes incongrues disparaissent.

**jacquesprogram** · 02/10/2014, 16h30

Bon, je suis reparti de zéro dans une nouvelle fenêtre.
J'ai mis un ItemsControl à la racine (qui remplace ta ListBox) avec ItemsSource={Binding}, qui contient une série de blocs: des Grids pour les contrôles communs qui doivent être affichés tout le temps, et des ContentControl (qui ne contiennent chacun qu'un élément via le DataTemplate, comme dans ton code) pour les contrôles spécifiques:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<Window x:Class="Collectio.TestAddMedia"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Collectio" mc:Ignorable="d"
        Loaded="Window_Loaded"
        Title="TestAddMedia" Height="398" Width="760">
    <Window.Resources>
            <CollectionViewSource x:Key="movieViewSource" d:DesignSource="{d:DesignInstance {x:Type local:Movie}, CreateList=True}"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource movieViewSource}">
        <ItemsControl ItemsSource="{Binding}">
            <Grid><!-- CONTROLE COMMUN -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Titre" />
                <TextBox x:Name="NEW_txtTitle" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="0" Text="{Binding Title, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
            </Grid><!-- FIN CONTROLE COMMUN -->
 
            <ContentControl Content="{Binding}"><!-- SPECIFIQUE AU TYPE MOVIE (N'EST POURTANT PAS AFFICHE) -->
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Movie}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Titre original" />
                            <TextBox x:Name="NEW_txtOriginalTitle" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding OriginalTitle, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl><!-- FIN SPECIFIQUE AU TYPE MOVIE -->
 
            <ContentControl Content="{Binding}"><!-- SPECIFIQUE AU TYPE BOOK -->
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Book}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Auteur" />
                            <TextBox x:Name="NEW_txtAuthor" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Authors, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl><!-- FIN SPECIFIQUE AU TYPE BOOK -->
 
            <ContentControl Content="{Binding}"><!-- SPECIFIQUE AU TYPE MUSIC -->
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Music}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Interprète" />
                            <TextBox x:Name="NEW_txtSinger" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Singer, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl><!-- FIN SPECIFIQUE AU TYPE MUSIC -->
 
            <Grid><!-- CONTROLE COMMUN -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Description" />
                <TextBox x:Name="NEW_txtDescription" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="0" Text="{Binding Title, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
            </Grid><!-- FIN CONTROLE COMMUN -->
 
        </ItemsControl>
    </Grid>
</Window>

Cette fois, les lignes incongrues du message précédent n'apparaissent plus, mais le contrôle spécifique au type Movie n'est pas non plus affiché !!!
ET: cette fois, le textbox sensé affiché le Titre (qui n'est pourtant pas dans un ContentControl) est vide: problème de binding ?
J'y comprends plus rien....

**jacquesprogram** · 02/10/2014, 16h41

Je viens de penser à une chose:
ItemsControl.ItemsSource est une collection IEnumerable, or, moi, mon DataContext est une CollectionViewSource (qui n'est pas, il me semble, IEnumerable). Tous mes déboires ne viendraient-ils pas de là ?
Mais comment, à ce moment-là, binder correctement mon ItemsControl.ItemsSource ?

**Pragmateek** · 02/10/2014, 17h19

Le souci vient du fait que tu utilises les proxies dynamiques Entity Framework.

Et DataType ne supporte pas le polymorphisme donc il lui faut une instance du type exact.

Une solution serait d'utiliser un DataTemplateSelector ; il y a peut être plus simple mais c'est ce qui me vient à l'esprit...

**jacquesprogram** · 03/10/2014, 12h22

En parcourant le Net, les exemples que je trouve sur les DataTemplateSelectors indiquent tous qu'ils servent à afficher différents templates pour un même objet, selon la valeur de ses propriétés. Bon, j'imagine que je dois peut-être pouvoir pouvoir les utiliser dans mon cas, il faut que j'approfondisse.

En revanche, je viens de tomber sur un article MSDN sur les fameux proxies d'EF: ils disent qu'on peut empêcher EF de les utiliser grâce à DbContext.Configuration.ProxyCreationEnabled = false;.

Je viens de tester mais ça ne change rien...

**jacquesprogram** · 03/10/2014, 14h43

Je continue mes tests, et, ce faisant, je viens de découvrir une erreur énorme:
je veux voir si mon Xaml est fonctionnel. Dans un projet à part, j'ai créé une fenêtre, en mettant juste le dernier code que j'avais créé:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ItemsControl ItemsSource="{Binding}">
            <Grid><!-- CONTROLE COMMUN -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Titre" />
                <TextBox x:Name="NEW_txtTitle" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="0" Text="{Binding Title, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" />
            </Grid><!-- FIN CONTROLE COMMUN -->
 
ETC(...)
 
</ItemsControl>

Ici, une exception aurait dû être levée, si je ne m'abuse: je définis l'ItemsSource et, en même temps, je créé moi-même les Items à l'intérieur de l'ItemsControl => impossible !
L'exception a bien été levée dans mon nouveau projet de test, pas dans mon projet principal, mystère...

Donc, dans mon projet de test, j'ai créé mes classes (comme tu l'avais fait dans ton exemple):

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  public class Media
    {
        public string Title { get; set; }
 
        public string ReleaseDate { get; set; }
 
        public string Description { get; set; }
    }
 
    public class Movie : Media
    {
        public string Duration { get; set; }
 
        public string OriginalTitle { get; set; }
    }
 
    public class Book : Media
    {
        public string ISBN { get; set; }
 
        public string Author { get; set; }
    }
 
    public class Music : Media
    {
        public string Author { get; set; }
        public string Singer { get; set; }
 
        public string Compositor { get; set; }
 
    }

Et le Xaml suivant (identique à celui créé ici, en supprimant l'ItemsSource cette fois):

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<Window x:Class="TestIHM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TestIHM"
        Title="MainWindow" Height="463" Width="735">
    <Grid Name="MainGrid">
        <ItemsControl Name="itcMedia">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Titre" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="Auto" Width="Auto"/>
                <TextBox x:Name="NEW_txtTitle" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Grid.Row="0" Text="{Binding Title}" VerticalAlignment="Center" Width="300"/>
            </Grid>
 
            <ContentControl Content="{Binding}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Movie}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Titre original" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="26" Width="80"/>
                            <TextBox x:Name="NEW_txtOriginalTitle" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Text="{Binding OriginalTitle, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
 
            <ContentControl Content="{Binding}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Book}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Auteur" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="26" Width="80"/>
                            <TextBox x:Name="NEW_txtAuthor" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Text="{Binding Author, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
 
            <ContentControl Content="{Binding}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Music}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Auteur" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="26" Width="80"/>
                            <TextBox x:Name="NEW_txtAuthorMusic" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Text="{Binding Author, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
 
            <ContentControl Content="{Binding}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Music}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Interprète" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="26" Width="80"/>
                            <TextBox x:Name="NEW_txtSinger" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Text="{Binding Singer, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
 
            <ContentControl Content="{Binding}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:Music}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Content="Compositeur" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="26" Width="80"/>
                            <TextBox x:Name="txtCompositor" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Text="{Binding Compositor, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
                        </Grid>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
 
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="Description" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center" Height="Auto" Width="Auto"/>
                <TextBox x:Name="NEW_txtDescription" Grid.Column="1" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="24" Margin="3" Grid.Row="0" Text="{Binding Description, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="300"/>
            </Grid>
 
        </ItemsControl>
    </Grid>
</Window>

Dans le code behind de la fenêtre, je créé mes listes et définis le DataContext de la Grid principale:

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Movie[] myMovies =
            {
                new Movie {Title="Indiana Jones et le Temple maudit", OriginalTitle="Indiana Jones and the Temple of Doom", Description="Indiana Jones dans le temple maudit", Duration="1:42", ReleaseDate="12/04/1988"},
                new Movie { Title="Cursed", OriginalTitle="Cursed", Description="Un jeune se transforme en loup-garou", Duration="1:34", ReleaseDate="22/10/2010"}
            };
 
            Book[] myBooks = 
            {
                new Book { Title="La part des Ténèbres", Author="Stephen King", Description="C'est un excellent livre", ISBN="1248701547", ReleaseDate="05/08/1996"},
                new Book { Title="Némésis", Author="Agatha Christie", Description="Un bon roman policier", ISBN="0125478950", ReleaseDate="11/10/1977"}
            };
 
            Music[] myMusics =
            {
                new Music { Title="Aquarium", Author="Aqua", Compositor="Aqua", Singer="Aqua", Description="Très bon album", ReleaseDate="18/03/2002"},
                new Music { Title="L'âge d'horizons", Author="Alice Dona", Singer="Serge Lama", Compositor="Alice Dona", Description="Très bel album de Lama", ReleaseDate="21/11/2013"}
            };
 
            this.MainGrid.DataContext = myMovies;
 
        }
    }

Cette fois, point d'Entity Framework et de proxy, juste des listes créées par code. Et pourtant, voici ce que j'obtiens:

Nom : NewIHM.jpg
Affichages : 127
Taille : 17,4 Ko

Nom : NewIHM.jpg
Affichages : 127
Taille : 17,4 Ko

**jacquesprogram** · 03/10/2014, 15h30

J'ai encore modifié ma fenêtre pour la faire correspondre exactement à ton exemple: j'ai remplacé l'ItemsControl par une Listbox, mis le template dans Listbox.ItemTemplate et j'ai obtenu la même chose que précédemment !
La seule différence avec ton exemple, c'est que j'ai créé une liste d'objet Movie (héritants de Media), alors que tu as créé une liste composite d'objets Media contenant des Movie, Book.

J'ai donc remplacé mes Movie[] myMovies et autres par Media[] myMovies et.... c'est toujours pareil ! Voici ce que j'obtiens:

Nom : test_autre.jpg
Affichages : 156
Taille : 31,1 Ko

Nom : test_autre.jpg
Affichages : 156
Taille : 31,1 Ko

Avec cette fois, une petite différence: il affiche correctement le Titre original qui est un contrôle spécifique à Movie. Alors pourquoi m'affiche-t-il ces TestIHM.movie pour les contrôles destinés à un autre type d'objet ???
A m'arracher les cheveux !

**jacquesprogram** · 03/10/2014, 16h05

Bon, désolé Pragmateek, en relisant une énième fois ton code, je me suis rendu compte de ma bourde monumentale !
Dans mes blocs ContentControl spécifiques, je n'ai mis qu'un seul template pour un seul type d'objet dans les resources, et créé un ContentControl par type d'objet, alors qu'il faut mettre un template pour chaque type d'objet dans le même ContentControl... Mea culpa

Tout s'affiche désormais comme il faut. Ouf!

Maintenant, je n'ai plus qu'à retourner dans mon projet principal et à tester tout ça avec EF (en désactivant les proxies). Je croise les doigts...

IHM - Quelle méthode utiliser ? [Débutant]

Windows Presentation Foundation

Discussions similaires

Partager

Partager