ToggleSwitch 颜色/样式 [英] ToggleSwitch color/styling

问题描述

我遇到一个问题，我的 ToggleSwitch 是白色的，如下图所示:

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?

这是我的风格:

<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>

推荐答案

需要定义如下Style

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>

并将其链接到您在帖子中附加的样式中的 ToggleSwitch 原语:

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}"/>
....

我编辑了 ThumbCenter 背景属性.如果你愿意，你可以玩其他颜色！

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

这篇关于ToggleSwitch 颜色/样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！