Discussion :

[filobilo]

Bonjour,

Débutant en silverlight, sur un projet assez conséquent, je me pose pas mal de question sur la bonne méthode a utiliser pour créer mon objet graphique.

Ma question précise.
pour faire simple j'ai un objet chargé en code behind, on va prendre une liste de Personne où une personne à un nom,un prenom et un sexe (qui va prendre toute son importance.)

J'essaie de créer une liste XAML ou je vais afficher mes noms et prenoms.

Après une construction complète en C#, j'ai créer un template ou je bindais 2 textblock sur mes property nom et prenom. Jusque là ca allait, mais j'ai du aller plus loin dans ma liste : effet de survol, selection, et affichage différent selon le sexe.

je me suis basé sur l'article suivant : http://mark-dot-net.blogspot.com/200...ht-part-3.html

J'arrive a créer mon élément mais j'ai cassé le binding à ce moment là.

Plus j'avance et plus je pense ne pas avoir aborder mon problème par le bon bout.


mon code :

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
 
   <StackPanel Background="AliceBlue">
        <StackPanel.Resources>
            <Style TargetType="ListBoxItem" x:Key="lstItem">
                <Setter Property="Padding" Value="0"></Setter>
                <Setter Property="Foreground" Value="Red"></Setter>                
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel Background="Aqua">
                                <TextBlock x:Name="prenom" Text="{Binding Path=prenom}"></TextBlock>
                                <TextBlock x:Name="nom" Text="{Binding Path=nom}"></TextBlock>
                                <ContentPresenter Content="{TemplateBinding Content}"   />
                            </StackPanel>
                        </ControlTemplate>                         
                    </Setter.Value>
                </Setter>
            </Style>
 
            <Style TargetType="ListBox" x:Key="lst">
                <Setter Property="Width" Value="180"></Setter>
                <Setter Property="Padding" Value="0"></Setter>
                <Setter Property="Margin" Value="0"></Setter>
                <Setter Property="ItemContainerStyle" Value="{StaticResource lstItem}"  />
                <Setter Property="ItemsSource" Value="iLstPersonne"></Setter>
             </Style>
 
        </StackPanel.Resources>
 
        <ListBox Style="{StaticResource lst}" Name="lstPersonneXaml">
 
        </ListBox>
 
 
    </StackPanel>

et en code behind je lie ma liste a ma liste d'objet C#.
ma liste est remplie

Code :

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

lstPersonneXaml.ItemsSource = iLstPersonne;

Qu'en pensez vous ?

En fait je voudrais faire un peu la même chose que dans l'article cité en ajoutant un lien entre ma liste Xaml, et ma liste d'objet.

[Samuel Blanchard]

Bonjour,

Tu peux enlever ça déjà :

Code :

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

<Setter Property="ItemsSource" Value="iLstPersonne"></Setter>

Dans ton cas la meilleur chose à faire je pense est de déclaré une property dependency cote code (snippet propdp) pour que ta liste soit Bindable puis dans ton constructeur tu lies le DataContext avec ton usercontrol (ça peut être MainPage) contenant la listbox :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// Constructeur
public MainPage()
{
this.InitializeComponent();
 
this.LayoutRoot.DataContext = this; // ici le dataContext devient MainPage
// on instancie la propdp 
this.iLstPersonnes = new ObservableCollection<Personne>(); 
 
}
 
// ici declare ta propdp iLstPersonne de type ObservableCollection<Personne>

coté xaml (sur MainPage.xaml)

Code :

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

1
2
3
        <ListBox Style="{StaticResource lst}" Name="lstPersonneXaml" ItemsSource="{Binding iLstPersonne}">
 
        </ListBox>

C'est une solution parmi d'autre...

[filobilo]

Merci pour ta réactivité.

Code :

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

<Setter Property="ItemsSource" Value="iLstPersonne"></Setter>

c'était un reliquat de mes différents essais...

J'ai donc transformé ma liste en ObservableCollection, mais ma liste ne s'affiche toujours pas, bien qu'elle soit rempli.

le xaml

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
<StackPanel Background="AliceBlue" Name="LayoutRoot">
        <StackPanel.Resources>
            <Style TargetType="ListBoxItem" x:Key="lstItem">
                <Setter Property="Padding" Value="0"></Setter>
                <Setter Property="Foreground" Value="Red"></Setter>                
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel Background="Aqua">
                                <TextBlock x:Name="prenom" Text="{Binding Path=prenom}"></TextBlock>
                                <TextBlock x:Name="nom" Text="{Binding Path=nom}"></TextBlock>
                                <ContentPresenter Content="{TemplateBinding Content}"   />
                            </StackPanel>
                        </ControlTemplate>                         
                    </Setter.Value>
                </Setter>
            </Style>
 
            <Style TargetType="ListBox" x:Key="lst">
                <Setter Property="Width" Value="180"></Setter>
                <Setter Property="Padding" Value="0"></Setter>
                <Setter Property="Margin" Value="0"></Setter>
                <Setter Property="ItemContainerStyle" Value="{StaticResource lstItem}"  />                
             </Style>
 
        </StackPanel.Resources>
 
        <ListBox Style="{StaticResource lst}" Name="lstPersonneXaml" ItemsSource="{Binding iLstPersonne}"/>
 
        <Button Content="Bouton" Click="Button_Click"></Button>
        <TextBlock Name="lblInfo"></TextBlock>
 
    </StackPanel>

le code behind.

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
 public ObservableCollection<Personne> iLstPersonne;// = new ObservableCollection<Personne>();
 
        public MainPage()
        {
            this.InitializeComponent();
 
            // ici le dataContext devient MainPage
            this.LayoutRoot.DataContext = this;
 
            // on instancie la propdp 
            this.iLstPersonne = new ObservableCollection<Personne>();
 
            Personne oPers = new Personne();
            oPers.CreatePersonne("BOLT", "Usain");
            iLstPersonne.Add(oPers);
            oPers = new Personne();
            oPers.CreatePersonne("BRICO", "Judas");
            iLstPersonne.Add(oPers);
            oPers = new Personne();
            oPers.CreatePersonne("ROUX", "Guy");
            iLstPersonne.Add(oPers);
 
            //on charge la liste dans sa listbox
            //lstPersonneXaml.ItemsSource = iLstPersonne;            
        }

[filobilo]

Ce qui est intérressant, c'est que si au lieu de mettre un binding sur ma liste, je la charge dans mon code behind

Code :

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

1
2
//on charge la liste dans sa listbox
            lstPersonneXaml.ItemsSource = iLstPersonne;

alors à ce momemt la ma listBox s'affiche, sauf qu'au lieu de m'afficher mes property elle m'affiche l'objet.

[Samuel Blanchard]

Je vois ton problème, tu utilise Template au lieu de de DataTemplate
remplace ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel Background="Aqua">
                                <TextBlock x:Name="prenom" Text="{Binding Path=prenom}"></TextBlock>
                                <TextBlock x:Name="nom" Text="{Binding Path=nom}"></TextBlock>
                                <ContentPresenter Content="{TemplateBinding Content}"   />
                            </StackPanel>
                        </ControlTemplate>                         
                    </Setter.Value>
                </Setter>

par ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Background="Aqua">
                                <TextBlock x:Name="prenom" Text="{Binding Path=prenom}"></TextBlock>
                                <TextBlock x:Name="nom" Text="{Binding Path=nom}"></TextBlock>
Content}"   />
                            </StackPanel>
                        </DataTemplate>                         
                    </Setter.Value>
                </Setter>

tu peux oublier le Binding de la ListBox (ainsi que le Layout.DatContext du constructeur) si tu fixes directement ta donnée comme tu le fais actuellement.

[filobilo]

Oui j'avais créer un data template au départ, puis je suis parti ensuite sur le template pour implémenter l'objet visualstatemanager pour gérer mes différents états.

Je peux apparement implémenter le visualstatemanager sur le dataTemplate.

Merci pour tes recommandations.