[WPF] Positionnement des fleches indiquant la direction dans un ListView header

**Jayme65** · 29/08/2015, 15h59

Bonjour,

Nom : Untitled-1.png
Affichages : 228
Taille : 6,9 Ko

J'ai un ListView qui utilise des flèches de direction pour indiquer le tri.
Cela marche très bien..si ce n'est un ptit problème 'esthétique'...comment pourrais-je faire pour que les flèches commencent exactement tout au dessus (et en dessous pour celle du bas), comme cela:
Nom : Untitled-2.png
Affichages : 213
Taille : 1,4 Ko

Nom : Untitled-2.png
Affichages : 213
Taille : 1,4 Ko

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<Window x:Class="MainWindow"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="ArrowUp">
            <Grid>
                <TextBlock VerticalAlignment="Center" Text="{Binding}" />
                <Path VerticalAlignment="Bottom" HorizontalAlignment="Center" Fill="Black" Data="F1 M 3,0L 6,3L 0,3L 3,0 Z " />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ArrowDown">
            <Grid>
                <Path VerticalAlignment="Top" HorizontalAlignment="Center" Fill="Black" Data="F1 M 3,3L 0,0L 6,0L 3,3 Z " />
                <TextBlock VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView Name="PersonListView" GridViewColumnHeader.Click="GridViewColumnHeaderClick">
            <ListView.View>
                <GridView >
                    <GridView.ColumnHeaderContainerStyle>
                        <Style TargetType="{x:Type GridViewColumnHeader}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GridViewColumnHeader">
                                        <Grid>
                                            <Border Height="25" Name="HeaderBorder" BorderThickness="1" BorderBrush="Black" Background="Gray">
                                                <ContentPresenter Name="HeaderContent" TextElement.Foreground="White" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                            </Border>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="true">
                                                <Setter TargetName="HeaderContent" Property="TextElement.Foreground" Value="White"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GridView.ColumnHeaderContainerStyle>
                    <GridViewColumn DisplayMemberBinding="{Binding Url}" Width="300">
                        <GridViewColumnHeader>Url</GridViewColumnHeader>
                    </GridViewColumn>
                    <GridViewColumn DisplayMemberBinding="{Binding Name}" Width="100">
                        <GridViewColumnHeader>Name</GridViewColumnHeader>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

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
Imports System.ComponentModel
 
Class MainWindow
    Private _lastHeaderClicked As GridViewColumnHeader = Nothing
    Private _lastDirection As ListSortDirection = ListSortDirection.Ascending
    Private Sub MainWindow_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim personList As New List(Of Person)()
        personList.Add(New Person() With {.Url = "http://www.apple.com", .Name = "Apple"})
        personList.Add(New Person() With {.Url = "http://www.hp.com", .Name = "HP"})
        personList.Add(New Person() With {.Url = "http://www.asus.com", .Name = "Asus"})
        PersonListView.ItemsSource = personList
    End Sub
    Private Sub GridViewColumnHeaderClick(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Dim headerClicked As GridViewColumnHeader = TryCast(e.OriginalSource, GridViewColumnHeader)
        Dim direction As ListSortDirection
 
        If headerClicked IsNot Nothing Then
            If headerClicked.Role <> GridViewColumnHeaderRole.Padding Then
                If headerClicked IsNot _lastHeaderClicked Then
                    direction = ListSortDirection.Descending
                    If _lastHeaderClicked IsNot Nothing Then
                        _lastHeaderClicked.Column.HeaderTemplate = Nothing
                    End If
                    headerClicked.Column.HeaderTemplate = TryCast(Resources("ArrowDown"), DataTemplate)
                Else
                    If _lastDirection = ListSortDirection.Ascending Then
                        direction = ListSortDirection.Descending
                        headerClicked.Column.HeaderTemplate = TryCast(Resources("ArrowDown"), DataTemplate)
                    Else
                        direction = ListSortDirection.Ascending
                        headerClicked.Column.HeaderTemplate = TryCast(Resources("ArrowUp"), DataTemplate)
                    End If
                End If
                ' 
                _lastHeaderClicked = headerClicked
                _lastDirection = direction
            End If
        End If
    End Sub
End Class
Public Class Person
    Public Property Url() As String
        Get
            Return m_Id
        End Get
        Set(value As String)
            m_Id = value
        End Set
    End Property
    Private m_Id As String
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(value As String)
            m_Name = value
        End Set
    End Property
    Private m_Name As String
End Class

Merci!!

**MABROUKI** · 30/08/2015, 03h43

bonjour

bah tu n'as qu'à injecter un margin approprie pour le Path...ici:

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
 
<Window.Resources>
        <DataTemplate x:Key="ArrowUp">
            <Grid>
                <TextBlock VerticalAlignment="Center" Text="{Binding}" />
                <Path Margin="5" VerticalAlignment="Bottom" HorizontalAlignment="Center" Fill="Black" Data="F1 M 3,0L 6,3L 0,3L 3,0 Z " />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ArrowDown">
            <Grid>
                <Path Margin="5"  VerticalAlignment="Top" HorizontalAlignment="Center" Fill="Black" Data="F1 M 3,3L 0,0L 6,0L 3,3 Z " />
                <TextBlock VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
    </Window.Resources>

ou bien utilizer un conteneur StackPanel au lieu d'un grid:

Code xaml :

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

1
2
3
4
5
6
7
8
 
<Window.Resources>
        <DataTemplate x:Key="ArrowUp">
            <StackPanel>
                <TextBlock VerticalAlignment="Center" Text="{Binding}" />
                <Path VerticalAlignment="Bottom" HorizontalAlignment="Center" Fill="Black" Data="F1 M 3,0L 6,3L 0,3L 3,0 Z " />
            </StackPanel>
        .......

bon code....

**Jayme65** · 30/08/2015, 10h57

Mabrouki,

Merci pour ta réponse!
Utiliser un Stackpanel ne change rien!
Le DataTemplate agit sur le ContentPresenter, c'est ca?
C'est ce qui semble en tout cas, puisque les flêches restent toujours "solidaire" du bloc texte!?
J'ai l'impression que c'est ce ContentPresenter, dans le ControlTemplate auquel je devrais pouvoir dire d'occuper toute la hauteur du parent...mais j'ignore comment faire!

Peux tu me confirmer/infirmer tout cela..et me dire comment spécifier au ContentPresenter d'occuper toute la hauteur du Border parent?

Merci!!

**MABROUKI** · 31/08/2015, 02h24

bonjour
Bah ,tu as des difficulties apparement avec le modele de contenu WPF....
Le contenu du DataTemplate est "injecte tel quel" dans la propriete ContentTemplate du ContentPresenter ...
On peut rien faire au niveau du ContentPresener ...
Pourquoi j'ai dit un StackPanel parce qu'il va empiler le TextBlock et le Path....
Maintenant pour mieux illustrer le propos tu peux conserver ton Grid(du DataTemplate) mais en lui affectant 3 rows don't un row de hauteur convenable....pour obtenir la separation desire ,le Grid etant plus versatile ...qu'un stackpanel ou des margins!!!
code xaml incrimine :

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
 
 <Window.Resources>
        <DataTemplate x:Key="ArrowUp">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition ></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition ></RowDefinition>
                </Grid.RowDefinitions>
                <Path Grid.Row="0"   VerticalAlignment="Bottom" HorizontalAlignment="Center" Fill="Red" Data="F1 M 3,0L 6,3L 0,3L 3,0 Z " />
                <TextBlock  Grid.Row="2"  VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ArrowDown">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition ></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition ></RowDefinition>
                </Grid.RowDefinitions>
                <Path  Grid.Row="2"   Margin="5"  VerticalAlignment="Top" HorizontalAlignment="Center" Fill="Red" Data="F1 M 3,3L 0,0L 6,0L 3,3 Z " />
                <TextBlock Grid.Row="0"  VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
 
    </Window.Resources>

bon code...

**MABROUKI** · 31/08/2015, 02h26

oups !!!
bonjour
Bah ,tu as des difficulties apparement avec le modele de contenu WPF....
Le contenu du DataTemplate est "injecte tel quel" dans la propriete ContentTemplate du ContentPresenter ...
On peut rien faire au niveau du ContentPresener ...
Pourquoi j'ai dit un StackPanel parce qu'il va empiler le TextBlock et le Path....
Maintenant pour mieux illustrer le propos tu peux conserver ton Grid(du DataTemplate) mais en lui affectant 3 rows don't un row de hauteur convenable....pour obtenir la separation desire ,le Grid etant plus versatile ...qu'un stackpanel ou des margins!!!
code xaml incrimine :

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
 <Window.Resources>
        <DataTemplate x:Key="ArrowUp">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition ></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition ></RowDefinition>
                </Grid.RowDefinitions>
                <Path Grid.Row="0"   VerticalAlignment="Bottom" HorizontalAlignment="Center" Fill="Red" Data="F1 M 3,0L 6,3L 0,3L 3,0 Z " />
                <TextBlock  Grid.Row="2"  VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ArrowDown">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition ></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition ></RowDefinition>
                </Grid.RowDefinitions>
                <Path  Grid.Row="2"   Margin="5"  VerticalAlignment="Top" HorizontalAlignment="Center" Fill="Red" Data="F1 M 3,3L 0,0L 6,0L 3,3 Z " />
                <TextBlock Grid.Row="0"  VerticalAlignment="Center" Text="{Binding}" />
            </Grid>
        </DataTemplate>
 
    </Window.Resources>

bon code...

**Jayme65** · 31/08/2015, 10h46

Mabrouki,

Merci pour ta réponse! Mais as tu vérifié ce que cela donne:
Nom : Untitled-1.png
Affichages : 222
Taille : 4,7 Ko

...ce n'est pas tout à fait l'effet escompté ^^

**MABROUKI** · 31/08/2015, 17h37

bonjour
Cela fait exctement l'effet desire ,puisque tu as pose un probleme d'apparence en postant une image......
Maintenant sans rentrer dans des details compliques tu peux utiliser un ToggleButton dans le ControlTemplate du GridViewColumnHeader ....au lieu de 2 datatemplates
Mais un contentpresenter ou un itempresenter ne peuvent etre templates ....!!!

J'espere avoir ete suffisament clair....
bon code...

[WPF] Positionnement des fleches indiquant la direction dans un ListView header

VB.NET

Discussions similaires

Partager

Partager