自定义切换按钮在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>