WPF：アニメーションでビットマップソースをバインドできません。

Question

イメージを変更する2つのフレームを交互に切り替える単純なアニメーションがあります。私はビットマップイメージをバインドしようとするまで完全に動作します。

<Image Stretch="Fill"> 
<Image.Triggers> 
    <EventTrigger RoutedEvent="Image.Loaded"> 
     <BeginStoryboard> 
      <Storyboard RepeatBehavior="Forever"> 
       <ObjectAnimationUsingKeyFrames 
        BeginTime="00:00:00" Duration="{Binding ElementName=MyControl, Path=FrameDuration}" 
        Storyboard.TargetProperty="(Image.Source)"> 
        <DiscreteObjectKeyFrame KeyTime="00:00:00.000000"> 
         <DiscreteObjectKeyFrame.Value> 
          <BitmapImage UriSource="Assets/frame1.png" /> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames 
        BeginTime="{Binding ElementName=MyControl, Path=FrameBeginTime}" Duration="{Binding ElementName=MyControl, Path=FrameDuration}" 
        Storyboard.TargetProperty="(Image.Source)"> 
        <DiscreteObjectKeyFrame KeyTime="00:00:00.0000000"> 
         <DiscreteObjectKeyFrame.Value> 
          <BitmapImage UriSource="Assets/frame2.png" /> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
</Image.Triggers> 

私は、これら2つのバインディングを試みたが、それらのどれも動作しません：

XAML：

<BitmapImage Source="{Binding ElementName=MyControl, Path=FrameUri1}" /> 

コード：

public Uri FrameUri1 { get { return _frameUri1; } set { _frameUri1 = value; NotifyPropertyChanged("FrameUri1"); } } 

と

を

XAML：

<Image Source="{Binding ElementName=CosoControl, Path=BitmapSource}" /> 

コード：

public ImageSource BitmapSource 
    { 
     get 
     { 
      BitmapImage bitmap = new BitmapImage(); 
      bitmap.BeginInit(); 
      bitmap.UriSource = new Uri("pack://application:,,,/Myassembly;component/Assets/frame1.png"); 
      bitmap.EndInit(); 
      return bitmap; 
     } 
    } 

私は同様の問題を持つ他のスレッドを読んで、私はWPF/C＃にはかなり新しいだと私はそれを解決する方法を見つけ出すことができませんでした。私はIValueConverterについて読んでいますが、それをどのように整理するかは考えていません。

Answer 1

最良の方法は差分を使用することです。適切な拘束力を持つ画像を非表示にする。次に、必要なものの不透明度/可視性をアニメートします。

<Border BorderThickness="3" BorderBrush="#FF341A1A" Height="200">    
     <Border.Background> 
     <VisualBrush> 
      <VisualBrush.Visual> 
       <Grid> 
        <Image x:Name="Img1" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl1}"/> 
        <Image x:Name="Img2" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl2}"/> 
       </Grid> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </Border.Background> 
    <Border.Triggers> 
     <EventTrigger RoutedEvent="Border.Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames 
           Duration="0:0:3" 
           Storyboard.TargetName="Img1" 
           Storyboard.TargetProperty="Visibility" 
           > 
         <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Visible</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame>         
        </ObjectAnimationUsingKeyFrames>        
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Border.Triggers> 
</Border>