UWP 更改已禁用滑块的颜色设置答案

【问题标题】：UWP Change color settings of Disabled sliderUWP 更改已禁用滑块的颜色设置
【发布时间】：2016-04-18 13:59:51
【问题描述】：

我需要更改禁用滑块的颜色设置。这样做应该很容易，但我不知道如何在 Win10 的 UWP 应用程序中做到这一点。

我尝试了这个问题中描述的所有方法：Change slider bar color，但它仍然不起作用。

【问题讨论】：

标签： win-universal-app

【解决方案1】：

正如stamos所说，你可以用Blend来做，也可以只修改XAML设计中Slider的模板。

为此，您可以打开文档大纲，选择您的Slider 并右键单击它，然后编辑模板，然后编辑副本，如下图所示：

现在在默认样式下，你可以找到禁用的视觉状态，你可以将里面的ObjectAnimationUsingKeyFrames修改成你想要的样式。

例如，您可以在禁用时更改水平silder，如下所示：

<VisualState x:Name="Disabled">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalTrackRect">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalDecreaseRect">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalTrackRect">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="VerticalThumb">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="TopTickBar">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BottomTickBar">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="LeftTickBar">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RightTickBar">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

修改控件的默认模板很容易，或者用blend来做这个工作也很方便，你可以选择一种方法来完成这个工作。

【讨论】：

【解决方案2】：

找出默认模板的颜色here 并通过以下格式将覆盖颜色添加到 App.xml 中的 ResourceDictionary 中：

<ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <SolidColorBrush x:Key="name of the key" Color="#7FF1F1F1" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>

【讨论】：

【解决方案3】：

最简单的方法是使用混合。

右键单击 VS ex MainPage.xaml 中的文件，然后单击“使用 Blend 设计”。
在对象和时间轴上右键单击滑块并选择编辑模板>编辑副本>确定（或者您可以更改它的位置已保存）。
现在您处于模板设计中。点击状态（在对象和时间线上方）
选择禁用。
现在您处于录制模式，会出现一个红点。
在录制模式下选择幻灯片的元素并更改它们颜色。（HorizontalThumb、VerticalThumb、HorizontalTrackRect 等...）
完成，测试一下。

【讨论】：

【解决方案4】：

根据MSDN，以下是Slider 的已禁用 VisualState，其中包含您需要使用的命名画笔。

 <VisualState x:Name="Disabled">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
                                       Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                       Storyboard.TargetProperty="Background">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                       Storyboard.TargetProperty="Background">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar"
                                       Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
</VisualState>

在你的ResourceDisctionary中，你可以定义

<SolidColorBrush x:Key="SystemControlDisabledChromeDisabledHighBrush">#0000FF</SolidColorBrush>

在 App.xaml 中添加 ResourceDictionary

<Application
 ... >

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ms-appx:///Resources/Brushes.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

结果看起来像这样

【讨论】：