title: FlipView Datatemplate fails to bind on custom UserControl
body: <h1>TL;DR</h1>
  <p>Using MahApps' <code>FlipView</code> with a custom <code>DataTemplate</code>, binding fails to update when using a custom UserControl.</p>
  <h1>Issue</h1>
  <p>Trying to use MahApps's FlipView to host a custom UserControl for each view. For testing purposes, my UserControl looks like this (testing this on <a href="https://github.com/MahApps/MahApps.Metro/tree/develop/src/MahApps.Metro.Samples/MahApps.Metro.Demo" rel="nofollow noreferrer">MetroDemo sample project</a>)</p>
  <p><strong>XAML</strong></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;UserControl x:Class=&quot;MetroDemo.ExampleViews.CustomImageControl&quot;
               xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
               xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; 
               xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; 
               xmlns:local=&quot;clr-namespace:MetroDemo.ExampleViews&quot;
               mc:Ignorable=&quot;d&quot; 
               d:DesignHeight=&quot;450&quot; d:DesignWidth=&quot;800&quot;&gt;
      &lt;Grid x:Name=&quot;ControlContainer&quot;&gt;
          &lt;Image Source=&quot;{Binding SourceImage}&quot; Stretch=&quot;Fill&quot;/&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  <p><strong>Code Behind</strong></p>
  <pre class="lang-cs prettyprint-override"><code>namespace MetroDemo.ExampleViews
  {
      /// &lt;summary&gt;
      /// Interaction logic for CustomImageControl.xaml
      /// &lt;/summary&gt;
      public partial class CustomImageControl : UserControl
      {
          public ImageSource SourceImage
          {
              get =&gt; (ImageSource)this.GetValue(SourceImageProperty);
              set
              {
                  this.SetValue(SourceImageProperty, value);
              }
          }
  
          public static readonly DependencyProperty SourceImageProperty = DependencyProperty.Register(
            nameof(SourceImage),
            typeof(ImageSource),
            typeof(CustomImageControl),
            new PropertyMetadata(OnSourceImageChanged));
  
          private static void OnSourceImageChanged(DependencyObject data, DependencyPropertyChangedEventArgs args)
          {
              var control = (CustomImageControl)data;
              if (control is null || !(args.NewValue is ImageSource image))
                  return;
  
              control.SourceImage = image;
          }
  
          public CustomImageControl()
          {
              InitializeComponent();
              this.ControlContainer.DataContext = this;
          }
      }
  }
  </code></pre>
  <p>Then, I'm using this custom user control within a <code>DataTemplate</code> that FlipView uses, replacing <a href="https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/OtherExamples.xaml#L27-L29" rel="nofollow noreferrer">this bit here</a> for:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;DataTemplate x:Key=&quot;ImageDataTemplate&quot; x:Shared=&quot;False&quot;&gt;
      &lt;local:CustomImageControl SourceImage=&quot;{Binding Mode=OneWay, FallbackValue={x:Static DependencyProperty.UnsetValue}, Converter={mah:NullToUnsetValueConverter}}&quot; /&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  <p>When flipping to the next view, it animates but for some reason it keeps the same first bound image.
  It seems that the binding is failing somewhere but I can't see where. Any help is highly appreciated!</p>