logo标签列表

更改滑动条颜色

c#wpfslider
7
很容易做到这一点，但我没有找到需要的信息。 我想要的就是改变滑动条的颜色，这很简单：
我正在使用现代UI， 默认的条形颜色与我的背景非常相似，我想让它更浅一些。
6个回答
10

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

右键单击 Slider，选择“编辑模板”-> “编辑副本”。

会弹出一个新窗口询问您在哪里放置 ControlTemplate 和 Styles 的 XAML 代码。检查标记和类似的标签。

祝好运！

编辑：
好的，现在开始。

假设您已经拥有了 ModernUI 应用程序，在其中创建一个名为 Assets 的新文件夹，右键单击它并选择添加->新项目...->ModernUI 主题。将其命名为您喜欢的任何名称。

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

<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，当你想使用它时，更改滑块Template属性。你只需要更改Thumb标记。Pastebin code 如果你只想更改这个，请将模板放在<Windows.Resources>或<Slider.Resources>之间 - 另一个选项是创建自己的控件。
1
谢谢，但这样会改变所有滑块的默认颜色吗？我只需要更改这个滑块。通常我会为我的控件创建一个新的样式，在这种情况下设置BasedOn属性引用该控件的ModernUI样式。但是我不知道如何为滑块做到这一点，这就是我所问的。无论如何，谢谢。 - Sturm
1
我认为这不符合社区维基的标准。这值得加分。+1 - Jeremy Thompson
我将其设置为维基，以防其他人有其他想法！ - trinaldi
9
我找到了两种方法：

  1. 你可以通过在适当的 Slider.Resources 部分插入相应的 brush 来自定义你的滑块。

  2. 你可以将 brush 添加到一个带有字典的单独的 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

是的，就像我上面说的一样！有很多种方法！ - trinaldi
3

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

<Slider Value="40" Maximum="100" Foreground="Red" />
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上的此链接：滑块样式和模板。

1
就我所知，在Win10 UWP手机上更改滑块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的添加是真正重要的事情。这是我们覆盖所有常见元素（如复选框、ContentDialog、ProgressRing等）的前景颜色的地方......所以，这也是这种方法的缺点。
更改滑块上的Thumb颜色是XAML UWP中已知的问题点。微软计划在不久的将来使其更容易。
1
这里有您应该使用的模板：滑块样式和模板 您要编辑的属性是TrackBackground.BackGround。
如果您为此控件模板定义了一个样式，并将其放置在app.xaml、window.resources或任何其他文件中，只要给它一个键，您就可以通过特定滑块的“Style”属性来使用它，使用相同的键。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接