質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

2637閲覧

[WPF]コードビハインドでStoryboard.TargetPropertyを設定することは可能でしょうか

退会済みユーザー

退会済みユーザー

総合スコア0

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2020/10/27 02:37

###やりたいこと
コードビハインドで条件によって再生するアニメーションを変えたいです。
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>

###実行時の画面
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

RenderTransformOneにしか付いていないので、ほかの目が出たときにエラーになります。
全部に付ければ想定通りに動きます。

xml

1<Window 2 x:Class="Questions300589.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 Width="300" 6 Height="450"> 7 <Window.Resources> 8 <Storyboard x:Key="Jump"> 9 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="{Binding DEME_NAME}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"> 10 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-20" /> 11 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" /> 12 </DoubleAnimationUsingKeyFrames> 13 </Storyboard> 14 15 <Style TargetType="{x:Type TextBlock}"> 16 <Setter Property="HorizontalAlignment" Value="Center" /> 17 <Setter Property="VerticalAlignment" Value="Center" /> 18 <Setter Property="FontSize" Value="36" /> 19 <Setter Property="RenderTransform"> 20 <Setter.Value> 21 <TranslateTransform /> 22 </Setter.Value> 23 </Setter> 24 </Style> 25 </Window.Resources> 26 <Grid> 27 <Grid.RowDefinitions> 28 <RowDefinition /> 29 <RowDefinition /> 30 <RowDefinition Height="3*" /> 31 </Grid.RowDefinitions> 32 <Button 33 HorizontalAlignment="Center" 34 VerticalAlignment="Center" 35 Click="Button_Click" 36 Content="さいころを振る" /> 37 38 <TextBlock FontSize="24" Text="{Binding DEME}" Grid.Row="1" /> 39 40 <UniformGrid Grid.Row="2" Columns="2"> 41 <TextBlock x:Name="One" Text="1" /> 42 <TextBlock x:Name="Two" Text="2" /> 43 <TextBlock x:Name="Three" Text="3" /> 44 <TextBlock x:Name="Four" Text="4" /> 45 <TextBlock x:Name="Five" Text="5" /> 46 <TextBlock x:Name="Six" Text="6" /> 47 </UniformGrid> 48 </Grid> 49</Window>

cs

1using System; 2using System.ComponentModel; 3using System.Windows; 4using System.Windows.Media.Animation; 5 6namespace Questions300589 7{ 8 public partial class MainWindow : Window 9 { 10 private readonly Hoge hoge = new Hoge(); 11 private readonly Storyboard sb; 12 13 public MainWindow() 14 { 15 InitializeComponent(); 16 DataContext = hoge; 17 sb = FindResource("Jump") as Storyboard; 18 } 19 20 private void Button_Click(object sender, RoutedEventArgs e) 21 { 22 hoge.Shake(); 23 BeginStoryboard(sb); 24 } 25 } 26 27 public class Hoge : INotifyPropertyChanged 28 { 29 private static readonly Random rnd = new Random(); 30 31 public int DEME { get; private set; } 32 33 public string DEME_NAME 34 { 35 get 36 { 37 switch(DEME) 38 { 39 default: 40 case 1: return "One"; 41 case 2: return "Two"; 42 case 3: return "Three"; 43 case 4: return "Four"; 44 case 5: return "Five"; 45 case 6: return "Six"; 46 } 47 } 48 } 49 50 public void Shake() 51 { 52 DEME = rnd.Next(1, 7); 53 RaiseProeprtyChanged(nameof(DEME)); 54 RaiseProeprtyChanged(nameof(DEME_NAME)); 55 } 56 57 #region INotifyPropertyChanged の実装 58 public event PropertyChangedEventHandler PropertyChanged; 59 private void RaiseProeprtyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 60 #endregion 61 } 62}

xamlが長くなりそうだったのでだいぶ変えてしまいましたが、元の形でもOKです。

投稿2020/10/27 08:46

編集2023/07/23 08:38
TN8001

総合スコア9296

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/10/28 01:52

そういうことでしたか、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問