title: display image using content control
body: <p>I am reading a book on WPF as I'm trying to learn it.</p>
  
  <p>There is an example of a button below. This makes sense apart from one line, below.</p>
  
  <pre><code>&lt;ContentControl Margin=”2” Content=”{TemplateBinding Content}”/&gt;   
  </code></pre>
  
  <p>The book says the below,</p>
  
  <pre><code>Figure 14.9 shows what two Buttons look like with this new control template applied.
  One Button has simple “OK” text content, and the other has an Image. In both cases, the content is reflected in the new visuals as expected.
  </code></pre>
  
  <p>However I can't see how to get an image to show on the button? I have drawn a triangle below that I want to be in the centre of the button but I can't get it to appear.</p>
  
  <p><strong>My drawing</strong></p>
  
  <pre><code>&lt;Polygon x:Key="playTriangle" Stroke="Black" Fill="Black"&gt;
          &lt;Polygon.Points&gt;
              &lt;Point X="10" Y="40"/&gt;
              &lt;Point X="40" Y="25"/&gt;
              &lt;Point X="10" Y="10"/&gt;
          &lt;/Polygon.Points&gt;
      &lt;/Polygon&gt;
  </code></pre>
  
  <p><strong>Book Example</strong></p>
  
  <pre><code>&lt;ControlTemplate x:Key="buttonTemplatePlay" TargetType="{x:Type RibbonButton}"&gt;
          &lt;Grid Height="60" Width ="60"&gt;
              &lt;Ellipse x:Name="outerCircle"&gt;
                  &lt;Ellipse.Fill&gt;
                      &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                          &lt;GradientStop Offset="0" Color="Blue"/&gt;
                          &lt;GradientStop Offset="1" Color="Red"/&gt;
                      &lt;/LinearGradientBrush&gt;
                  &lt;/Ellipse.Fill&gt;
              &lt;/Ellipse&gt;
              &lt;Ellipse Margin="5"&gt;
                  &lt;Ellipse.Fill&gt;
                      &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                          &lt;GradientStop Offset="0" Color="White"/&gt;
                          &lt;GradientStop Offset="1" Color="Transparent"/&gt;
                      &lt;/LinearGradientBrush&gt;
                  &lt;/Ellipse.Fill&gt;
              &lt;/Ellipse&gt;
              &lt;Viewbox&gt;
                  &lt;ContentControl Margin="5" Content="{TemplateBinding Content}"/&gt;
              &lt;/Viewbox&gt;
          &lt;/Grid&gt;
          &lt;ControlTemplate.Triggers&gt;
              &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                  &lt;Setter TargetName="outerCircle" Property="Fill" Value="Green"/&gt;
              &lt;/Trigger&gt;
              &lt;Trigger Property="IsPressed" Value="True"&gt;
                  &lt;Setter Property="RenderTransform"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ScaleTransform ScaleX=".9" ScaleY=".9"/&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
                  &lt;Setter Property="RenderTransformOrigin" Value=".5,.5"/&gt;
              &lt;/Trigger&gt;
          &lt;/ControlTemplate.Triggers&gt;
      &lt;/ControlTemplate&gt;
  </code></pre>