ToggleSwitch color/styling

问题

I got an issue that my ToggleSwitch is white like this picture below shows:

I want to style the white part to be black. How do I do that? I've changed the default style but no option seems to change it?

Here is my style for it:

<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="{StaticResource PhoneAccentBrush}"/>
    <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" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Margin="12,5,12,42">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="#467CCD" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" IsTabStop="False" Margin="-1,0,0,0" Opacity="{TemplateBinding Opacity}" VerticalAlignment="Bottom"/>
                        <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="-1,1,0,-7" Opacity="{TemplateBinding Opacity}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="#467CCD" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="Black" VerticalAlignment="Bottom"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答1:

You need to define the following Style

<Style x:Key="ToggleSwitchButtonStyle1" TargetType="toolkitPrimitives:ToggleSwitchButton">
    <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
    <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" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SwitchBottom"/>
                                    <ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ThumbCenter"/>
                                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                </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" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation">
                                        <DoubleAnimation.EasingFunction>
                                            <ExponentialEase EasingMode="EaseOut" Exponent="15"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation">
                                        <DoubleAnimation.EasingFunction>
                                            <ExponentialEase EasingMode="EaseOut" Exponent="15"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Dragging"/>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation"/>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
                        <Grid x:Name="SwitchTrack" Width="89">
                            <Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="34">
                                <Rectangle x:Name="SwitchBackground" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Height="20" VerticalAlignment="Center" Width="77">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform x:Name="BackgroundTranslation"/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="3">
                                    <Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4"/>
                                </Border>
                            </Grid>
                            <Border x:Name="SwitchThumb" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4,0" HorizontalAlignment="Left" Height="38" Margin="-4,0" Width="28">
                                <Border.RenderTransform>
                                    <TranslateTransform x:Name="ThumbTranslation"/>
                                </Border.RenderTransform>
                                <Border x:Name="ThumbCenter" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2" Background="Black"/>
                            </Border>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And link it to the ToggleSwitch primitive in the style you attached in your post:

....
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="#467CCD" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="Black" VerticalAlignment="Bottom" Style="{StaticResource ToggleSwitchButtonStyle1}"/>
....

I edited the ThumbCenter Background property. You can play with other colors if you wish!

来源：https://stackoverflow.com/questions/17003979/toggleswitch-color-styling