Binding UserControl StackPanel WPF

Version imprimable

Bonjour,
je suis maintenant entrain de développer ma première application en WPF et j'ai besion d'afficher une ListBox des UserControl à gauche et lorsque je clique sur un ListBoxItem , il faut que le UserControl qui se trouve dans cet ListBoxItem s'affiche à droite en grand format. je veux savoir est ce que je doit utiliser un StackPanel ou un ContentPresenter pour afficher le UserControl à droite et comment faire le binding .Bon j'ai beaucoup essayé mais toujours il ne marche pas , voiçi mon code

Code:

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
 
<Window x:Class="MyWpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:model1="clr-namespace:MyWpfControlLibrary;assembly=MyWpfControlLibrary"
        Title="MainWindow" Height="677" Width="1433">
    <Grid>
 
        <ListBox x:Name="list" Margin="0,0,942,0">
            <ListBoxItem  IsSelected="True" >
                <model1:UserControl1 UserControlTitle="Title"
                                     UserControlShortTitle="ShortTitle"
                                     UserControlTel="00 00 00 00"
                                     UserControlGSM="00 00 00 00"
                                     UserControlAdresse="Adresse"
                                     Visibility="Visible"
                                     x:Name="customModel1" Width="434" />
            </ListBoxItem>
            <ListBoxItem >
                <model1:UserControl2 UserControlTitle="Title"
                                     UserControlShortTitle="ShortTitle"
                                     UserControlTel="00 00 00 00"
                                     UserControlGSM="00 00 00 00"
                                     UserControlAdresse="Adresse"
                                     Visibility="Visible"
                                     x:Name="customModel2"/>
 
            </ListBoxItem>
            <ListBoxItem >
                <model1:UserControl3 UserControlTitle="Title"
                                     UserControlShortTitle="ShortTitle"
                                     UserControlTel="00 00 00 00"
                                     UserControlGSM="00 00 00 00"
                                     UserControlAdresse="Adresse"
                                     Visibility="Visible"
                                     x:Name="customModel3"/>
            </ListBoxItem>
            <ListBoxItem >
                <model1:UserControl4 UserControlTitle="Title"
                                     UserControlShortTitle="ShortTitle"
                                     UserControlTel="00 00 00 00"
                                     UserControlGSM="00 00 00 00"
                                     UserControlAdresse="Adresse"
                                     Visibility="Visible"
                                     x:Name="customModel4"/>
            </ListBoxItem>
            <ListBoxItem >
                <model1:UserControl5 UserControlTitle="Title"
                                     UserControlShortTitle="ShortTitle"
                                     UserControlTel="00 00 00 00"
                                     UserControlGSM="00 00 00 00"
                                     UserControlAdresse="Adresse"
                                     Visibility="Visible"
                                     x:Name="customModel5"/>
            </ListBoxItem>
        </ListBox>
        <StackPanel DataContext="{Binding ElementName=list, Path=SelectedItem,Mode=OneWay}">
            <StackPanel.Resources>
                <DataTemplate DataType="{x:Type UserControl}">
                    <model1:UserControl1/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type UserControl}">
                    <model1:UserControl2/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type UserControl}">
                    <model1:UserControl3/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type UserControl}">
                    <model1:UserControl4/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type UserControl}">
                    <model1:UserControl5/>
                </DataTemplate>
            </StackPanel.Resources>
        </StackPanel>
    </Grid>
</Window>

dans cette ligne :

Code:

1
2
 
 <StackPanel DataContext="{Binding ElementName=list, Path=SelectedItem,Mode=OneWay}">

il m'affiche une exception: XamlParseException
voiçi les détails de cette exception :
'La propriété Set 'System.Windows.ResourceDictionary.DeferrableContent' a levé une exception.'
SVP comment je peut corriger ce problème et est ce que quelqu'un peut me donner une explication ou un lien utile pour comprendre la balise <DataTemplate> </DataTemplate>

12/09/2013, 12h27
Kikuts
Bonjour !

Alors il faut que ta liste possède une property object / userControl contenant le UC.

Partie droite un contentControl / ContentPresenter qui bind sa property Content sur la property du model utilisé pour représenter les ItemListBox.

Exemple de model minimaliste (pas de INotifyProperyChanged ni d'attribut je te laisse le soin de t'en occuper :D)
Code:

1 2 3 4 5 6 public class UserControlDefinition { public property string NomUC {get;set;} public property UserControl UC {get;set;} }
Tu remplis ta liste côté codebehind / dans ton viewModel. Tu l'affectes en itemssource de la liste.

Tu mets ton displaymemberpath sur NomUC et tu bind le ContentControl/presenter sur SelectedItem.UC
12/09/2013, 16h16
sarah2810
Citation:
Envoyé par Kikuts

Bonjour !

Alors il faut que ta liste possède une property object / userControl contenant le UC.

Partie droite un contentControl / ContentPresenter qui bind sa property Content sur la property du model utilisé pour représenter les ItemListBox.

Exemple de model minimaliste (pas de INotifyProperyChanged ni d'attribut je te laisse le soin de t'en occuper :D)

Code:

1 2 3 4 5 6 public class UserControlDefinition { public property string NomUC {get;set;} public property UserControl UC {get;set;} }

Tu remplis ta liste côté codebehind / dans ton viewModel. Tu l'affectes en itemssource de la liste.

Tu mets ton displaymemberpath sur NomUC et tu bind le ContentControl/presenter sur SelectedItem.UC
Tout d'abord je te remerçie beaucoup "Kikuts" pour ta réponse mais elle semble un peu mystérieuse pour moi .
Bon en général j'ai pas bien compris je te remerçie d'avance si tu me donner un peu d'explication.

Tu dois t'y prendre autrement :

tu créés une classe qui va servir de DataContext au listboxItem.

Dans ton code behind tu fais par exemple :

Code:

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
 
public constructeurDeTonControl()
{
this.DataContext = this;
CreerListe();
}
 
private observableCollection<NomDuModelListBoxItem> _ListeUserControls;
public property observableCollection<NomDuModelListBoxItem> ListeUserControls
{
get{_ListeUserControls;}
set{ _ListeUserControls = value; RaisePropertyChanged("ListeUserControls");}
}
 
private NomDuModelListBoxItem _SelectedUC;
public property NomDuModelListBoxItem SelectedUC
{
get{_SelectedUC;}
set{ _SelectedUC= value; RaisePropertyChanged("SelectedUC");}
}
 
public void CreerListe()
{
ListeUserControls = new observableCollection<NomDuModelListBoxItem>();
ListeUserControls.Add(new NomDuModelListBoxItem() { Libelle ="uc 1", UserControl = new UserControl1()});
ListeUserControls.Add(new NomDuModelListBoxItem() { Libelle ="uc 2", UserControl = new UserControl2()});
}

Ensuite tu bind ta listBox avec :

Code:

1
2
3
4
5
6
7
 
<listBox x:Name="lb_uc"
ItemsSource="{Binding ListeUserControls}"
SelectedItem="{Binding SelectedUC, mode=TwoWay}"
DisplayMemberPath="Libelle" />
 
<contentControl Content="{Binding SelectedUC,Mode=OneWay}"/>

Après pour optimiser, tu pourrais créer à la volé ton UC par réflexion avec le Libelle du UC (ou ajoutes une property NomClasse) pour éviter de stocker une instance de UC dans chaque item.