更改滑块颜色

Question

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

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

Answer 1

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

右键单击滑块,编辑模板 - >编辑复制.

将出现一个新窗口,询问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" />位代表我的主题.将所有颜色设置为红色,这就是它的样子:

我想这更清楚了!希望你喜欢.

编辑:
当你应用你的主题时它会改变.但是,由于您熟悉样式,我正在发送完整的模板.你可以做的是创建一个只有这个模板的UserDictionary,当你想要使用它时,更改滑块模板属性.您只想更改Thumb标签.粘贴代码

如果你只想改变这个,那么把模板放在之间<Windows.Resources>或<Slider.Resources>- 另一个选择就是创建你自己的控件

Answer 2

我发现了两种方法:

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>

结果你得到以下: