Discussion :

[zenico64]

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 xaml :

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
<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 :


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 xaml :

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

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 c# :

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

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

Merci