自定義切換按鈕在UWP

Question

<ToggleButton Content="This is a custom button" Name="toggleButton"> 
     <ToggleButton.Template> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Grid Name="RootGrid"> 
        <TextBlock Text="{TemplateBinding Content}" 
          Name="Text" 
           FontSize="10" 
           /> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize" 
                To="50" Duration="0:0:2" EnableDependentAnimation="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unchecked"> 
           <Storyboard> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize" 
                To="10" Duration="0" EnableDependentAnimation="True"/> 
            </Storyboard> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </Grid> 
      </ControlTemplate> 
     </ToggleButton.Template> 
    </ToggleButton> 

我想切換按鈕 創建一個自定義時，它的檢查，文本的字體大小將是50 DoubleAnimation是 當它選中，文本的字體大小將是10 DoubleAnimation是 。代碼如下。 但是，當我運行code.when我先點擊按鈕，字體大小不立即50.it幾秒後開始改變。當我再次單擊按鈕，以便該按鈕unchecked.But字體大小doesn不會改變，它仍然是50. 我如何更改代碼以便我可以製作符合我需要的按鈕？

Answer 1

只需將持續時間從"0:0:2"更改爲"0"，因爲無論如何都不能動畫字體大小。

您不需要在未檢查狀態下設置任何內容，更簡單的方法是使用可視狀態設置器。

<ToggleButton Content="This is a custom button" 
       Name="toggleButton" 
       HorizontalAlignment="Center"> 
    <ToggleButton.Template> 
     <ControlTemplate TargetType="ToggleButton"> 
      <Grid Name="RootGrid"> 
       <TextBlock Text="{TemplateBinding Content}" 
          Name="Text" 
          FontSize="10" /> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CheckStates"> 
         <VisualState x:Name="Checked"> 
          <VisualState.Setters> 
           <Setter Target="Text.(TextBlock.FontSize)" 
             Value="50" /> 
          </VisualState.Setters> 
         </VisualState> 
         <VisualState x:Name="Unchecked" /> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
      </Grid> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton> 

使用樣式

<ToggleButton Content="This is a custom button"> 
    <ToggleButton.Style> 
     <Style TargetType="ToggleButton"> 
      <Setter Property="Background" 
        Value="Transparent" /> 
      <Setter Property="Foreground" 
        Value="{ThemeResource ToggleButtonForeground}" /> 
      <Setter Property="BorderBrush" 
        Value="{ThemeResource ToggleButtonBorderBrush}" /> 
      <Setter Property="BorderThickness" 
        Value="{ThemeResource ToggleButtonBorderThemeThickness}" /> 
      <Setter Property="Padding" 
        Value="8,4,8,4" /> 
      <Setter Property="HorizontalAlignment" 
        Value="Center" /> 
      <Setter Property="VerticalAlignment" 
        Value="Center" /> 
      <Setter Property="FontFamily" 
        Value="{ThemeResource ContentControlThemeFontFamily}" /> 
      <Setter Property="FontWeight" 
        Value="Normal" /> 
      <Setter Property="FontSize" 
        Value="10" /> 
      <Setter Property="UseSystemFocusVisuals" 
        Value="True" /> 
      <Setter Property="FocusVisualMargin" 
        Value="-3" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ToggleButton"> 
         <Grid x:Name="RootGrid" 
           Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="50" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundChecked}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundChecked}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushChecked}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedPointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="50" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedPressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="50" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedDisabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="50" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                      Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                      Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}" /> 
              </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}" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ToggleButton.Style> 
</ToggleButton>