Comment le style de la commande de curseur dans WPF?

Je veux style le curseur de contrôle de sorte que la hauteur de la déplaçable pouce est de 8 pixels.

Quelle est la façon la plus simple de le faire dans WPF?

<Slider>
    <Slider.Style>
        <!-- which xaml here? -->
    </Slider.style>
</Slider>

OriginalL'auteur Sander Versluys | 2008-12-20

  1. 6

    Le Contrôle de Curseur a beaucoup de pièces de Pouce, RepeatButtons et une Piste. Il est l'un de ces contrôles qui ont nommé les éléments, comme la PART_Track, référencé par le code-behind pour qu'il fonctionne correctement. Un bon point de départ est d'utiliser le Mélange pour vous aider.

    Démarrer un nouveau projet (ou créez-en une nouvelle fenêtre). Dans le code XAML de la fenêtre ajouter les éléments suivants:

    <ScrollBar/>

    Puis dans la fenêtre de conception de Mélange cliquez-droit sur le champ et sélectionnez l'option "Modifier les pièces de contrôle (Modèle)\Modifier une Copie...". Cela permettra d'inverser la norme de contrôle de modèle. Cela peut ensuite être édité.

    Le Mélange de sortie est: est-ce-

        <LinearGradientBrush x:Key="VerticalScrollBarPageButtonNormal" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="VerticalScrollBarPageButtonPressed" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#D7D5C2" Offset="0"/>
<GradientStop Color="#D7D5C2" Offset="0.05"/>
<GradientStop Color="#E3DED3" Offset="0.06"/>
<GradientStop Color="#FDFDF6" Offset="0.94"/>
<GradientStop Color="#D7D5C2" Offset="0.95"/>
<GradientStop Color="#D7D5C2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="VerticalScrollBarPageButtonDisabled" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonDisabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonNormal" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonPressed" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#D7D5C2" Offset="0"/>
<GradientStop Color="#D7D5C2" Offset="0.05"/>
<GradientStop Color="#E3DED3" Offset="0.06"/>
<GradientStop Color="#FDFDF6" Offset="0.94"/>
<GradientStop Color="#D7D5C2" Offset="0.95"/>
<GradientStop Color="#D7D5C2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonDisabled" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonDisabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource VerticalScrollBarPageButtonNormal}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
</Grid.RowDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineUpCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>
<Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineDownCommand}" Grid.Row="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Background" Value="{StaticResource HorizontalScrollBarPageButtonNormal}"/>
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
</Grid.ColumnDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
<Track x:Name="PART_Track" Grid.Column="1">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineRightCommand}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

    L'espace de noms utilisé pour cet été ce (à ajouter dans le haut du fichier):-

      xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"

    Vous pouvez évidemment modifier le style générée au contenu de votre coeur

    Vous devez soit par programmation de trouver la barre de défilement incorporée dans le contrôle ou d'appliquer le style à toutes les barres de défilement dans le champ d'application en modifiant la définition de style, de sorte que:-

      <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
...
</Style>

    devient

      <Style TargetType="{x:Type ScrollBar}">
...
</Style>

    De sorte qu'il sera appliqué à toutes les barres de défilement dans la région définie par le style.

    Je veux utiliser un mélange, mais je n'ai pas de licence,: - ( (dépend de mon boss)
    Vous pouvez également utiliser Kaxaml (kaxaml.com) pour travailler sur des styles parfois. Il contient des extraits de code de remplir les styles pour de nombreux contrôles.
    Peut-être digne d'ajouter, que pour l'effet désiré le plus important est le Style pour le Pouce. Il pourrait juste ajouter ce qui suit à son Curseur: <Curseur> <Curseur.Ressources> <Style TargetType="{x:Type Pouce}"> <Setter Property="Hauteur" Value="8"/> </Style> </Curseur.Ressources> .. réels curseur de contenu .. </Curseur>
    D.: Cela ne semble pas fonctionner. Il n'a tout simplement rien.
    Oups, vous avez raison. Semble ne pas fonctionner avec la valeur par défaut du curseur de style. J'ai un échantillon de travail ici, mais c'est trop long à coller en commentaire.

    OriginalL'auteur Rhys

  2. 5

    Vous pouvez également jeter un oeil à snoop et style détecte

    OriginalL'auteur bendewey

  3. 4

    Vous aurez à créer un modèle de contrôle de relooker la partie du contrôle que vous voulez.

    Jetez un oeil à cette Article MSDN et cette article qui devrait vous aider.

    OriginalL'auteur John

  4. 2

    Un bel article MSDN donnant le contrôle de modèles pour tous les contrôles WPF est disponible ici:

    http://msdn.microsoft.com/en-us/library/aa970773.aspx

    Garder à l'esprit que ces modèles de contrôle de générer le même contrôle visuellement (c'est à dire: ce sont les modèles de contrôle WPF utilise). Mais c'est un bon point de départ pour la personnalisation de votre contrôle Visuel des Arbres.

    OriginalL'auteur Tal Even-Tov

  5. 1

    Voici une façon simple et rapide: 

    <Slider ...>
<Slider.LayoutTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
</Slider.LayoutTransform>
</Slider>

    Ce n'est pas EXACTEMENT 8 pixels, mais vous pouvez jouer un peu avec la propriété ScaleY jusqu'à obtenir la taille que vous voulez.

    OriginalL'auteur Uri Abramson

  6. 0

    Juste une preuve de concept que vous pouvez également le style unique de pièces de contrôles composites, comme le Curseur:
    Mais attention, le choix des couleurs est plutôt aléatoire, donc ça va être moche.
    Malheureusement, le Pouce de Style n'a pas d'effet si vous laissez de côté le style personnalisé pour le curseur.

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Slider}">
<Setter Property="Background" Value="Green"/>
<Setter Property="BorderBrush" Value="Navy"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid x:Name="GridRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- TickBar shows the ticks for Slider -->
<TickBar x:Name="TopTick" Height="4" Fill="Blue" Placement="Top" SnapsToDevicePixels="True" Visibility="Collapsed"/>
<Border x:Name="Border" Height="4" Grid.Row="1" Margin="0" Background="Blue" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
<!-- The Track lays out the repeat buttons and thumb -->
<Track x:Name="PART_Track" Grid.Row="1">
<Track.Thumb>
<Thumb MinWidth="15" MinHeight="30"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick" Height="4" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" SnapsToDevicePixels="True" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Slider Maximum="100" Minimum="0">
<Slider.Resources>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Height" Value="80"/>
</Style>
</Slider.Resources>
</Slider>
</Grid>
</Page>

    OriginalL'auteur Simon D.