【问题标题】:How to change a WinRT ToggleSwitch color?如何更改 WinRT ToggleSwitch 颜色?
【发布时间】:2012-11-17 19:13:37
【问题描述】:

我正在用 C# 编写一个 Windows 8 WinRT 应用程序,并且想动态更改我的 ToggleSwitch 的颜色。我将有这些实例的多个实例,它们不会都有相同的颜色。

我尝试创建一个继承自ToggleSwitch 的自定义控件,但我很快了解到我不能这样做,因为ToggleSwitchsealed 类。我的目标是添加一个Brush 类型的DependencyProperty,然后在我的自定义控件的Template 中通过TemplateBinding 使用该画笔。

还有其他方法可以做到吗?

【问题讨论】:

    标签: c# xaml windows-runtime toggleswitch


    【解决方案1】:

    你可以在 Blend 中做到这一点

    右键单击 ToggleSwitch > 编辑模板 > 编辑副本

    Blend 将在 <Page.Resource> 中插入大量 XAML。更改Storyboard.TargetName="SwitchCurtain 属性将更改窗帘的颜色。

    <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchCurtain">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchTrackPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SwitchKnob">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
    

    【讨论】:

    • 这会改变开/关内容的颜色。开关的颜色仍然是紫色的阴影(默认颜色)
    • 是的,我刚刚测试过。实际上没有简单的方法来改变颜色。您可能希望通过创建样式在 Blend 中完成。
    • 我的问题表明我希望能够动态地执行此操作(能够在运行时为属性分配值/更改属性值)。在混合中更改它 = 静态更改它。
    • @KshitijMehta 您可以在运行时生成样式并将它们分配给切换开关。通过使用 Blend,您将了解生成的内容。我不确定这是否是最有效的方法。
    【解决方案2】:

    我最近在寻找同样的东西并找到了这个 MS 链接。只需将颜色更改为您不需要样式的颜色即可,除非您真的必须要那么低。

    http://msdn.microsoft.com/en-us/library/windows/apps/jj709931.aspx

    【讨论】:

      【解决方案3】:

      试试这个:

      <Style x:Key="ToggleSwitchStyle" TargetType="ToggleSwitch">
              <Setter Property="Foreground" Value="{StaticResource ToggleSwitchForegroundThemeBrush}"/>
              <Setter Property="HorizontalAlignment" Value="Left"/>
              <Setter Property="VerticalAlignment" Value="Center"/>
              <Setter Property="HorizontalContentAlignment" Value="Left"/>
              <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
              <Setter Property="FontWeight" Value="SemiBold"/>
              <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
              <Setter Property="ManipulationMode" Value="None"/>
              <Setter Property="MinWidth" Value="154"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="ToggleSwitch">
                          <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                              <VisualStateManager.VisualStateGroups>
                                  <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal"/>
                                      <VisualState x:Name="PointerOver">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SwitchKnob">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbPointerOverBorderThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Pressed">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SwitchKnob">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbPressedForegroundThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Disabled">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchHeaderDisabledForegroundThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OffContentPresenter">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OnContentPresenter">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchOuterBorderDisabledBorderThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SwitchKnob">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbDisabledBorderThemeBrush}"/>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                  </VisualStateGroup>
                                  <VisualStateGroup x:Name="ToggleStates">
                                      <VisualStateGroup.Transitions>
                                          <VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
                                              <Storyboard>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
                                              </Storyboard>
                                          </VisualTransition>
                                          <VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
                                              <Storyboard>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
                                              </Storyboard>
                                          </VisualTransition>
                                          <VisualTransition x:Name="OnToOffTransition" From="On" GeneratedDuration="0" To="Off">
                                              <Storyboard>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
                                              </Storyboard>
                                          </VisualTransition>
                                          <VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
                                              <Storyboard>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
                                                  <RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
                                              </Storyboard>
                                          </VisualTransition>
                                      </VisualStateGroup.Transitions>
                                      <VisualState x:Name="Dragging"/>
                                      <VisualState x:Name="Off">
                                          <Storyboard>
                                              <DoubleAnimation Duration="0" To="-44" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="On">
                                          <Storyboard>
                                              <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
                                              <DoubleAnimation Duration="0" To="38" Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform"/>
                                          </Storyboard>
                                      </VisualState>
                                  </VisualStateGroup>
                                  <VisualStateGroup x:Name="ContentStates">
                                      <VisualState x:Name="OffContent">
                                          <Storyboard>
                                              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OffContentPresenter"/>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
                                                  <DiscreteObjectKeyFrame KeyTime="0">
                                                      <DiscreteObjectKeyFrame.Value>
                                                          <x:Boolean>True</x:Boolean>
                                                      </DiscreteObjectKeyFrame.Value>
                                                  </DiscreteObjectKeyFrame>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="OnContent">
                                          <Storyboard>
                                              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnContentPresenter"/>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
                                                  <DiscreteObjectKeyFrame KeyTime="0">
                                                      <DiscreteObjectKeyFrame.Value>
                                                          <x:Boolean>True</x:Boolean>
                                                      </DiscreteObjectKeyFrame.Value>
                                                  </DiscreteObjectKeyFrame>
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                  </VisualStateGroup>
                                  <VisualStateGroup x:Name="FocusStates">
                                      <VisualState x:Name="Focused">
                                          <Storyboard>
                                              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Unfocused"/>
                                      <VisualState x:Name="PointerFocused"/>
                                  </VisualStateGroup>
                              </VisualStateManager.VisualStateGroups>
                              <Grid>
                                  <Grid.RowDefinitions>
                                      <RowDefinition Height="Auto"/>
                                      <RowDefinition Height="Auto"/>
                                  </Grid.RowDefinitions>
                                  <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource ToggleSwitchHeaderForegroundThemeBrush}" FontWeight="Semilight" Margin="6"/>
                                  <Grid Margin="{TemplateBinding Padding}" Grid.Row="1">
                                      <Grid.ColumnDefinitions>
                                          <ColumnDefinition Width="Auto"/>
                                          <ColumnDefinition Width="7"/>
                                          <ColumnDefinition Width="Auto"/>
                                      </Grid.ColumnDefinitions>
                                      <ContentPresenter x:Name="OffContentPresenter" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="65" Opacity="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                      <ContentPresenter x:Name="OnContentPresenter" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="65" Opacity="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                      <Grid Background="Transparent" Grid.Column="2">
                                          <Grid x:Name="SwitchKnobBounds" Height="16" Margin="13,5,13,16" Background="#FF164151">
                                              <Border x:Name="OuterBorder" BorderBrush="{StaticResource ToggleSwitchOuterBorderBorderThemeBrush}" BorderThickness="2" Background="#FF20C0FB">
                                                  <Border x:Name="InnerBorder" BorderBrush="{StaticResource ToggleSwitchTrackBorderThemeBrush}" BorderThickness="1" Background="#FF0ABCFF">
                                                      <ContentPresenter x:Name="SwitchCurtainBounds" Foreground="#FFFF0505">
                                                          <ContentPresenter x:Name="SwitchCurtainClip" Foreground="#FFFF0505">
                                                              <Rectangle x:Name="SwitchCurtain" Fill="#66EC0909" Width="44">
                                                                  <Rectangle.RenderTransform>
                                                                      <TranslateTransform x:Name="CurtainTranslateTransform" X="-44"/>
                                                                  </Rectangle.RenderTransform>
                                                              </Rectangle>
                                                          </ContentPresenter>
                                                      </ContentPresenter>
                                                  </Border>
                                              </Border>
                                              <Rectangle x:Name="SwitchKnob" Fill="#FFFF1515" HorizontalAlignment="Left" Stroke="{StaticResource ToggleSwitchThumbBorderThemeBrush}" StrokeThickness="0" Width="12">
                                                  <Rectangle.RenderTransform>
                                                      <TranslateTransform x:Name="KnobTranslateTransform"/>
                                                  </Rectangle.RenderTransform>
                                              </Rectangle>
                                              <Rectangle x:Name="FocusVisualWhite" Margin="-3" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" Fill="#FF269ECD"/>
                                              <Rectangle x:Name="FocusVisualBlack" Margin="-3" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" Fill="#FF0A739B"/>
                                          </Grid>
                                          <Thumb x:Name="SwitchThumb" Foreground="White" Background="{StaticResource TextLightGrey}">
                                              <Thumb.Template>
                                                  <ControlTemplate TargetType="Thumb">
                                                      <Rectangle Fill="Transparent"/>
                                                  </ControlTemplate>
                                              </Thumb.Template>
                                          </Thumb>
                                      </Grid>
                                  </Grid>
                              </Grid>
                          </Border>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
      

      【讨论】:

        【解决方案4】:

        我决定在自定义样式中重新使用 Background 属性,其中分配给 Background 属性的值将模板绑定到 SwitchCurtain 的 Fill。因为无论如何我都不会使用 Background 属性的实际用途,所以这似乎是理想的方法。

        【讨论】:

          【解决方案5】:

          你有没有尝试过类似的方法,它不起作用

          toggleSwitch.toggle.SwitchForeground = new SolidColorBrush(Colors.Green)
          

          阅读有关您的问题的更多信息,您可以完全切换样式,但您必须为切换创建多种样式并应用您想要的样式

          toggleSwitch.Style = this.FindResource("toggleSwitchsTYLE") as Style;
          

          http://www.windowsphonegeek.com/articles/wp7-toggleswitch-in-depth--key-concepts-and-api

          【讨论】:

          • 这是针对 WP7 的,我的问题是关于 Win8 上的 WinRT。 WinRT XAML ToggleSwitch 中不存在 SwitchForeground 属性。见msdn.microsoft.com/en-us/library/windows/apps/…
          • 能够创建多种样式不是一种选择,它需要更加动态。我无法为 n 种颜色创建 n 种不同的样式;这不是一个非常可维护的解决方案。
          • 那么你必须动态地创造风格
          【解决方案6】:
              <ResourceDictionary.ThemeDictionaries>
                      <ResourceDictionary x:Key="Default">
                                 <SolidColorBrush x:Key="ToggleSwitchFillOn" Color="Red"/>
                      </ResourceDictionary>
                  </ResourceDictionary.ThemeDictionaries>
          

          将上面的代码添加到您的 App.xaml

          【讨论】:

            猜你喜欢
            • 2018-06-28
            • 1970-01-01
            • 2015-10-14
            • 1970-01-01
            • 2012-09-04
            • 1970-01-01
            • 1970-01-01
            • 2017-05-18
            • 1970-01-01
            相关资源
            最近更新 更多