WP7 Проблема с тумблером?

Question

Стиль тумблера, взять цвета из темы, Dark & ​​White, но я хочу иметь свой собственный цвет фона, и в этом случае стиль переключателя не очень хороший

так что на первом изображении стиль Light, и он не подходит

Во втором уже темно, баад

хочу как третий "отредактировано краской" есть ли способ сделать это?!

Answer 1

• Вы можете создать свой собственный стиль для ToggleSwitch, отредактировав стиль по умолчанию для ToggleSwitch.

• Вы получите стиль по умолчанию из Здесь

• Вот стиль для ToggleSwitch, который я отредактировал и создал ToggleSwitch, подобный этому

  

  <Style x:Key="ToggleSwitchCustomStyle" 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="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="Background" Storyboard.TargetName="InnerBorder">
                                      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchTrackDisabledBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
                                      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbDisabledBackgroundThemeBrush}"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchCurtain">
                                      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchCurtainDisabledBackgroundThemeBrush}"/>
                                  </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>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
                                      <DiscreteObjectKeyFrame KeyTime="0" Value="#FF97CD72"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <DoubleAnimation Duration="0" To="-44" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
                              </Storyboard>
                          </VisualState>
                          <VisualState x:Name="On">
                              <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
                                      <DiscreteObjectKeyFrame KeyTime="0" Value="#FFE17163"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  <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="0.4" 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="0.4" 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" Width="163" Height="51">
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="Auto"/>
                              <ColumnDefinition Width="Auto"/>
                          </Grid.ColumnDefinitions>
  
                          <ContentPresenter Grid.Column="2" x:Name="OffContentPresenter" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="41" Opacity="10" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                          <ContentPresenter x:Name="OnContentPresenter" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="43" Opacity="100" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="42"/>
                          <Grid Background="Transparent" Grid.Column="1">
                              <Grid x:Name="SwitchKnobBounds" Height="30" Margin="0,5,5,16" Width="57">
  
                                  <Border x:Name="OuterBorder" CornerRadius="10" BorderBrush="#59FFFFFF" BorderThickness="2" Height="24" Width="57">
                                      <Border BorderBrush="White" BorderThickness="2" CornerRadius="8" Background="#FFD0D4DF" Width="52" Margin="0">
                                          <Border Height="Auto" x:Name="InnerBorder" CornerRadius="10" BorderBrush="{StaticResource ToggleSwitchTrackBorderThemeBrush}" BorderThickness="3" Background="#FFD0D4DF">
  
                                              <ContentPresenter x:Name="SwitchCurtainBounds">
                                                  <ContentPresenter x:Name="SwitchCurtainClip">
                                                      <Rectangle x:Name="SwitchCurtain" Fill="Transparent" Width="44">
                                                          <Rectangle.RenderTransform>
                                                              <TranslateTransform x:Name="CurtainTranslateTransform" X="-44"/>
                                                          </Rectangle.RenderTransform>
                                                      </Rectangle>
                                                  </ContentPresenter>
                                              </ContentPresenter>
                                          </Border>
                                      </Border>
                                  </Border>
                                  <Rectangle x:Name="SwitchKnob" Fill="#FF97CD72" HorizontalAlignment="Left" RadiusX="15" RadiusY="20" StrokeThickness="9" Height="25" Width="25">
                                      <Rectangle.Stroke>
                                          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                              <GradientStop Color="White"/>
                                              <GradientStop Color="White" Offset="1"/>
                                              <GradientStop Color="#FFCED2DA" Offset="0.53"/>
                                          </LinearGradientBrush>
                                      </Rectangle.Stroke>
                                      <Rectangle.RenderTransform>
                                          <TranslateTransform x:Name="KnobTranslateTransform"/>
                                      </Rectangle.RenderTransform>
                                  </Rectangle>
                                  <Rectangle x:Name="FocusVisualWhite" Margin="-3" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
                                  <Rectangle x:Name="FocusVisualBlack" Margin="-3" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                              </Grid>
  
                              <Thumb x:Name="SwitchThumb">
                                  <Thumb.Template>
                                      <ControlTemplate TargetType="Thumb">
                                          <Rectangle Fill="Transparent"/>
                                      </ControlTemplate>
                                  </Thumb.Template>
                              </Thumb>
  
                          </Grid>
                      </Grid>
                  </Grid>
              </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
  </Style>
  

Answer 2

Создать собственный стиль. Вот пример, где цвет переднего плана изменяется на #F09609

<Style x:Key="ToggleSwitchButtonStyle"
       TargetType="toolkitPrimitives:ToggleSwitchButton">
    <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
                <Border x:Name="Root"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CacheMode="BitmapCache"
                        Opacity="{TemplateBinding Opacity}"
                        Padding="{TemplateBinding Padding}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="SwitchBottom"
                                                    Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
                                                    To="{StaticResource PhoneForegroundColor}" />
                                    <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="ThumbCenter"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="{StaticResource PhoneForegroundColor}" />
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="0.3" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.05"
                                                  To="Unchecked" />
                                <VisualTransition GeneratedDuration="0:0:0.05"
                                                  To="Checked" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BackgroundTranslation"
                                                     Storyboard.TargetProperty="(TranslateTransform.X)"
                                                     To="68">
                                        <DoubleAnimation.EasingFunction>
                                            <ExponentialEase EasingMode="EaseOut"
                                                             Exponent="15" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ThumbTranslation"
                                                     Storyboard.TargetProperty="(TranslateTransform.X)"
                                                     To="68">
                                        <DoubleAnimation.EasingFunction>
                                            <ExponentialEase EasingMode="EaseOut"
                                                             Exponent="15" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Dragging" />
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BackgroundTranslation"
                                                     Storyboard.TargetProperty="(TranslateTransform.X)"
                                                     To="0" />
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ThumbTranslation"
                                                     Storyboard.TargetProperty="(TranslateTransform.X)"
                                                     To="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="SwitchRoot"
                          Width="136"
                          Height="95"
                          Background="Transparent">
                        <Grid x:Name="SwitchTrack"
                              Width="88">
                            <Grid x:Name="SwitchBottom"
                                  Height="32"
                                  Background="{TemplateBinding SwitchForeground}">
                                <Rectangle x:Name="SwitchBackground"
                                           Width="76"
                                           Height="20"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Fill="{TemplateBinding Background}">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform x:Name="BackgroundTranslation" />
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Border BorderBrush="{StaticResource PhoneForegroundBrush}"
                                        BorderThickness="2">
                                    <Border BorderBrush="{StaticResource PhoneBackgroundBrush}"
                                            BorderThickness="4" />
                                </Border>
                            </Grid>
                            <Border x:Name="SwitchThumb"
                                    Width="28"
                                    Height="36"
                                    Margin="-4,0"
                                    HorizontalAlignment="Left"
                                    BorderBrush="{StaticResource PhoneBackgroundBrush}"
                                    BorderThickness="4,0">
                                <Border.RenderTransform>
                                    <TranslateTransform x:Name="ThumbTranslation" />
                                </Border.RenderTransform>
                                <Border x:Name="ThumbCenter"
                                        Background="White"
                                        BorderBrush="{StaticResource PhoneForegroundBrush}"
                                        BorderThickness="2" />
                            </Border>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ToggleSwitchStyle"
       TargetType="toolkit:ToggleSwitch">
    <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}" />
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}" />
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="toolkit:ToggleSwitch">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CacheMode="BitmapCache"
                        Padding="{TemplateBinding Padding}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Header"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="0.3" />
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="0.3" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Margin="12,5,36,42">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentControl x:Name="Header"
                                        Margin="-1,0,0,0"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Bottom"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                        FontSize="{StaticResource PhoneFontSizeNormal}"
                                        Foreground="{StaticResource PhoneBorderBrush}"
                                        IsTabStop="False"
                                        Opacity="{TemplateBinding Opacity}" />
                        <ContentControl x:Name="Content"
                                        Grid.Row="1"
                                        Margin="-1,1,0,-7"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        IsTabStop="False"
                                        Opacity="{TemplateBinding Opacity}" />
                        <toolkitPrimitives:ToggleSwitchButton x:Name="Switch"
                                                              Grid.RowSpan="2"
                                                              Grid.Column="1"
                                                              Margin="-22,-29,-24,-28"
                                                              VerticalAlignment="Bottom"
                                                              Background="{TemplateBinding Background}"
                                                              Opacity="{TemplateBinding Opacity}"
                                                              Style="{StaticResource ToggleSwitchButtonStyle}"
                                                              SwitchForeground="{TemplateBinding SwitchForeground}" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>