Изменить цвет ползунка

Question

Это должно быть очень легко сделать, но у меня нет данных, которые мне нужны. Я хочу, чтобы так просто, как изменить цвет ползунка:

Я использую ModernUI и бар по умолчанию цвет по очень похож на мой фон, и я хочу, чтобы сделать его немного легче.

Answer 1

Я нашел два подхода:

1. Вы можете настроить ваш ползунок, вставляя соответствующие щетки в подходящий раздел Slider.Resources.

2. Вы можете добавить кисти, чтобы отделить файл xaml со словарем, а затем объединить его с соответствующим слайдером в Slider.Resources. В некоторых случаях он подходит лучше, потому что вы можете сразу менять цвета нескольких элементов управления.

Людям не нужно менять шаблон управления.

Оба подхода представлены ниже:

Page1.xaml

<Grid Style="{StaticResource ContentRoot}"> 

    <StackPanel> 

     <!-- Slider with default theme and colors from ModernUI --> 
     <Slider/> 

     <!-- Slider with custom colors from approach 1 --> 
     <Slider> 
      <Slider.Resources> 
       <SolidColorBrush x:Key="SliderSelectionBackground" Color="Green" /> 
       <SolidColorBrush x:Key="SliderSelectionBorder" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBackground" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBorder" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Green" /> 
       <SolidColorBrush x:Key="SliderThumbBorderHover" Color="Green" /> 
      </Slider.Resources> 
     </Slider> 

     <!-- Slider with custom colors from approach 2 --> 
     <Slider> 
      <Slider.Resources> 
       <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
         <ResourceDictionary Source="Dictionary1.xaml"/> 
        </ResourceDictionary.MergedDictionaries> 
       </ResourceDictionary> 
      </Slider.Resources> 
     </Slider> 

    </StackPanel> 

</Grid> 

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

<SolidColorBrush x:Key="SliderSelectionBackground" Color="Blue" /> 
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBackground" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBorder" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Blue" /> 
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Blue" /> 

</ResourceDictionary> 

В результате вы получите следующее:

Answer 2

Вы должны изменить это изменение шаблона.

Щелкните правой кнопкой мыши ваш слайдер, измените шаблон -> Изменить копию.;.

Появится новое окно с вопросом, где VS должен поместить код XAML для ControlTemplate и стилей. Чек теги и т. Д.

Удачи вам!

Редактировать:
Хорошо, вот оно.

Предполагая, что у вас уже есть приложение ModernUI, создайте новую папку под названием Assets, щелкните ее правой кнопкой мыши Add -> New Item... -> ModernUI Theme. Назовите это, как вам нравится.

Внутри вновь созданного файла XAML вставить эти SolidColorBrush под AccentColorColor тег:

<SolidColorBrush x:Key="SliderSelectionBackground" Color="Red" /> 
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBackground" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBorder" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Red" /> 
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Red" /> 

Каждый из них представляет собой состояние Thumb (ползунок «прямоугольник»). После этого откройте файл App.xaml и включить вашу тему там (это то, что мой файл выглядит следующим образом):

<Application x:Class="ModernUIApp1.App" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" /> 
       <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/> 
       <ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" /> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

<ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" /> бит представляет мою тему. Установка все цвета на красный, это то, что это выглядело как:

Я думаю, что это более ясно! Надеюсь, вам понравится.

EDIT:
Это изменится при применении вашей темы. Но, поскольку вы знакомы со стилями, я отправляю полный шаблон. Что вы можете сделать, так это создать UserDictionary только с этим шаблоном, и когда вы хотите его использовать, измените свойство Slider Template. Вы захотите изменить только теги Thumb. Pastebin code

И если вы хотите изменить только это поставить шаблон между <Windows.Resources> или <Slider.Resources> - Другим вариантом было бы создать свой собственный контроль

Answer 3

Здесь у вас есть шаблоны, вы должны использовать: Slider Styles and Templates

Вы хотите редактировать одно и TrackBackground.BackGround.

Если вы определяете стиль для этого шаблона управления и помещаете его либо в приложение app.xaml, либо в window.resources или в любой другой файл, если вы даете ему ключ, вы можете использовать его в определенном слайдере через свойство «Стиль» этого слайдера, используя тот же ключ.

Answer 4

Windows 8.1 Store/Phone Apps.

Добавьте к этому App.xaml и изменить значение цвета по своему вкусу:

<ResourceDictionary> 
     <ResourceDictionary.ThemeDictionaries>     
      <ResourceDictionary x:Key="Default">      
       <SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FFFF0000" /> 
       <SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF00FF00" /> 
       <SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF0000FF" /> 
      </ResourceDictionary> 
      <ResourceDictionary x:Key="Light"> 

      </ResourceDictionary> 
      <ResourceDictionary x:Key="HighContrastBlack"> 

      </ResourceDictionary> 
      <ResourceDictionary x:Key="HighContrastWhite"> 

      </ResourceDictionary> 
     </ResourceDictionary.ThemeDictionaries> 
    </ResourceDictionary> 

Вы, вероятно, хотите изменить только ползунок темы по умолчанию и, вероятно, только в трех цветовых значениях, показанную выше. Для всех цветов/ресурсов, которые вы можете изменить, см. Эту ссылку в MSDN: Slider styles and templates.

Answer 5

Для чего это стоит, единственный способ изменить цвет слайдера на Win10 UWP для телефона - это перезаписать кисть System Foreground. (Вы можете также, по-видимому полностью повторно-шаблон весь Slider)

Итак, я положил в мой App.xaml

<Application 
x:Class="App1.App" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App1" 
RequestedTheme="Dark"> 

<Application.Resources> 
    <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="White" /> 
</Application.Resources> 

</Application> 

Добавка к Application.Resources это действительно важная вещь здесь. Здесь мы переписываем цвет переднего плана для ВСЕХ общих элементов, таких как Checkbox, ContentDialog, ProgressRing и т. Д. Итак, это и недостаток этого метода.

Изменение цвета Thumb на слайдере является известной проблемой для XAML UWP. Microsoft планирует в ближайшем будущем сделать это проще.

Answer 6

Необычное, переднее свойство используется для заполнения «завершенной» части ползунка определенного цвета. (Предположим, что незавершенная часть.)

<Slider Value="40" Maximum="100" Foreground="Red" />