[WPF] Styles et triggers

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'essaie de réaliser un contrôle personnalisé en WPF qui aurait ce rendu :
Pièce jointe 141334

En gros chaque "onglet" a une police moyenne et est souligné fin en blanc
Lorsque la souris passe dessus la police augment légèrement de taille et le soulignement devient vert et s'épaissit
Quand un "onglet" est choisit le soulignement reste vert et épais.

J'ai donc essayé de faire ça un maximum dans le code xaml

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
<ListView ItemsSource="{Binding LsOnglet}" Background="Transparent" TextBlock.Foreground="White" BorderThickness="0" Cursor="Hand">
    <!-- Définit la façon d'afficher les éléments de la liste -->
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
 
    <!-- Définit comment seront affichés chaques éléments -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- Style d'affichage sur le MouseOver -->
            <DataTemplate.Resources>
                <Style TargetType="{x:Type Border}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="Green" />
                            <Setter Property="BorderThickness" Value="0,0,0,3" />
                            <Setter Property="TextBlock.FontSize" Value="25" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="BorderBrush" Value="White" />
                            <Setter Property="BorderThickness" Value="0,0,0,1" />
                            <Setter Property="TextBlock.FontSize" Value="22" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataTemplate.Resources>
 
            <Border Width="120" Height="50">
                <TextBlock Text="{Binding}" Padding="10,10,0,0"/>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Ce qui donne ce rendu :
Pièce jointe 141338

Tout d'abord il y a un écart entre les onglets de 2 pixels.

Ensuite si je veux faire en sorte que lorsque je click sur un onglet il se mette en souligné épais et vert comment puis-je faire?
Si je définis un binding sur les propriétés BorderThickness et BorderBrush alors les style ne seront plus pris en compte.

Ne puis-je pas faire un truc du style :

Code:

1
2
3
4
<Trigger Property="Selected" Value="True">
    <Setter Property="BorderBrush" Value="Green" />
    <Setter Property="BorderThickness" Value="0,0,0,3" />
</Trigger>

en supposant que mon élément LsOnglet est de type ObservableCollection<Onglet> où Onglet est définit comme ceci :

Code:

1
2
3
4
public class Onglet{
    public string Nom { get; set; }
    public bool Selected { get; set; }
}

Merci :)

25/03/2014, 16h58
tomlev

C'est plutôt le ItemContainerStyle qu'il faudrait modifier, pas le ItemTemplate...
Et puisqu'il s'agit de faire des onglets, pourquoi ne pas utiliser plutôt un TabControl ?

(et ton premier screenshot n'est pas accessible)

Voilà un petit exemple (testé dans Kaxaml) :

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style x:Key="MyTabItemStyle" TargetType="TabItem">
      <Setter Property="Background" Value="#7F7F7F" />
      <Setter Property="BorderBrush" Value="White" />
      <Setter Property="BorderThickness" Value="0,0,0,1" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="FontSize" Value="18" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabItem">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                      <ContentPresenter Margin="{TemplateBinding Padding}"
                                        ContentSource="Header" />
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="BorderBrush" Value="Green" />
          <Setter Property="BorderThickness" Value="0,0,0,3" />
          <Setter Property="FontWeight" Value="Bold" />
        </Trigger>
      </Style.Triggers>
    </Style>
    <Style x:Key="MyTabControlStyle" TargetType="TabControl">
      <Setter Property="ItemContainerStyle" Value="{StaticResource MyTabItemStyle}" />
      <Setter Property="Background" Value="#7F7F7F" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabControl">
              <Grid KeyboardNavigation.TabNavigation="Local"
                    SnapsToDevicePixels="true"
                    ClipToBounds="true">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition x:Name="ColumnDefinition0"/>
                      <ColumnDefinition x:Name="ColumnDefinition1"
                                        Width="0"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                      <RowDefinition x:Name="RowDefinition0"
                                     Height="Auto"/>
                      <RowDefinition x:Name="RowDefinition1"
                                     Height="*"/>
                  </Grid.RowDefinitions>
                        <TabPanel x:Name="HeaderPanel"
                                  Background="{TemplateBinding Background}"
                                  Panel.ZIndex ="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0"
                                  Grid.Row="0"
                                  Margin="0"
                                  IsItemsHost="true"/>
                        <Border x:Name="ContentPanel"
                                Background="{TemplateBinding Background}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2"
                                Grid.Column="0"
                                Grid.Row="1">
                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              Margin="{TemplateBinding Padding}"
                                              ContentSource="SelectedContent"/>
                        </Border>
              </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement"
                                 Value="Bottom">
                            <Setter Property="Grid.Row"
                                    Value="1"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="Auto"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="2,0,2,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement"
                                 Value="Left">
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="1"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Width"
                                    Value="Auto"
                                    TargetName="ColumnDefinition0"/>
                            <Setter Property="Width"
                                    Value="*"
                                    TargetName="ColumnDefinition1"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="0"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="2,2,0,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement"
                                 Value="Right">
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="1"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Width"
                                    Value="*"
                                    TargetName="ColumnDefinition0"/>
                            <Setter Property="Width"
                                    Value="Auto"
                                    TargetName="ColumnDefinition1"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="0"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="0,2,2,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" 
                                 Value="false">
                            <Setter Property="Foreground" 
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <Grid>
    <TabControl Style="{StaticResource MyTabControlStyle}">
      <TabItem Header="Foo" Content="Foo content" />
      <TabItem Header="Bar" Content="Bar content" />
      <TabItem Header="Baz" Content="Baz content" />
    </TabControl>
  </Grid>
</Page>

(pour le TabControl c'est quasiment le style d'origine, en modifiant juste un ou 2 petits trucs)

Oh bah moi qui pensais que ce serait compliqué ^^

Merci beaucoup j'ai juste modifié 2 - 3 trucs pour que ça corresponde à ce que je voulais mais c'était ça l'idée.

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style x:Key="MyTabItemStyle" TargetType="TabItem">
      <Setter Property="Background" Value="#7F7F7F" />
      <Setter Property="BorderBrush" Value="White" />
      <Setter Property="BorderThickness" Value="0,0,0,1" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="FontSize" Value="18" />
      <Setter Property="Width" Value="120" />
      <Setter Property="Height" Value="40" />
      <Setter Property="Cursor" Value="Hand" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabItem">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                      <ContentPresenter Margin="{TemplateBinding Padding}"
                                        ContentSource="Header" />
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="BorderBrush" Value="Green" />
          <Setter Property="BorderThickness" Value="0,0,0,3" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="BorderBrush" Value="Green" />
          <Setter Property="BorderThickness" Value="0,0,0,3" />
          <Setter Property="FontWeight" Value="Bold" />
        </Trigger>
      </Style.Triggers>
    </Style>
    <Style x:Key="MyTabControlStyle" TargetType="TabControl">
      <Setter Property="ItemContainerStyle" Value="{StaticResource MyTabItemStyle}" />
      <Setter Property="Background" Value="#7F7F7F" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabControl">
              <Grid KeyboardNavigation.TabNavigation="Local"
                    SnapsToDevicePixels="true"
                    ClipToBounds="true">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition x:Name="ColumnDefinition0"/>
                      <ColumnDefinition x:Name="ColumnDefinition1"
                                        Width="0"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                      <RowDefinition x:Name="RowDefinition0"
                                     Height="Auto"/>
                      <RowDefinition x:Name="RowDefinition1"
                                     Height="*"/>
                  </Grid.RowDefinitions>
                        <TabPanel x:Name="HeaderPanel"
                                  Background="{TemplateBinding Background}"
                                  Panel.ZIndex ="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0"
                                  Grid.Row="0"
                                  Margin="0"
                                  IsItemsHost="true"/>
                        <Border x:Name="ContentPanel"
                                Background="{TemplateBinding Background}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2"
                                Grid.Column="0"
                                Grid.Row="1">
                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              Margin="{TemplateBinding Padding}"
                                              ContentSource="SelectedContent"/>
                        </Border>
              </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement"
                                 Value="Bottom">
                            <Setter Property="Grid.Row"
                                    Value="1"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="Auto"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="2,0,2,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement"
                                 Value="Left">
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="1"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Width"
                                    Value="Auto"
                                    TargetName="ColumnDefinition0"/>
                            <Setter Property="Width"
                                    Value="*"
                                    TargetName="ColumnDefinition1"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="0"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="2,2,0,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement"
                                 Value="Right">
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Row"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="1"
                                    TargetName="HeaderPanel"/>
                            <Setter Property="Grid.Column"
                                    Value="0"
                                    TargetName="ContentPanel"/>
                            <Setter Property="Width"
                                    Value="*"
                                    TargetName="ColumnDefinition0"/>
                            <Setter Property="Width"
                                    Value="Auto"
                                    TargetName="ColumnDefinition1"/>
                            <Setter Property="Height"
                                    Value="*"
                                    TargetName="RowDefinition0"/>
                            <Setter Property="Height"
                                    Value="0"
                                    TargetName="RowDefinition1"/>
                            <Setter Property="Margin"
                                    Value="0,2,2,2"
                                    TargetName="HeaderPanel"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" 
                                 Value="false">
                            <Setter Property="Foreground" 
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <Grid>
    <TabControl Style="{StaticResource MyTabControlStyle}">
      <TabItem Header="Block" />
      <TabItem Header="Region"/>
      <TabItem Header="Puit"/>
    </TabControl>
  </Grid>
</Page>

Et merci pour le tuyau Kaxaml il est sympa ce soft :)

25/03/2014, 20h27
tomlev

Citation:

Envoyé par zenico64

Et merci pour le tuyau Kaxaml il est sympa ce soft :)

Oui mais méfie toi quand même... il est plus maintenu, et il est pas super stable, donc si tu l'utilises pour faire des trucs un peu sérieux, enregistre souvent ;)