Как стилизовать ползунок в WPF?

Я хочу настроить ползунок таким образом, чтобы высота перетаскиваемого ползунка была установлена на 8 пикселей.

Как проще всего это сделать в WPF?

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

wpf xaml slider styling

20.12.2008 15:14

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

33 759

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Вам нужно будет создать шаблон элемента управления, чтобы изменить стиль той части элемента управления, которую вы хотите.

Прочтите статьи о Статья MSDN и это, которые должны вам помочь.

20.12.2008 20:04

Вы также можете взглянуть на шпионить и снупер стиля

21.12.2008 06:29

Ответ принят как подходящий

Ползунок управления состоит из множества частей: Thumb, RepeatButtons и Track. Это один из тех элементов управления, у которых есть именованные элементы, такие как PART_Track, на которые ссылается код программной части для правильной работы. Хорошей отправной точкой является использование Blend, чтобы помочь вам.

Начать новый проект (или создать новое окно). В окне XAML добавьте следующее:

<ScrollBar/>

Затем в окне дизайна Blend щелкните правой кнопкой мыши элемент управления и выберите «Редактировать элементы управления (шаблон) \ Редактировать копию ...». Это перепроектирует стандартный шаблон управления. Затем это можно отредактировать.

Результат Blend следующий: -

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

Для этого использовалось следующее пространство имен (добавить в начало файла): -

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

Затем вы, очевидно, можете изменить сгенерированный стиль по своему усмотрению.

Вам нужно будет либо программно найти полосу прокрутки, встроенную в элемент управления, либо применить стиль ко всем полосам прокрутки в области, изменив определение стиля, поэтому: -

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

становится

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

Так что он будет применен ко всем полосам прокрутки в области, определенной стилем.

Я хочу использовать смесь, но у меня нет лицензии :-( (зависит от моего начальника)

— 23.12.2008 02:26

@Sander: Вы также можете иногда использовать Kaxaml (kaxaml.com) для разработки стилей. Он содержит фрагменты кода полных стилей для многих основных элементов управления.

— 30.07.2009 22:36

Стоит добавить, что для достижения желаемого эффекта наиболее актуальным является стиль для большого пальца. Он мог просто добавить в свой слайдер следующее: <Slider> <Slider.Resources> <Style TargetType = "{x: Type Thumb}"> <Setter Property = "Height" Value = "8" /> </Style> < /Slider.Resources> .. актуальное содержимое слайдера .. </Slider>

— 09.06.2010 21:27

Ой, ты прав. Кажется, не получится со стилем слайдера по умолчанию. У меня есть рабочий образец, но он слишком длинный, чтобы вставлять его в комментарий.

— 27.08.2011 10:15

@Rikka: В качестве ответа добавил рабочий образец. Спасибо за указание на это.

— 27.08.2011 10:23

22.12.2008 23:26

Хорошая статья MSDN с шаблонами элементов управления для всех элементов управления WPF доступна здесь:

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

Имейте в виду, что эти шаблоны элементов управления создают один и тот же элемент управления визуально (т. Е .: это шаблоны элементов управления, которые использует WPF). Но это хорошая отправная точка для настройки визуальных деревьев элементов управления.

15.01.2009 14:10

Просто доказательство того, что вы также можете стилизовать отдельные части составных элементов управления, таких как Slider: Но будьте осторожны, выбор цветов был довольно случайным, так что это будет некрасиво. К сожалению, Thumb-Style не действует, если вы не укажете пользовательский стиль для ползунка.

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

27.08.2011 10:21

Вот простой и быстрый способ:

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

Это НЕ ТОЧНО 8 пикселей, но вы можете немного поиграть со свойством ScaleY, пока не получите желаемый размер.

09.01.2014 17:05