UWP：コードビハインドのトグルボタンクリックアニメーション

Question

私はAkai MPCのように機能するオーディオおもちゃを作っています。タップパッドをシミュレートするトグルボタンがあります。また、オーディオトリガーをキーボードキーにマッピングし、ビジュアルフィードバックを与えるためにキーが押されたときにボタンクリックアニメーションを実行したいと考えています。

このUWPを実行する方法はありますか？

  ToggleButtonAutomationPeer peer = 
      new ToggleButtonAutomationPeer(Button0); 

      IInvokeProvider invokeProv = 
       peer.GetPattern(PatternInterface.Invoke) 
        as IInvokeProvider; 

      invokeProv.Invoke(); 

を今invokeProvはnullです：

WPFでは、私はこれを使用することができます。

Answer 1

UWPでButtonをクリックしたときに発生するアニメーションは、実際にはVisualStateのレイアウトを変更しています。これはButtonのデフォルトスタイルの一部です（下記参照）。 ToggleButtonは同じ状態（さらにいくつか）を持っていますが、私は単純な参照として以下の通常のボタンのスタイルをペーストしました。

デモンストレーションの目的で、私はXAMLに3つのボタンを配置しました（1つはイベントを引き起こし、もう1つはアニメートする）。

<Grid Width="130"> 
    <StackPanel> 
     <Button Click="ButtonBase_OnClick">Animate</Button> 

     <Button x:Name="RegularButton">Regular</Button> 
     <ToggleButton x:Name="ToggleButton">Toggle</ToggleButton> 
    </StackPanel> 
</Grid> 

あなたはVisualStateManager介して別のVisualStateに行きます。 Normal状態にリセットすることを忘れないでください。そうしないと、誰かがボタンを押し続けているように見えます。

private async void ButtonBase_OnClick(object sender, RoutedEventArgs e) 
{ 
    VisualStateManager.GoToState(RegularButton, "Pressed", true); 
    VisualStateManager.GoToState(ToggleButton, "Pressed", true); 
    await Task.Delay(300); // give the eye some time to see the press 
    VisualStateManager.GoToState(RegularButton, "Normal", true); 
    VisualStateManager.GoToState(ToggleButton, "Normal", true); 
    ToggleButton.IsChecked = true; 
} 

デフォルトButtonスタイル：

<Style TargetType="Button"> 
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}" /> 
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" /> 
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" /> 
    <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="FocusVisualMargin" Value="-3" /> 
    <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.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter x:Name="ContentPresenter" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Content="{TemplateBinding Content}" 
         ContentTransitions="{TemplateBinding ContentTransitions}" 
         ContentTemplate="{TemplateBinding ContentTemplate}" 
         Padding="{TemplateBinding Padding}" 
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
         AutomationProperties.AccessibilityView="Raw" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>