7

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

在此处输入图像描述

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

4

6 回答 6

10

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

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

将出现一个新窗口，询问您 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" />主题。将所有颜色设置为红色，这就是它的样子：

我的 RED 滑块

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

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

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

于 2013-10-01T19:11:08.570 回答
9

我找到了两种方法：

  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>

结果，您得到以下信息：

结果

于 2013-10-09T14:53:02.957 回答
3

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

<Slider Value="40" Maximum="100" Foreground="Red" />
于 2016-10-12T23:32:38.930 回答
1

在这里你有你应该使用的模板：滑块样式和模板

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

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

于 2013-10-10T17:18:32.500 回答
1

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 上的此链接：滑块样式和模板。

于 2015-06-27T12:39:33.557 回答
1

对于它的价值，我可以在 Win10 UWP for Phone 上更改 Slider Thumb 颜色的唯一方法是覆盖系统前景画笔。（您显然也可以完全重新模板化整个 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 的一个已知问题点。微软计划在不久的将来让它变得更容易。

于 2016-02-18T19:13:24.650 回答