LoginSignup
0
0

WPF ScrollViewerに配置したボタンをタッチ操作でもアニメーションさせたい

Last updated at Posted at 2023-10-02

ScrollViewer内にボタンを配置しタッチ操作を行うと、何故かトリガーに設定したIsPressedを拾ってくれない。
ちょっと調べたところ、詳しい事は分からなかったがタッチイベントが途中でハンドルされてるっぽい。多分。
Stylusのイベントは発生している様なのでEventTriggerに設定して
PreviewStylusDown(StylusDownでも可)をStoryboardのアニメーション開始に設定
StylusUpとStylusLeaveをアニメーション停止に設定。
StylusUpだけだとボタンをホールドしたままスクロール移動すると
上手く停止してくれないのでStylusLeaveも設定する。
テンプレートやトリガーの中身を弄れば色んなボタンで応用可能だと思います。

PressableButtonStyle.xml
<Style x:Key="PressableButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border Name="border_under" Background="{TemplateBinding BorderBrush}"/>
                            <Border Name="border_top" Background="{TemplateBinding Background}">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <TranslateTransform X="0" Y="-3" />
                                    </TransformGroup>
                                </Border.RenderTransform>
                                <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Border.PreviewStylusDown" SourceName="border_top">
                                <BeginStoryboard  Name="beginStoryboard">
                                    <Storyboard >
                                        <DoubleAnimation 
                                                          Storyboard.TargetName="border_top" 
                                                          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
                                                          Duration="0:0:0:0" From="-3" To="0" />
                                    </Storyboard>
                                </BeginStoryboard>

                            </EventTrigger>
                            <EventTrigger RoutedEvent="Border.StylusUp" SourceName="border_top">
                                <RemoveStoryboard BeginStoryboardName="beginStoryboard"/>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Border.StylusLeave" SourceName="border_top">
                                <RemoveStoryboard BeginStoryboardName="beginStoryboard"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0