Discussion :

[Takumi]

Bonjour,

J'ai un petit problème en essayant de personnaliser mes scrollbar de mon application. Je voulais pouvoir changer complétement leurs apparence notamment pour les ScrollViewer alors pour cela je pensais changer son ControlTemplate. Je me suis donc dirigé sur la documentation de msdn pour voir comment changer celui d'une scrollbar et je suis tombé donc sur ce lien:

http://msdn.microsoft.com/fr-fr/library/ms742173.aspx

J'ai donc essayé de reproduire la même chose avec succès à un détail près. Maintenant quand j'essais de définir la largeur ou hauteur (tout dépend si elle est horizontale ou verticale) des scrollbar cela ne change rien. Elle garde toujours la même taille. Voici déjà le code que j'ai pour le moment:

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
<ControlTemplate x:Key="HorizontalScrollbarTemplate" TargetType="{x:Type ScrollBar}">
        <Border Background="{StaticResource HorizontalScrollbarBackgroundColor}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="20"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition MaxWidth="20"></ColumnDefinition>
                </Grid.ColumnDefinitions>
 
                <RepeatButton Grid.Column="0" Style="{StaticResource ScrollbarButtonStyle}"
                              Command="ScrollBar.LineLeftCommand" Content="M 0,8 L 8,8 L 4,0 Z" />
                <Track Name="PART_Track" Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}" Command="ScrollBar.PageLeftCommand"/>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource ScrollbarSliderStyle}"></Thumb>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource ScrollBarPageButtonStyle}" Command="ScrollBar.PageRightCommand"/>
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Grid.Column="2" Style="{StaticResource ScrollbarButtonStyle}"
                              Command="ScrollBar.LineRightCommand" Content="M 0,0 L 8,0 L 4,8 Z" />
            </Grid>
        </Border>
    </ControlTemplate>

Et là voici les styles utilisés dans le ControlTemplate de la scrollbar:

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
 
<Style x:Key="ScrollbarButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="{StaticResource ScrollButtonColor}" BorderThickness="0">
                        <Path HorizontalAlignment="Center" VerticalAlignment="Center" 
                              Fill="{StaticResource ScrollArrowColor}" 
                              Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"></Path>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" BorderThickness="0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
<Style x:Key="ScrollbarSliderStyle" TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="8"
                            Background="{StaticResource ScrollbarSliderColor}"
                            BorderBrush="{StaticResource GrayBorderColor}" BorderThickness="1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Et là le ControlTemplate de mon ScrollViewer où sont utilisé les scrollbar:

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
<ControlTemplate x:Key="PlaylistScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
 
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
 
            <ScrollContentPresenter Grid.Column="0"/>
 
            <ScrollBar Grid.Column="1" Grid.Row="0" Orientation="Vertical"
                       Template="{StaticResource VerticalScrollbarTemplate}"
                       ViewportSize="{TemplateBinding ViewportHeight}"
                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
 
            <ScrollBar Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
                       Template="{StaticResource HorizontalScrollbarTemplate}"
                       ViewportSize="{TemplateBinding ViewportWidth}"
                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
        </Grid>
    </ControlTemplate>

La solution que j'ai trouvé pour vraiment définir la taille est de donner une largeur(ou hauteur) directement au Border dans le ControlTemplate de la scrollbar:

Code :

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

1
2
3
4
5
6
 
<ControlTemplate x:Key="VerticalScrollbarTemplate" TargetType="{x:Type ScrollBar}">
        <Border Background="{StaticResource VerticalScrollbarBackgroundColor}" Width="14">
         <!-- Reste du template-->
        </border>
</ControlTemplate>

Hors je trouve pas cela particulièrement pratique, surtout que l'exemple donné sur msdn pour définir la taille selon la valeur de la propriété orientation me conviendrait. Mais cela ne marche pas. Donc si quelqu'un a une idée du pourquoi du comment cela ne fonctionne, je le remercie grandement.

Merci d'avance pour votre aide.

[binoo]

Salut,

Essaies d'utiliser {TemplateBinding Width} dans le ControlTemplate :

Code xml :

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

1
2
3
4
5
<ControlTemplate x:Key="VerticalScrollbarTemplate" TargetType="{x:Type ScrollBar}">
        <Border Background="{StaticResource VerticalScrollbarBackgroundColor}" Width="{TemplateBinding Width}">
         <!-- Reste du template-->
        </border>
</ControlTemplate>