Discussion :

[Tanou]

Bonjour à tous,

Aujourd'hui j'aimerais donner un nouveau look à une de mes applications wpf.
N'étant pas un designer de qualité je me suis beaucoup inspiré de Zune et jusqu'à présent le résultat est nettement meilleur .

J'ai une Listview/Gridview dans mon application et je voudrais lui donner une apparence dans le même style que ceci.

Pensez-vous que je puisse le faire uniquement en stylisant ma listview (si oui comment) ou bien en créant un contrôle

Merci d'avance

[koyot3]

Salut Tanou,

Je pense que tu dois pouvoir faire un truc qui ressemble en créant un style pour ta listview : tu joues sur les couleurs de sélection, les bordures des colonnes et ça devrait le faire
Pour le faire, tu peux chercher sur google des exemples sur google et t'en servir comme base.
lien 1
lien 2
lien 3
[...]

Après je te recommande vivement d'utiliser Blend comme outil car c'est plus intuitif que sous Visual Studio ; tu trouveras ici des tutoriaux pour le prendre en main...

Bon courage !

@+

[Tanou]

Salut Koyote,

Merci pour ta réponse, j'ai essayé de modifier uniquement le style et je suis confronté à un problème.

Mon GridViewHeader fait toute la taille de ma GridView (pour avoir les thumbs de haut en bas), donc j'ai quelque chose de transparent par dessus mes objets et je ne peux plus les sélectionnés.
J'avais déjà eu une problématique du même genre avec des superpositions d'objets et de propagation d’événements, j'avais trouvé comme astuce de mettre le background à Null et non à transparent, malheureusement pour ce cas cela ne marche pas.

Voici mon style actuel

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
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
 
<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
        <Setter Property="Width" Value="18" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Background="Transparent">
                        <Rectangle HorizontalAlignment="Center" Width="1" Fill="Black" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewColumnHeader">
                    <Grid Background="{x:Null}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="HeaderContent" Margin="0,0,0,1" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <Thumb Grid.RowSpan="2" x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource GridViewColumnHeaderGripper}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}"
       TargetType="ScrollViewer">
                <Setter Property="Background" Value="{x:Null}"/>
                    <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="ScrollViewer">
                        <Grid Background="{x:Null}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
 
                            <Grid  Margin="{TemplateBinding Padding}">
                                    <ScrollContentPresenter Name="PART_ScrollContentPresenter" KeyboardNavigation.DirectionalNavigation="Local" CanContentScroll="True" CanHorizontallyScroll="False" CanVerticallyScroll="False" />
                                    <ScrollViewer MouseMove="ScrollViewer_MouseMove"  OverridesDefaultStyle="True" Background="{x:Null}" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
 
                                            <GridViewHeaderRowPresenter Margin="2,0,2,0" Focusable="False"
                                        Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderTemplateSelector="{Binding  Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                        AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </ScrollViewer>
 
                                </Grid>
                        <ScrollBar Name="PART_HorizontalScrollBar"
                     Orientation="Horizontal"
                     Grid.Row="1"
                     Maximum="{TemplateBinding ScrollableWidth}"
                     ViewportSize="{TemplateBinding ViewportWidth}"
                     Value="{TemplateBinding HorizontalOffset}"
                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
 
                            <ScrollBar Name="PART_VerticalScrollBar"
                     Grid.Column="1"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Value="{TemplateBinding VerticalOffset}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
 
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            </Style>
            <Style TargetType="{x:Type ListView}">
        		<Setter Property="Background" Value="{x:Null}"/>
        		<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
        		<Setter Property="BorderThickness" Value="1"/>
        		<Setter Property="Foreground" Value="#FF042271"/>
        		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        		<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        		<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        		<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        		<Setter Property="VerticalContentAlignment" Value="Center"/>
        		<Setter Property="Template">
        			<Setter.Value>
        				<ControlTemplate TargetType="{x:Type ListView}">
                            <ScrollViewer Background="{x:Null}" OverridesDefaultStyle="True"  Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}" Margin="0,0,4,4">
        						<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        					</ScrollViewer>
        					<ControlTemplate.Triggers>
        						<Trigger Property="IsGrouping" Value="true">
        							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
        						</Trigger>
        						<Trigger Property="IsEnabled" Value="false"/>
        					</ControlTemplate.Triggers>
        				</ControlTemplate>
        			</Setter.Value>
        		</Setter>
        	</Style>

Suis-je sur la bonne voie ?

Merci d'avance

Jérôme

[koyot3]

Salut Tanou,

J'ai pas de Visual Studio sous la main, pourrais-tu faire une capture d'écran de ce que tu obtiens afin que je me rende compte du soucis et aussi montrer un peu de ton code pour la création de ta gridview (voir comment tu définis ton header).

Merci

[Tanou]

Voici l'affichage actuel (il manque une petite marge sur le presenter de données)

Sinon pour la création de la listview je ne fait rien de spécial :

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
<ListView  ItemsSource="{Binding Films}" SelectedItem="{Binding FilmSelectionne}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Titre" DisplayMemberBinding="{Binding Title}"></GridViewColumn>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Title}"></GridViewColumn>
                    <GridViewColumn Header="Titre" DisplayMemberBinding="{Binding Title}"></GridViewColumn>
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Title}"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

[koyot3]

Re Jérôme,

En fait j'ai pas trop compris ce que tu cherchais à faire dans ton style GridViewScrollViewer. (redéfinir le style des scrollbars verticale et horizontale ?)
Tu parles d'avoir le GridViewHeader qui fait toute la hauteur de ta GridView (qui donc passe dessus les items)...

Ton soucis vient de là car ton ScrollContentPresenter, ton ScrollViewer et ton GridViewHeaderRowPresenter se superposent, c'est pour ça que ton contenu est masqué par les Header.

En remplacant par

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
<Grid  Margin="{TemplateBinding Padding}" Grid.Row="0">
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Margin="2,0,2,0" Focusable="False"
		[...]/>
<ScrollContentPresenter Name="PART_ScrollContentPresenter" KeyboardNavigation.DirectionalNavigation="Local" CanContentScroll="True" CanHorizontallyScroll="False" CanVerticallyScroll="False" />
</StackPanel>
 
<!--<ScrollViewer  OverridesDefaultStyle="True"  HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" >	   
</ScrollViewer>-->
 
</Grid>

tu n'as plus ton soucis... Mais bon c'est ptete pas le résultat attendu

Blend va être ton ami je pense pour tes styles...

Bon courage