UWP：觸發器切換按鈕在代碼隱藏中點擊動畫

我正在製作像Akai MPC一樣工作的音頻玩具。我有切換按鈕來模擬敲擊墊。我還將音頻觸發映射到鍵盤按鍵，並希望在按下按鍵時發出按鈕點擊動畫，以提供視覺反饋。UWP：觸發器切換按鈕在代碼隱藏中點擊動畫

有沒有辦法做到這個UWP？

在WPF我可以使用這樣的：

  ToggleButtonAutomationPeer peer = 
      new ToggleButtonAutomationPeer(Button0); 

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

      invokeProv.Invoke();

但現在invokeProv爲空。

來源

2017-09-03 jchristof

爲什麼按下按鍵時不只是運行按鈕，點擊回調中的代碼？或者甚至只是設置'MyToggleButton.IsChecked = true'？ –

我正在運行點擊回調代碼。我只想運行點擊動畫。 – jchristof

「點擊動畫」是什麼意思？ –

單擊UWP中的Button時發生的動畫實際上是更改佈局的VisualState。這是Button默認樣式的一部分（見下文）。 ToggleButton具有相同的狀態（以及更多），但我已將以下常規Button的樣式粘貼爲更簡單的參考。

爲了演示的目的，我在XAML中放置了3個按鈕（一個觸發事件，2個放置動畫）。

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

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

你去到另一個VisualState通過VisualStateManager。不要忘記重置到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>

來源

2017-09-03 06:33:10 Bart

UWP：觸發器切換按鈕在代碼隱藏中點擊動畫

回答

相關問題