切换开关颜色Windows Phone 8

时间:2014-07-29 20:02:21

标签: c# xaml windows-phone-8 toggleswitch

我正在创建一个应用程序,在我的主页面上,我有一个列表,每行都有一个ToggleSwitch控件,但控件没有出现在手机模拟器上。 ToggleSwitch控件的XAML如下:

<toolkit:ToggleSwitch x:Name="ToggleSwitch" IsChecked="false" Content="Content Goes here" Checked="switch_Unchecked" Unchecked="switch_Unchecked" BorderBrush="black" Background="Black" Width="200"/>

当我点击该代码时,它会显示:

enter image description here

所以我相信BorderBrush = black和Background = Black的控件位于正确的位置,但它没有出现...... 愿有人帮助我吗?

2 个答案:

答案 0 :(得分:1)

拥有其中一个属性BackgroundBorderBrush

为什么不以这种方式尝试?

XAML:

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
          OnContent="On" OffContent="Off" 
          Toggled="ToggleSwitch_Toggled"/>

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
// Add code to perform some action here.
}

也看看this。这是您使用的Toolkit还是什么?

希望它有所帮助!

答案 1 :(得分:1)

网格背景颜色的颜色是什么?这也可能有些问题。尝试为Toggle Switch应用以下样式。

 <Grid x:Name="LayoutRoot" Background="White">
    <toolkit:ToggleSwitch Margin="12,0" Content="Live Update" Background="White" Foreground="Black" Style="{StaticResource FixedToggleSwitchStyle}"/>
</Grid>

风格是,

<Style x:Key="FixedToggleSwitchButtonStyle" TargetType="toolkitPrimitives:ToggleSwitchButton">
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <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="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SwitchBottom"/>
                                    <ColorAnimation Duration="0" To="{TemplateBinding Foreground}" 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="{TemplateBinding Foreground}" BorderThickness="3">
                                    <Border BorderBrush="{TemplateBinding Background}" BorderThickness="4"/>
                                </Border>
                            </Grid>
                            <Border x:Name="SwitchThumb" BorderBrush="{TemplateBinding Background}" 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="{TemplateBinding Foreground}" BorderThickness="2" Background="{TemplateBinding Foreground}"/>
                            </Border>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="FixedToggleSwitchStyle" 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="{StaticResource PhoneSubtleBrush}" 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="{TemplateBinding Background}" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="{TemplateBinding SwitchForeground}" VerticalAlignment="Bottom" Style="{StaticResource FixedToggleSwitchButtonStyle}" Foreground="{TemplateBinding Foreground}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

根据您在Toggle Switch中的需要更改背景颜色和前景颜色。