1. 首頁
  2. 問答
  3. ToggleButton在UWP中沒有未選中狀態

ToggleButton在UWP中沒有未選中狀態

2015-11-13 25 views
0

我在Windows 10 UWP應用程序中的ToggleButton模板中使用Visual States。ToggleButton在UWP中沒有未選中狀態

我添加了'Checked'狀態的動畫，因此當選中時，模板中的圖標會在250毫秒內旋轉90度。

現在我想要在不再檢查ToggleButton的情況下，在相同的250毫秒時間範圍內將圖標旋轉回正常狀態。

問題是，沒有'Unchecked'狀態來爲ToggleButton生成動畫 - 所以看起來這是不可能的。

當然我都有這個毛病不知何故 - 所以有沒有人管理的動畫切換按鈕移動到「未選中」狀態（這顯然不再存在??????）

感謝

院長

來源

2015-11-13 Dean Chalk

回答

2

正如我已經試過普通狀態似乎意味着未選中 - 另請注意，所有的州都有當量（「普通 - >按下」和「選中 - > CheckedPressed」）。立足於這一點，我可以做一個切換按鈕其中其旋轉內容這樣的：

<Style x:Key="MyToggleButtonStyle" TargetType="ToggleButton"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
    <Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}"/> 
    <Setter Property="Padding" Value="8,4,8,4"/> 
    <Setter Property="HorizontalAlignment" Value="Left"/> 
    <Setter Property="VerticalAlignment" Value="Center"/> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
    <Setter Property="FontWeight" Value="Normal"/> 
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
    <Setter Property="UseSystemFocusVisuals" Value="True"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates" CurrentStateChanged="CommonStates_CurrentStateChanged"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="0.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="0.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="0.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="0.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="90.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedPointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="90.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedPressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="90.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckedDisabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:2" To="90.0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ContentPresenter"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Indeterminate"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminatePointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminatePressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="IndeterminateDisabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5"> 
         <ContentPresenter.RenderTransform> 
          <RotateTransform/> 
         </ContentPresenter.RenderTransform> 
        </ContentPresenter> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

使用範例：

<ToggleButton Style="{StaticResource MyToggleButtonStyle}"> 
    <SymbolIcon Symbol="Up"/> 
</ToggleButton>

正如你可以看到我還訂閱了VisualStateGroup的CurrentStateChanged事件，因此更容易看到狀態如何改變。

private void CommonStates_CurrentStateChanged(object sender, VisualStateChangedEventArgs e) => 
     Debug.WriteLine($"State changed from {e.OldState?.Name} to: {e.NewState.Name}");

來源

2015-11-13 11:25:47 Romasz

+0

這完全是我以後 - 非常感謝:) –

0

你可以試試這個：

<Page.Resources> 
    <Style x:Key="MaterialDesignHamburgerToggleButton" TargetType="ToggleButton"> 
     <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForegroundThemeBrush}"/> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="UseSystemFocusVisuals" Value="True"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Width" Value="37" /> 
     <Setter Property="Height" Value="37" /> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Border Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="*" To="Checked"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="45"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.581"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="4.875"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.875"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-45"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.581"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="4.832"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-2.082"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.889"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-180"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualTransition> 
            <VisualTransition From="Checked" To="Normal"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas"> 
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualTransition> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="0.581" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="4.875" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="1.875" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="0.581" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="4.832" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="-2.082" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="0.889" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1" /> 
             <DoubleAnimation Duration="0" To="-1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1" /> 
             <DoubleAnimation Duration="0" To="-180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2" /> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1" /> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Viewbox> 
          <Canvas x:Name="canvas" Width="24" Height="24" RenderTransformOrigin="0.5,0.5"> 
           <Canvas.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform/> 
             <SkewTransform/> 
             <RotateTransform/> 
             <TranslateTransform/> 
            </TransformGroup> 
           </Canvas.RenderTransform> 
           <Rectangle x:Name="rectangle" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="6" Width="18" RenderTransformOrigin="0.5,0.5" 
             > 
            <Rectangle.RenderTransform> 
             <TransformGroup> 
              <ScaleTransform/> 
              <SkewTransform/> 
              <RotateTransform/> 
              <TranslateTransform/> 
             </TransformGroup> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
           <Rectangle x:Name="rectangle1" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="11" Width="18" RenderTransformOrigin="0.5,0.5"           
             > 
            <Rectangle.RenderTransform> 
             <TransformGroup> 
              <ScaleTransform/> 
              <SkewTransform/> 
              <RotateTransform/> 
              <TranslateTransform/> 
             </TransformGroup> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
           <Rectangle x:Name="rectangle2" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="16" Width="18" RenderTransformOrigin="0.5,0.5" 
             > 
            <Rectangle.RenderTransform> 
             <TransformGroup> 
              <ScaleTransform/> 
              <SkewTransform/> 
              <RotateTransform/> 
              <TranslateTransform/> 
             </TransformGroup> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
          </Canvas> 
         </Viewbox> 
        </Border> 
        <!--<ControlTemplate.Triggers> 
         <Trigger Property="Button.IsDefaulted" Value="true"/> 
        </ControlTemplate.Triggers>--> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

<Grid Background="White"> 

    <SplitView x:Name="MySplitView" 
       IsPaneOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}"> 

     <SplitView.Pane> 
      <Grid> 
       <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
           HorizontalAlignment="Right" VerticalAlignment="Top" Margin="16" 
           IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" /> 
      </Grid> 
     </SplitView.Pane> 

     <SplitView.Content> 
      <Grid> 
       <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
           IsChecked="False" 
           VerticalAlignment="Top" 
           x:Name="MenuToggleButton"/> 
      </Grid> 
     </SplitView.Content> 
    </SplitView> 
</Grid>

來源

2015-12-27 18:03:46

0

最好是使用複選框，因爲它包含 '未選中' 狀態的嘗試。

來源

2016-09-06 11:28:40

相關問題

 相關問題