1. 首頁
  2. 問答
  3. WP7切換開關有問題？

WP7切換開關有問題？

2011-09-20 51 views
1

撥動開關的款式，拿顏色主題，黑暗&白色的，但我想有我自己的背景顏色，在這種情況下，交換機的風格是不是好WP7切換開關有問題？

enter image description here

所以第一個圖像中，風格是光，它不適合

在第二，它的黑暗，BAAD

我希望它像第三 「的油漆主編」沒有辦法做到這一點？ ！

來源

2011-09-20 AMTourky

回答

2

創建自定義樣式。在此處，把前景顏色通過編輯ToggleSwitch的默認 風格改爲#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>

來源

2011-09-20 02:08:19

+0

首次風格做這樣的事情，所有過程的任何鏈接？！ – AMTourky

+2

下載Expression Blend並學習如何使用它。這是最簡單的方法。 –

3

  • 您可以創建自己的ToggleSwitch風格的例子。

  • 你會得到Here

  • 這裏的默認樣式爲ToggleSwitch我編輯和創建 ToggleSwitch這樣

    enter image description here

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

來源

2013-12-02 12:44:14

相關問題

 相關問題