XamlのStoryboardをEventTriggerではなく、DataTriggerで起動する方法について

###前提・実現したいこと
現在、Visual Studio 2017でWPFのアプリを作成中です。
その中で、ある変数：Fが1～5で変化した際に、storyboardを起動したいと考えています。
Google等で調べながら、以下のようにEventTriggerを元にstoryboardを動かすことはできたのですが、これをEventTriggerではなく、ある変数Fの値に紐づけて発生させたいと考えています。

Xaml
1 <Canvas.Triggers>
2    <EventTrigger RoutedEvent="Canvas.Loaded">
3       <BeginStoryboard Storyboard="{StaticResource storyboard}" />

⇓以下のコードでは動作しませんが、以下のようなイメージで設定することはできるでしょうか？

Xaml
1 <Canvas.Triggers>
2   <DataTrigger Binding="{Binding Path=F}" Value="3">
3       <BeginStoryboard Storyboard="{StaticResource storyboard}" />

色々調べたのですが、storyboardの起動はマウスオーバー等のイベントトリガーで動作させるものばかりで、もしかするとDataTriggerではできないのかもしれませんが、もし工夫してDataTriggerを起点とすることができるようであれば、方法をご教授いただければ幸いです。

なお、C#コード側は一切手をつけることはできず、Xamlだけで変数Fに応じたUIの変更を行う必要があります。

よろしくお願いします。

###補足情報(言語/FW/ツール等のバージョンなど)
visual studio 2017

行動規範の内容に同意します

回答2件

ベストアンサー

私も同じ経験をしましたが、結論から言うとBeginStoryboard でDataTrigger を使用することはできません。
原因についてはよくわかっていないというのが正直なところです。
で、対応策としてはControlStoryboardAction を使用しましょう。
これはBlendから使用することができるTriggerAction で、DataTrigger を使用することができます。
コンパイルはしていませんが、おそらく以下のようになるはずです。

xml
1<Window x:Class="WpfApplication1.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
6        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
7        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
8～省略～
9    <i:Interaction.Triggers>
10        <ei:DataTrigger Binding="{Binding F, Mode=OneWay}" Value="1">
11            <ei:DataTrigger.Actions>
12                <ei:ControlStoryboardAction ControlStoryboardOption="Play"
13                                            Storyboard="{StaticResource storyboard}" />
14            </ei:DataTrigger.Actions>
15        </ei:DataTrigger>
16    </i:Interaction.Triggers>

XAMLをBlendで開き、[アセットウィンドウ] - [ビヘイビア] から"ControlStoryboardAction"を対象の要素にドラッグアンドドロップで設定できるようになります。

投稿2017/12/18 07:55

IYEMON018

総合スコア202

cesolution

2017/12/18 08:32

前回に引き続きご回答いただきありがとうございます。ご連絡いただいた方法を試してみたいと思います。

行動規範の内容に同意します

Blend SDKを使う方が便利なのですが、一応素のXAMLも方法があるので回答します。
選択肢の一つとして参考にしてください。

XML
1<Canvas>
2    <Canvas.Style>
3        <Style TargetType="Canvas">
4            <Style.Triggers>
5                <DataTrigger Binding="{Binding Path=F}" Value="3">
6                    <DataTrigger.EnterActions>
7                        <BeginStoryboard x:Name="CanvasStoryBoard">
8                            <Storyboard Storyboard="{StaticResource storyboard}" />
9                        </BeginStoryboard>
10                    </DataTrigger.EnterActions>
11                    <DataTrigger.ExitActions>
12                        <PauseStoryboard BeginStoryboardName="CanvasStoryBoard"/>
13                    </DataTrigger.ExitActions>
14                </DataTrigger>
15            </Style.Triggers>
16        </Style>
17    </Canvas.Style>
18</Canvas>

まずCanvas.TriggersではDataTriggerを配置できないので、Style.Triggersで配置するようにします。
そしてDataTriggerではBeginStoryBoardを直接配置することはできないので、DataTrigger.EnterActionsに配置するようにします。
DataTrigger.EnterActionsはValueに設定した値に変化したタイミングで動作します。
逆にDataTrigger.ExitActionsは、Valueに設定した値から別の値に変化したタイミングで動作します。

しかしこの方法はいくつかの制限事項が存在します。

Styleの値を変更するので、対象の要素に直接値が設定されている場合は変更できません。Styleの値は直接設定した値よりも優先順位が低いためです。(例：<Canvas Height="100">と設定されていたら、Heightはアニメーションできません。)
EnterActionsやExitActionsで設定するStoryBoardは、Bindingなどの動的な値を設定することができません。

投稿2018/11/01 11:23