更改滑块颜色

Question

这应该很容易做到，但我还没有找到我需要的信息。我想要的就像改变滑块的颜色一样简单：

我使用的是 ModernUI，默认条形颜色与我的背景非常相似，我想让它变亮一点。

Answer 1

Foreground 属性用于用特定颜色填充滑块的“已完成”部分。 （背景是未完成的部分。）

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

Answer 2

对于它的价值，我可以在 Win10 UWP for Phone 上更改滑块拇指颜色的唯一方法是覆盖系统前景画笔。 （您显然也可以完全重新模板化整个 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 等）覆盖前景色的地方。所以，这也是这种方法的缺点。

更改滑块上的拇指颜色是 XAML UWP 的一个已知问题点。 Microsoft 计划在不久的将来使其变得更容易。

Answer 3

Windows 8.1 商店/电话应用程序。

将此添加到 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 4

这里有你应该使用的模板：Slider Styles and Templates

您要编辑的属性是 TrackBackground.BackGround。

如果您为此控件模板定义样式并将其放在您的 app.xaml 或 window.resources 或任何其他文件中，只要您给它一个键，您就可以在特定的滑块中使用它该滑块的“样式”属性使用相同的键。

Answer 5

我找到了两种方法：

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 6

您应该能够通过编辑模板来更改它。

右键单击您的滑块，编辑模板 -> 编辑副本。;.

将出现一个新窗口，询问您 VS 应将 ControlTemplate 和样式的 XAML 代码放在哪里。检查标签等。

祝你好运！

编辑：
好的，就这样吧。

假设你已经有一个ModernUI App，新建一个文件夹Assets，右键Add -> New Item... -> ModernUI Theme。随便叫什么。

在新创建的 XAML 文件中，将这些 SolidColorBrush 插入到 AccentColor Color 标签下：

<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" /> 位代表我的主题。 将所有颜色设置为红色，这就是它的样子：

我想这更清楚！ 希望你喜欢。

编辑：
当您应用主题时，它会改变。但是，由于您熟悉样式，我将发送完整的模板。您可以做的是仅使用此模板创建一个 UserDictionary，当您想使用它时，更改滑块模板属性。您只想更改拇指标签。 Pastebin code

如果您只想更改这个，请将模板放在 <Windows.Resources> 或 <Slider.Resources> 之间 - 另一种选择是创建您自己的控件