ViewModelからStoryboardを実行したい

前提・実現したいこと

ViewModelの変数の値で、Viewの図形を動く様に見せたい。
コードビハインド使わず実現したいです。

該当のソースコード

XAML
1<Window
2    x:Class="CanbasMoveTest.Views.MainWindow"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
6    xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
7    xmlns:v="clr-namespace:CanbasMoveTest.Views"
8    xmlns:vm="clr-namespace:CanbasMoveTest.ViewModels"
9    Title="MainWindow"
10    Width="500"
11    Height="150">
12
13    <Window.DataContext>
14        <vm:MainWindowViewModel />
15    </Window.DataContext>
16
17    <behaviors:Interaction.Triggers>
18        <!--  When ContentRendered event raised, Initialize method of ViewModel would be called.  -->
19        <behaviors:EventTrigger EventName="ContentRendered">
20            <l:LivetCallMethodAction MethodName="Initialize" MethodTarget="{Binding}" />
21        </behaviors:EventTrigger>
22
23        <!--  Dispose method is called, when Window closing.  -->
24        <behaviors:EventTrigger EventName="Closed">
25            <l:DataContextDisposeAction />
26        </behaviors:EventTrigger>
27
28        <!--  If you make user choose 'OK or Cancel' closing Window, then please use Window Close cancel Behavior.  -->
29
30    </behaviors:Interaction.Triggers>
31
32    <Window.Resources>
33        <Storyboard x:Key="LR1">
34            <DoubleAnimation
35                Storyboard.TargetName="rect"
36                Storyboard.TargetProperty="(Canvas.Left)"
37                To="10"
38                Duration="0:0:0.5" />
39        </Storyboard>
40        <Storyboard x:Key="LR2">
41            <DoubleAnimation
42                Storyboard.TargetName="rect"
43                Storyboard.TargetProperty="(Canvas.Left)"
44                To="70"
45                Duration="0:0:0.5" />
46        </Storyboard>
47        <Storyboard x:Key="LR3">
48            <DoubleAnimation
49                Storyboard.TargetName="rect"
50                Storyboard.TargetProperty="(Canvas.Left)"
51                To="130"
52                Duration="0:0:0.5" />
53        </Storyboard>
54        <Storyboard x:Key="UD1">
55            <DoubleAnimation
56                Storyboard.TargetName="rect"
57                Storyboard.TargetProperty="(Canvas.Top)"
58                To="20"
59                Duration="0:0:0.5" />
60        </Storyboard>
61        <Storyboard x:Key="UD2">
62            <DoubleAnimation
63                Storyboard.TargetName="rect"
64                Storyboard.TargetProperty="(Canvas.Top)"
65                To="40"
66                Duration="0:0:0.5" />
67        </Storyboard>
68        <Storyboard x:Key="UD3">
69            <DoubleAnimation
70                Storyboard.TargetName="rect"
71                Storyboard.TargetProperty="(Canvas.Top)"
72                To="60"
73                Duration="0:0:0.5" />
74        </Storyboard>
75    </Window.Resources>
76
77    <Grid>
78        <StackPanel Orientation="Vertical">
79
80            <StackPanel Orientation="Horizontal">
81
82
83                <Button Content="左" Width="60">
84                    <Button.Triggers>
85                        <EventTrigger RoutedEvent="Button.Click">
86                            <BeginStoryboard Storyboard="{StaticResource LR1}" />
87                        </EventTrigger>
88                    </Button.Triggers>
89                </Button>
90
91                <Button Content="中" Width="60">
92                    <Button.Triggers>
93                        <EventTrigger RoutedEvent="Button.Click">
94                            <BeginStoryboard Storyboard="{StaticResource LR2}" />
95                        </EventTrigger>
96                    </Button.Triggers>
97                </Button>
98
99                <Button Content="右" Width="60">
100                    <Button.Triggers>
101                        <EventTrigger RoutedEvent="Button.Click">
102                            <BeginStoryboard Storyboard="{StaticResource LR3}" />
103                        </EventTrigger>
104                    </Button.Triggers>
105                </Button>
106            </StackPanel>
107            <StackPanel Orientation="Vertical">
108                <Button Content="上" Width="40">
109                    <Button.Triggers>
110                        <EventTrigger RoutedEvent="Button.Click">
111                            <BeginStoryboard Storyboard="{StaticResource UD1}" />
112                        </EventTrigger>
113                    </Button.Triggers>
114                </Button>
115
116                <Button Content="中" Width="40">
117                    <Button.Triggers>
118                        <EventTrigger RoutedEvent="Button.Click">
119                            <BeginStoryboard Storyboard="{StaticResource UD2}" />
120                        </EventTrigger>
121                    </Button.Triggers>
122                </Button>
123
124                <Button Content="下" Width="40">
125                    <Button.Triggers>
126                        <EventTrigger RoutedEvent="Button.Click">
127                            <BeginStoryboard Storyboard="{StaticResource UD3}" />
128                        </EventTrigger>
129                    </Button.Triggers>
130                </Button>
131            </StackPanel>
132
133
134        </StackPanel>
135        <Canvas >
136            <Rectangle x:Name="rect" Fill="LightBlue" Stroke="DarkGray" StrokeThickness="2" Width="40" Height="20" Canvas.Left="10" Canvas.Top="20"/>
137        </Canvas>
138
139    </Grid>
140</Window>

試したこと

コードビハインドからStoryboard.Begin
var sb = FindResource("LR1") as Storyboard;
sb.Begin();

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

回答1件

ベストアンサー

ControlStoryboardActionをDataTriggerでキックすればいいでしょう。
ControlStoryboardAction · microsoft/XamlBehaviorsWpf Wiki

VMからどう動かすかわからないので、雑にタイマーでランダムに動かしました。
データの持ち方（HorizontalAlignment等）はご一考ください。

xml
1<Window
2  x:Class="Questions300617.Views.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
6  xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
7  xmlns:vm="clr-namespace:Questions300617.ViewModels"
8  Width="500"
9  Height="150">
10
11  <Window.DataContext>
12    <vm:MainWindowViewModel />
13  </Window.DataContext>
14
15  <Window.Resources>
16    <Storyboard x:Key="LR1">
17      <DoubleAnimation
18        Storyboard.TargetName="rect"
19        Storyboard.TargetProperty="(Canvas.Left)"
20        To="10"
21        Duration="0:0:0.5" />
22    </Storyboard>
23    <Storyboard x:Key="LR2">
24      <DoubleAnimation
25        Storyboard.TargetName="rect"
26        Storyboard.TargetProperty="(Canvas.Left)"
27        To="70"
28        Duration="0:0:0.5" />
29    </Storyboard>
30    <Storyboard x:Key="LR3">
31      <DoubleAnimation
32        Storyboard.TargetName="rect"
33        Storyboard.TargetProperty="(Canvas.Left)"
34        To="130"
35        Duration="0:0:0.5" />
36    </Storyboard>
37    <Storyboard x:Key="UD1">
38      <DoubleAnimation
39        Storyboard.TargetName="rect"
40        Storyboard.TargetProperty="(Canvas.Top)"
41        To="20"
42        Duration="0:0:0.5" />
43    </Storyboard>
44    <Storyboard x:Key="UD2">
45      <DoubleAnimation
46        Storyboard.TargetName="rect"
47        Storyboard.TargetProperty="(Canvas.Top)"
48        To="40"
49        Duration="0:0:0.5" />
50    </Storyboard>
51    <Storyboard x:Key="UD3">
52      <DoubleAnimation
53        Storyboard.TargetName="rect"
54        Storyboard.TargetProperty="(Canvas.Top)"
55        To="60"
56        Duration="0:0:0.5" />
57    </Storyboard>
58  </Window.Resources>
59
60  <behaviors:Interaction.Triggers>
61    <behaviors:EventTrigger EventName="ContentRendered">
62      <l:LivetCallMethodAction MethodName="Initialize" MethodTarget="{Binding}" />
63    </behaviors:EventTrigger>
64    <behaviors:EventTrigger EventName="Closed">
65      <l:DataContextDisposeAction />
66    </behaviors:EventTrigger>
67
68    <behaviors:DataTrigger  Binding="{Binding HorizontalAlignment}" Value="Left">
69      <behaviors:ControlStoryboardAction Storyboard="{StaticResource LR1}" />
70    </behaviors:DataTrigger>
71    <behaviors:DataTrigger Binding="{Binding HorizontalAlignment}" Value="Center">
72      <behaviors:ControlStoryboardAction Storyboard="{StaticResource LR2}" />
73    </behaviors:DataTrigger>
74    <behaviors:DataTrigger Binding="{Binding HorizontalAlignment}" Value="Right">
75      <behaviors:ControlStoryboardAction Storyboard="{StaticResource LR3}" />
76    </behaviors:DataTrigger>
77
78    <behaviors:DataTrigger Binding="{Binding VerticalAlignment}" Value="Top">
79      <behaviors:ControlStoryboardAction Storyboard="{StaticResource UD1}" />
80    </behaviors:DataTrigger>
81    <behaviors:DataTrigger Binding="{Binding VerticalAlignment}" Value="Center">
82      <behaviors:ControlStoryboardAction Storyboard="{StaticResource UD2}" />
83    </behaviors:DataTrigger>
84    <behaviors:DataTrigger Binding="{Binding VerticalAlignment}" Value="Bottom">
85      <behaviors:ControlStoryboardAction Storyboard="{StaticResource UD3}" />
86    </behaviors:DataTrigger>
87  </behaviors:Interaction.Triggers>
88
89  <Grid>
90    <Canvas>
91      <Rectangle
92        x:Name="rect"
93        Canvas.Left="10"
94        Canvas.Top="20"
95        Width="40"
96        Height="20"
97        Fill="LightBlue"
98        Stroke="DarkGray"
99        StrokeThickness="2" />
100    </Canvas>
101  </Grid>
102</Window>

cs
1using System;
2using System.Windows;
3using System.Windows.Threading;
4using Livet;
5
6namespace Questions300617.ViewModels
7{
8    public class MainWindowViewModel : ViewModel
9    {
10        private readonly Random random = new Random();
11        private DispatcherTimer timer;
12
13        private HorizontalAlignment _HorizontalAlignment;
14        public HorizontalAlignment HorizontalAlignment
15        {
16            get => _HorizontalAlignment;
17            set => RaisePropertyChangedIfSet(ref _HorizontalAlignment, value);
18        }
19
20        private VerticalAlignment _VerticalAlignment;
21        public VerticalAlignment VerticalAlignment
22        {
23            get => _VerticalAlignment;
24            set => RaisePropertyChangedIfSet(ref _VerticalAlignment, value);
25        }
26
27        public void Initialize()
28        {
29            timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1), };
30            timer.Tick += (s, e) =>
31            {
32                if(random.Next(2) == 0)
33                {
34                    HorizontalAlignment = (HorizontalAlignment)random.Next(3);
35                }
36                else
37                {
38                    VerticalAlignment = (VerticalAlignment)random.Next(3);
39                }
40            };
41            timer.Start();
42        }
43    }
44}