Discussion :

[ikeas]

Bonjour je cherche un style pour representer un TabControl
par exemple si on a trois tabItem A B C
qu'il soit représente avec des expander
A--------




B-------
C-------
si on ouvre B on aura
A-------
B-------



C-------
etc ....

je pense que c'est possible

[micka132]

Ca serait pas ce que tu cherches?
https://www.codeproject.com/Articles...by-Restyling-a

[ikeas]

j'ai trouve accordion dans wpftoolkit
mais ca bug a mort je pense que je vais le refaire

[champsy_dev]

Effectivement il est tous pourris l'accordion dans WPF Toolkit (c'est toujours le même avec un vieux Template bleu tous pourris galère à changer c’est dans des moment comme cela que l'on finit par contribuer à un projet faut voir le positif )
A l'époque ça m'avais tellement déplus que j’aie fini par faire une prémaquette avec deux UI (accordion et tab) finalement le client a préféré les tabs au motif que tout le monde sais comment marche un Tab Panel mais pas un Accordion.
Des fois il ne faut pas trop chercher l'élégance mais plutôt faire efficace. Bon après le public était des agents de maintenance de la route pas forcément habitué à la dernière interface à la mode mais ça m’a permis de relativisé.
Avant de se lancer dans un dev de composant qui peut bouffer une bonne partie de ton temps sur le projet préféré un pré maquette et laisser le client choisir (il est souvent beaucoup, beaucoup plus pragmatique que toi, moi et bien d'autre), après tout est question de public.

[MABROUKI]

bonjour

Moi j'utiliserai un DataTemplate pour relooker le TabItem en y injectant un ToggleButton "squatté" du ToggleButton (Voir Controle de l'Expander ) puisque c'est le look du TabItem qui est en cause !!!

code xaml explicatif du pourquoi :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
  <Window x:Class="WpfExpanderTabItem.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfExpanderTabItem" 
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <local:Persons x:Key="src"/>
        <DataTemplate x:Key="style" DataType="{x:Type local:Person}">
                <Border 
                    Name="Border" 
                    CornerRadius="2,0,0,0"
                    Background="Transparent" 
                    BorderBrush="{StaticResource NormalBorderBrush}"
                    BorderThickness="0,0,1,0">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" ></ColumnDefinition>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Path 
                            Grid.Column="0"
                            Name="Arrow"
                            Fill="DarkSlateBlue"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Data="M 0 0 L 4 4 L 8 0 Z">
                        </Path>
                        <ToggleButton  
                            x:Name="toggle"
                            Grid.Column="1"
                            Margin="5"
                            Background="Tan" 
                            Content="{Binding Path=Nom}">
                            <!--<ToggleButton.Content>
                                <Binding Path="ContentSource">
                                    <Binding.RelativeSource>
                                        <RelativeSource AncestorType="{x:Type ContentPresenter  }" />
                                    </Binding.RelativeSource>
                                </Binding>
                            </ToggleButton.Content>-->
                            <ToggleButton.IsChecked>
                                <Binding Path="IsSelected">
                                    <Binding.RelativeSource>
                                        <RelativeSource AncestorType="{x:Type TabItem}" Mode="FindAncestor" />
                                    </Binding.RelativeSource>
                                </Binding>
                            </ToggleButton.IsChecked>
                        </ToggleButton>
                    </Grid>
                </Border>
                <DataTemplate.Triggers>
                    <Trigger SourceName="toggle"  Property="IsChecked" Value="true">
                        <Setter 
                            TargetName="Arrow" Property="Path.Data"
                            Value="M 0 4 L 4 0 L 8 4 Z" />
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
    </Window.Resources>
    <Grid>
        <TabControl 
            Margin="5" TabStripPlacement="Left"
            ItemsSource="{Binding Source={StaticResource src}}"
          ItemTemplate="{StaticResource style}">
            <!-- Change ItemTemplate to control content on tabs -->
            <!-- Change ContentTemplate to control main content -->
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TextBlock  Text="{Binding Memo}"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

code behind.cs du class Data exemple:

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
 
 
 public class Person
    {
        public Person()
        {
 
        }
        private string nom ;
 
        public string Nom
        {
            get { return nom; }
            set { nom = value; }
        }
        private string memo ;
 
        public string Memo
        {
            get { return memo; }
            set { memo = value; }
        }
 
 
    }
    public class Persons:ObservableCollection<Person>
    {
        Person p;
        public Persons()
        {
            p = new Person() {Nom="Quidam1",Memo="blah blah" };
            this.Add(p);
            p = new Person() { Nom = "Quidam2", Memo = "aha aha" };
            this.Add(p);
            p = new Person() { Nom = "Quidam3", Memo = "hola, hola" };
            this.Add(p);
        } 
    }

bon code....