指針動畫的自定義按鈕

Question

我有UWP應用程序。將自來水動畫（PointerUpThemeAnimation，PointerDownThemeAnimation）應用到自定義按鈕的最佳方式是什麼？

<Button> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <ContentPresenter /> 
      </ControlTemplate> 
     </Button.Template> 
     <Rectangle Width="100" 
        Height="100" 
        Fill="Red" /> 
    </Button> 

Answer 1

您將需要編輯預定義的按鈕樣式以合併所需的樣式。使用混合您可以更新按鈕syle

<Style x:Key="ButtonStyle1" TargetType="Button"> 
      <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
      <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
      <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
      <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
      <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="Button"> 
         <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="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="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> 
              <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 SystemControlDisabledBaseMediumLowBrush}"/> 
              </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}"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

請確保您將此添加爲資源項目並引用此樣式。在這裏更新按下和pointerOver到你想要的動畫。