Question

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

enter image description here

我正在使用ModernUI，默认的条形颜色与我的背景非常相似，我想让它更轻一些。

Answer 1

您应该可以更改它来编辑模板。

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

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

祝你好运！

编辑：
好的，就在这里。

假设您已有ModernUI应用程序，请创建一个名为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" />位代表我的主题。将所有颜色设置为红色，这就是它的样子：

My RED slider

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

编辑：
应用主题时它会发生变化。但是，由于您熟悉样式，我正在发送完整的模板。你可以做的是创建一个只有这个模板的UserDictionary，当你想要使用它时，更改滑块模板属性。您只想更改Thumb标签。 Pastebin code

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

Answer 2

我发现了两种方法：

您可以通过插入相应的画笔来自定义滑块适当的Slider.Resources部分。
您可以添加画笔以使用字典分隔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>

结果你得到以下信息：

result

Answer 3

前景属性用于填补＆＃34;已完成的＆＃34;具有特定颜色的滑块的一部分。（背景是未完成的部分。）

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

Answer 4

您可以使用以下模板：Slider Styles and Templates

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

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

Answer 5

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 6

对于它的价值，我可以在Win10 UWP for Phone上更改Slider Thumb颜色的唯一方法是覆盖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等等。所以，这也是这种方法的缺点。

更改Slider上的Thumb颜色是XAML UWP的一个已知问题点。微软计划在不久的将来使其变得更容易。

更改滑块颜色

6 个答案: