Discussion :

[Kropernic]

Hello,

Je débute avec wpf et je cherche à reproduire le SplitButton qu'on pouvait trouver dans les ToolStrip de Winform.

Du coup, j'ai fouillé un peu le net et j'ai trouvé ceci.

J'ai donc créé un projet UserControl, j'ai mis les sources, compilé et y a pas d'erreur (c'est déjà ça).

Le problème, c'est pour l'utiliser. J'ai bien ajouté une référence vers la dll produite par le projet du usercontrol, je peux ajouter la balise "<SelectButton>" dans mon code xaml mais aucune idée de comment lui attribuer des éléments...

Quelqu'un pourrait-il m'aider à y voir plus claire dans l'utilisation de ce contrôle ?
Quels sont les lignes du code source de ce contrôle auxquelles je dois prêter attention pour comprendre son fonctionnement ?

Je patauge un peu (beaucoup?) pour le moment.

Sinon, si quelqu'un connait un autre solution qui soit plus "clef en main" pour avoir ce genre de rendu, je suis bien sûr preneur.

[ikeas]

il faut manifestement utiliser ItemsSource comme pour une listbox en wpf
vu que tu as public "IEnumerable ItemsSource" dans le code

[Kropernic]

Hello,

Déjà, merci d'avoir pris la peine de répondre.

J'ai testé d'affecter une List(Of String) à la propriété ItemSource du contrôle dans le code behind et ça affiche effectivement cette liste lors que je clique sur la flèche vers le bas pour me permettre de faire mon choix dans la liste.

Pas contre, il doit normalement s'afficher un choix par défaut et, si je choisis quelque chose dans la liste, ce choix doit s'afficher.

Et je ne comprends pas absolument comment faire. Encore une fois, je ne cherche pas un code tout fait. Je cherche à comprendre comment je dois analyser le code du composant pour comprendre son fonctionnement.

En attendant, je me suis débrouillé en utilisant un menu à la place de ma toolbar. Ca marche tout aussi bien. Donc rien d'urgent mais j'aimerais comprendre/apprendre.

[ikeas]

je vois pas trop bien ce que tu veux faire
peut etre que tu peux initialiser le selecteditem avec du binding
normalement c'est comme cela que l'on fait avec une liste box
d'ailleurs a ce propos je te suggere de le faire dans un premier temps en bondant sur une listbox deja pour voir et par la suite d'utiliser ensuite le composant specifique

[MABROUKI]

bonjour

Bah comme ce UserControl est concu à la base pour etre binde vu qu'il expose à l'exterieur :
- les props ItemsSource ,ItemTemplate et SelectedIndex de son constituent ListBox
Cela exige d'exposer egalement l'event SelectionChanded du ListBox si on veut en faire un control utile

Mais en exposant egalement l'event Click du Button ,lequel Button contient un Expandeur lequel dispose d'une fenetre PopUp (de naissance) dans laquelle l'auteur a loge notre listbox ,on est devant le syndrome d'un ......un.....ComboBoxx .......... sans la saisie!!!

Choix par defaut :
- le SelectedIndex vaut par defaut =0 car c'est un Int et le UserControl affiche le 1er element de ArrayList qui contient 3 elements (exemple qui suit)...mais on peut le positionner ailleurs -à 5- alors il n'affichera rien car cet element n'existe pas...
Cela equivaut à le mettra à -1....valeur valide pour le SelectedIndex d'un ListBox vide !!!

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
 
 
<Window x:Class="WpfSelectButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System.Collections;assembly=mscorlib" 
        xmlns:local="clr-namespace:WpfSelectButton" 
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <sys:ArrayList x:Key="liste">
                <local:LeItem ID="100" Name="kropernic"/>
                <local:LeItem ID="200" Name="mabrouki"/>
                <local:LeItem ID="300" Name="inconnu"/>
        </sys:ArrayList>
        <DataTemplate x:Key="templateLeItem" >
            <StackPanel Orientation="Horizontal" >
                <TextBlock Margin="5" Text="{Binding ID}"/>
                <TextBlock Margin="5" Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <local:SelectButton
            Height="30" Width="100"
            Click="SelectButton_Click" 
            ItemTemplate="{StaticResource templateLeItem}"
            ItemsSource="{Binding Source={StaticResource liste}}"
            SelectionChanged="SelectButton_SelectionChanged" >
 
        </local:SelectButton>
        <StackPanel Grid.Row="1" Background="AliceBlue" >
            <TextBlock x:Name="tb1" Text=""></TextBlock>
            <TextBlock x:Name="tb2" Text=""></TextBlock>
            <ListBox 
                x:Name="lb"
                Height="100"
                ItemTemplate="{StaticResource templateLeItem}" >
 
            </ListBox> 
        </StackPanel>
    </Grid>
</Window>

L'autre inconvenient majeur du UserControl WPF est que c'est un ContentControl et que c'est dans cette prop que nous mettons l'armada de controls constituants......
Mais cette prop peut etre ecrase par tout user malveillant comme ceci!

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
 
<Window x:Class="WpfSelectButton.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System.Collections;assembly=mscorlib" 
        xmlns:local="clr-namespace:WpfSelectButton" 
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <sys:ArrayList x:Key="liste">
            <local:LeItem ID="100" Name="kropernic"/>
            <local:LeItem ID="200" Name="mabrouki"/>
            <local:LeItem ID="300" Name="inconnu"/>
        </sys:ArrayList>
        <DataTemplate x:Key="templateLeItem" >
            <StackPanel Orientation="Horizontal" >
                <TextBlock Margin="5" Text="{Binding ID}"/>
                <TextBlock Margin="5" Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <local:SelectButton
            Height="30" Width="100"
            Click="SelectButton_Click" 
            SelectedIndex="-1"
            ItemTemplate="{StaticResource templateLeItem}"
            ItemsSource="{Binding Source={StaticResource liste}}"
            SelectionChanged="SelectButton_SelectionChanged" >
            maudite chaine de la saint valentin........!!!
        </local:SelectButton>
 
    </Grid>
</Window>

Et il n'existe aucun remede à ce mal d'apres les meilleurs mentors du team WPF .......
En winfoms il est impossible l'interface visuelle d'un UserControl droppe. !!!
La solution c'est s'engages dans le developpement d'un custom à partir de zero ("from scratch" comme ils disent à Microsoft)....
Adieu,veaux ,vaches ,cochons ....!!!
bon code....

[MABROUKI]

re
excuse-moi pour les fautes de frappes:
En winfoms il est impossible pour un developpeur d'ecraser l'interface visuelle d'un UserControl droppe. !!!
A moins d'avoir le code source!!!

[Kropernic]

Ca y est, j'ai compris.

C'est donc un contrôle qu'on est obligé de binder "dynamiquement". Soit dans le code behind, soit en utilisant les ressources comme Mabrouki l'a montré.

C'est maintenant plus clair pour ce contrôle (que je n'utiliserai finalement pas mais j'aurai au moins appris quelque chose).

Finalement, je me suis débrouillé en utilisant le composant menu et l'effet est assez proche de ce que je voulais à la base.
La preuve en image.

et en 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
34
                            <MenuItem>
                                <MenuItem.Header>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="23"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="Card" VerticalAlignment="Center" Grid.Column="0" Padding="0,0,5,0" />
                                        <Expander ExpandDirection="Down" Grid.Column="1" IsEnabled="False" VerticalAlignment="Center"/>
                                    </Grid>
 
                                </MenuItem.Header>
                                <MenuItem.Icon>
                                    <Image Source="pack://siteoforigin:,,,/Resources/card_back.png" Width="30" Height="30"/>
                                </MenuItem.Icon>
                                <MenuItem>
                                    <MenuItem.Header>
                                        <TextBlock Text="Lock" VerticalAlignment="Center"/>
                                    </MenuItem.Header>
                                    <MenuItem.Icon>
                                        <Image Source="pack://siteoforigin:,,,/Resources/lock.png" Width="30" Height="30"/>
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem>
                                    <MenuItem.Header>
                                        <TextBlock Text="New" VerticalAlignment="Center"/>
                                    </MenuItem.Header>
                                </MenuItem>
                                <MenuItem>
                                    <MenuItem.Header>
                                        <TextBlock Text="Reprint" VerticalAlignment="Center"/>
                                    </MenuItem.Header>
                                </MenuItem>
                            </MenuItem>

Sinon, je n'ai compris ce dont vous parliez avec le truc que l'utilisateur peut modifier au niveau de l'interface...

[MABROUKI]

re

Sinon, je n'ai compris ce dont vous parliez avec le truc que l'utilisateur peut modifier au niveau de l'interface...

Pourtant tu as un exemple....
Si l'auteur du SelectButton n'as mis à notre disposition que la dll ,sans code source ,nous aurions droppe ce control sur un form à partir de la boite à outils après l'avoir ajoute à celle-ci...
Et comme de braves codeurs , nous pouvoir ecrire n'importe quoi ...
ce code xaml:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
  <local:SelectButton
            Height="30" Width="100"
            Click="SelectButton_Click" 
            SelectedIndex="-1"
            ItemTemplate="{StaticResource templateLeItem}"
            ItemsSource="{Binding Source={StaticResource liste}}"
            SelectionChanged="SelectButton_SelectionChanged" >
 
             tape ceci  ici  n'importe quoi  tu es dans la prop Content !!!
 
            </local:SelectButton>

et celui-là sont equivalents:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
  <local:SelectButton
            Height="30" Width="100"
            Click="SelectButton_Click" 
            SelectedIndex="-1"
            ItemTemplate="{StaticResource templateLeItem}"
            ItemsSource="{Binding Source={StaticResource liste}}"
            SelectionChanged="SelectButton_SelectionChanged" >
 
            <local:SelectButton>.Content>
                          tape ceci  ici  n'importe quoi  tu es dans la prop Content !!!
            </local:SelectButton> .Content>
        </local:SelectButton>

Supposons maintenant que tu ais acquis ou achete la dll d'un usercontrol winforms -sans code source- et que tu l'ais ajoute à ta boite à outils
Apres droppe la bête sur ton form ,tu ne peux modifier modifier sa prop de contenu (les controls constituants ajoutes par l'auteur) ,alors qu'en WPF tu peux les ecraser par la phrase "n'importe quoi...."
bon code...

[MABROUKI]

re
A propos de "vrai" SplitButton qui mimique celui des winforms et auquel on peut ajouter à la volee un Combo,un TextBox,ou un Button comme childs , avec la prop DisplayStyle settable à ImageAndText ou TexONLY...
Sur ce lien google vers le site Microsoft CodePlex il y en un (custom control) avec les sources:
https://www.google.fr/url?sa=t&rct=j...14195076,d.ZWU
bon code...