title: Custom button with property as StaticResource
body: <p>I am trying to achieve the following thing: use an svg image into a custom button.</p>
  
  <p>In order to do this I created a Custom button:</p>
  
  <pre><code>public class MainButton : Button
  {
      static MainButton()
      {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MainButton),
            new FrameworkPropertyMetadata(typeof(MainButton)));
      }
  
      public string Text
      {
          get { return (string)GetValue(TextProperty); }
          set { SetValue(TextProperty, value); }
      }
  
      public static readonly DependencyProperty TextProperty =
           DependencyProperty.Register("Text", typeof(string), typeof(MainButton),
               new UIPropertyMetadata(""));
  
      public object Image
      {
          get { return (object)GetValue(ImageProperty); }
          set { SetValue(ImageProperty, value); }
      }
  
      public static readonly DependencyProperty ImageProperty =
          DependencyProperty.Register("Image", typeof(object), typeof(MainButton),
              new UIPropertyMetadata(""));
  }
  </code></pre>
  
  <p>I took a svg file, opened it in inkscape and saved it as xaml file.</p>
  
  <p>I opened Themes.xaml and added the created xaml image as a ControlTemplate</p>
  
  <pre><code>&lt;ControlTemplate x:Key="Home"&gt;
      &lt;Viewbox Stretch="Uniform"&gt;
          &lt;Canvas .....
          &lt;/Canvas&gt;
      &lt;/Viewbox&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>And the button style is:</p>
  
  <pre><code>Style TargetType="{x:Type local:MainButton}"&gt;
      &lt;Setter Property="Template"&gt;
        &lt;Setter.Value&gt;
          &lt;ControlTemplate TargetType="{x:Type local:MainButton}"&gt;
            &lt;Canvas x:Name="sp" Width="80" 
                      Height="80"&gt;
  
              &lt;StackPanel Canvas.Top="12"
                    Canvas.Left="0"
                    Canvas.ZIndex="2"
                    Width="80"&gt;
  
                  &lt;ContentControl x:Name="Img" Template="{StaticResource Home}" /&gt;
  
              &lt;/StackPanel&gt;
  
              &lt;StackPanel x:Name="spText" Canvas.Top="45"
                             Canvas.Left="1" 
                             Canvas.ZIndex="1"
                             Width="80"&gt;
  
                  &lt;TextBlock x:Name="Txt" Text="{Binding Path=(local:MainButton.Text),
                                  RelativeSource ={RelativeSource FindAncestor,
                                  AncestorType ={x:Type Button}}}"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              Foreground="White"
                              FontSize="14"/&gt;
              &lt;/StackPanel&gt;
  ...
  </code></pre>
  
  <p>As you can see I have hardcoded the StaticResource name <code>&lt;ContentControl x:Name="Img" Template="{StaticResource Home}" /&gt;</code></p>
  
  <p>I want to be able to have a binding with property Image on this Template, something like</p>
  
  <pre><code>&lt;ContentControl x:Name="Img" Template="{StaticResource {???Binding Image???}}" /&gt;
  </code></pre>
  
  <p>So that I can set the Image property of the button with the name of the StaticResource I want.</p>
  
  <p>For example, having beside "Home" image, another one "Back" I would have two buttons in MainWindow declared like this:</p>
  
  <pre><code>&lt;MyControls:MainButton Text="Go Home!" Image="Home" /&gt;
  &lt;MyControls:MainButton Text="Go Back!" Image="Back" /&gt;
  </code></pre>
  
  <p>Any advice is kindly taken. Thank you for your time. </p>