###やりたいこと
コードビハインドで条件によって再生するアニメーションを変えたいです。
StoryBoardを複数用意するのではなく、一つのStoryBoardだけをxamlに用意しておき、コードビハインドで条件に従ってTargetPropertyのみを変えるような形でアニメーションを切り替えることは可能でしょうか。
###例
例として用意した下のサンプルプログラムでは、「さいころを振る」ボタンを押すと変数DEMEがランダムに1~6の値を取ります。
また、StoryBoardにはTargetPropertyに設定した目がジャンプするアニメーションを作成し、「さいころを振る」ボタンを押したときに再生されるようにしています。
たとえばStoryboard.TargetProperty="One"とすることで、「さいころを振る」ボタンを押したときに「1」がジャンプします。
Storyboard.TargetPropertyにDEME_NAMEプロパティをBindingする(Storyboard.TargetName="{Binding Path=DEME_NAME}")ことで、さいころの出目に応じた番号をジャンプさせることはできないかと試してみたのですが、エラーとなりました。(System.InvalidOperationException)
TargetPropertyを、DEMEが1のときはONE、2のときはTwo...といったようにコードビハインドで変化させることはできないでしょうか。
###サンプルコード
「さいころを振る」ボタンを押したときに「1」がジャンプするパターンのコードを記載します。
C#
1using System; 2using System.ComponentModel; 3using System.Windows; 4using System.Windows.Media.Animation; 5 6 7namespace Saikoro 8{ 9 /// <summary> 10 /// MainWindow.xaml の相互作用ロジック 11 /// </summary> 12 public partial class MainWindow : Window 13 { 14 Hoge hoge = new Hoge(); 15 16 public MainWindow() 17 { 18 InitializeComponent(); 19 DataContext = hoge; 20 } 21 22 private void Button_Click(object sender, RoutedEventArgs e) 23 { 24 hoge.Shake(); 25 var sb = FindResource("Jump") as Storyboard; 26 BeginStoryboard(sb); 27 } 28 } 29 30 public class Hoge : INotifyPropertyChanged 31 { 32 33 #region INotifyPropertyChanged の実装 34 public event PropertyChangedEventHandler PropertyChanged; 35 private void RaiseProeprtyChanged(string propertyName) 36 { 37 var h = this.PropertyChanged; 38 if (h != null) h(this, new PropertyChangedEventArgs(propertyName)); 39 } 40 #endregion INotifyPropertyChanged の実装 41 public int _DEME; 42 public int DEME 43 { 44 set { _DEME = value; } 45 get { return _DEME; } 46 } 47 48 //Storyboard.TargetPropertyにBindingするために用意したプロパティ。 49 //現状ではBindingするとエラーが出るため使っていない。 50 public string DEME_NAME 51 { 52 get 53 { 54 switch (_DEME) 55 { 56 case 1: 57 return "One"; 58 case 2: 59 return "Two"; 60 case 3: 61 return "Three"; 62 case 4: 63 return "Four"; 64 case 5: 65 return "Five"; 66 case 6: 67 return "Six"; 68 default: 69 return "One"; 70 } 71 } 72 } 73 74 private static readonly Random rnd = new Random(); 75 76 public void Shake() 77 { 78 DEME = rnd.Next(1, 7);//1から6のランダムな出目 79 RaiseProeprtyChanged("DEME"); 80 } 81 } 82}
waml
1<Window x:Class="Saikoro.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:Saikoro" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="450" Width="300"> 9 <Window.Resources> 10 <Storyboard x:Key="Jump"> 11 <!--Storyboard.TargetName="{Binding Path=DEME_NAME}"とするとエラーになる--> 12 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="One"> 13 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-20"/> 14 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/> 15 </DoubleAnimationUsingKeyFrames> 16 </Storyboard> 17 </Window.Resources> 18 <Canvas> 19 <Button Click="Button_Click" Content="さいころを振る" Canvas.Left="107.334" Canvas.Top="37.333" Width="75" Height="25"/> 20 <Grid Width="292" Height="286" Canvas.Top="133"> 21 <Grid.RowDefinitions> 22 <RowDefinition/> 23 <RowDefinition/> 24 <RowDefinition/> 25 </Grid.RowDefinitions> 26 <Grid.ColumnDefinitions> 27 <ColumnDefinition/> 28 <ColumnDefinition/> 29 </Grid.ColumnDefinitions> 30 <TextBlock x:Name="One" Grid.Column="0" Grid.Row="0" TextWrapping="Wrap" Text="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" RenderTransformOrigin="0.5,0.5"> 31 <TextBlock.RenderTransform> 32 <TransformGroup> 33 <ScaleTransform/> 34 <SkewTransform/> 35 <RotateTransform/> 36 <TranslateTransform/> 37 </TransformGroup> 38 </TextBlock.RenderTransform> 39 </TextBlock> 40 <TextBlock x:Name="Two" Grid.Column="1" Grid.Row="0" TextWrapping="Wrap" Text="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/> 41 <TextBlock x:Name="Three" Grid.Column="0" Grid.Row="1" TextWrapping="Wrap" Text="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/> 42 <TextBlock x:Name="Four" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/> 43 <TextBlock x:Name="Five" Grid.Column="0" Grid.Row="2" TextWrapping="Wrap" Text="5" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/> 44 <TextBlock x:Name="Six" Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" Text="6" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/> 45 </Grid> 46 <TextBlock Canvas.Left="121.333" TextWrapping="Wrap" Text="{Binding Path=DEME}" Canvas.Top="90.333" Height="26.627" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" TextAlignment="Center"/> 47 </Canvas> 48</Window>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/10/28 01:52