Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>you can achieve this in another simple way by building a very basic custom control, which inherits from Image.</p> <p>Here the code for "MyImage":</p> <pre><code>public class MyImage : Image { public static readonly RoutedEvent ImageUpdatedEvent = EventManager.RegisterRoutedEvent("ImageUpdated", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyImage)); public event RoutedEventHandler ImageUpdated { add { this.AddHandler(ImageUpdatedEvent, value); } remove { this.RemoveHandler(ImageUpdatedEvent, value); } } public static readonly DependencyProperty MyImageSourceProperty = DependencyProperty.Register( "MyImageSource", typeof(ImageSource), typeof(MyImage), new PropertyMetadata(null, new PropertyChangedCallback(OnMyImageSourceChanged))); public ImageSource MyImageSource { get { return (ImageSource)GetValue(MyImageSourceProperty); } set { Source = value; SetValue(MyImageSourceProperty, value); } } private static void OnMyImageSourceChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) { MyImage img = obj as MyImage; img.Source = args.NewValue as ImageSource; img.RaiseEvent(new RoutedEventArgs(ImageUpdatedEvent)); } } </code></pre> <p>The MyImage control has it's own image source property and an own routed event called "ImageUpdated", which will later cause the storyboard to be triggerd. I have simplified your image code:</p> <pre><code>&lt;Button Click="Button_Click" Grid.Row="0"&gt;Set Image through view model&lt;/Button&gt; &lt;local:MyImage Grid.Row="1" x:Name="pic" MyImageSource="{Binding MySource}"&gt; &lt;Image.Triggers&gt; &lt;EventTrigger RoutedEvent="local:MyImage.ImageUpdated"&gt; &lt;BeginStoryboard &gt; &lt;Storyboard &gt; &lt;DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)" From="0" To="1" Duration="0:0:1" /&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger&gt; &lt;/Image.Triggers&gt; &lt;/local:MyImage&gt; </code></pre> <p>The button sets a new value for the image source property of the bound viewmodel, which implements INotifyPropertyChanged:</p> <pre><code> private void Button_Click(object sender, RoutedEventArgs e) { int randomValue = new Random(DateTime.Now.Second).Next(0, 2); if (randomValue == 0) { _viewModel.MySource = new BitmapImage(new Uri(@"test.bmp", UriKind.Relative)); } else { _viewModel.MySource = new BitmapImage(new Uri(@"test2.bmp", UriKind.Relative)); } } </code></pre> <p>The setter in the viewmodel updates the MyImage with property changed pattern:</p> <pre><code>public ImageSource MySource { get { return _mySource; } set { _mySource = value; RaisePropertyChanged("MySource"); } } </code></pre> <p>In my example, the opacity property is animated.</p> <p>Hope this was helpful</p> <p>Jan</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload