Cómo el estilo del control deslizante en WPF?

Question

Quiero estilizar el control deslizante de modo que la altura del dedo pulgar arrastrable está ajustado a 8 píxeles.

¿Cuál es la forma más sencilla de hacer esto en WPF ?

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

Answer 1

el control deslizante tiene muchas partes del pulgar, RepeatButtons y una pista. Es uno de los controles que han nombrado elementos, como PART_Track, referenciados por el código subyacente para que funcione correctamente. Un buen punto de partida es el uso de Mezcla para ayudarle a salir.

Iniciar un nuevo proyecto (o crear una nueva ventana). En la ventana XAML agregar lo siguiente:

<ScrollBar/>

A continuación, en la ventana de diseño de la mezcla haga clic derecho en el control y seleccione "Editar partes de control (plantilla) \ Editar una copia ...". Esto ingeniería inversa a la plantilla de control estándar. Esto se puede editar.

La salida de mezcla es la siguiente: -

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

El espacio de nombres utilizado para esto era esto (añadir a la parte superior de archivo): -

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

A continuación, puede alterar el estilo obviamente generada al contenido de su corazón

Usted tendría que encontrar ya sea mediante programación la barra de desplazamiento integrado en el control o aplicar el estilo a todas las barras de desplazamiento en el alcance mediante la alteración de la definición de estilo, así que: -

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

se convierte

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

Para que se aplicará a todas las barras de desplazamiento en la región definida por el estilo.

Answer 2

También puede ser que desee echar un vistazo a Snoop y estilo snooper

Answer 3

Usted tendrá que crear una plantilla de control para cambiar el estilo de la parte del control que desee.

Tener un vistazo a este artículo MSDN y este artículo que debería ayudarle.

Answer 4

Un artículo de MSDN agradable dando plantillas de control para todos los controles de WPF está disponible aquí:

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

Tenga en cuenta que estas plantillas de control generan el mismo control visual (es decir .: éstas son las plantillas de control que utiliza WPF). Pero es un buen punto de partida para todos los árboles Visuales sus controles.

Answer 5

Aquí está una manera simple y rápida:

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

Esto no es exactamente 8 píxeles, pero se puede jugar un poco con la propiedad ScaleY hasta obtener el tamaño deseado.

Answer 6

Sólo una prueba de concepto que pueda también partes individuales de estilo de controles compuestos como el deslizador: Pero cuidado, la elección de los colores era bastante aleatoria, por lo que esto va a ser feo. Por desgracia, el pulgar-Style no tiene un efecto si dejar de lado el estilo personalizado para la corredera.

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