display image using content control

Question

I am reading a book on WPF as I'm trying to learn it.

There is an example of a button below. This makes sense apart from one line, below.

<ContentControl Margin=”2” Content=”{TemplateBinding Content}”/>   

The book says the below,

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.

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.

My drawing

<Polygon x:Key="playTriangle" Stroke="Black" Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="40"/>
            <Point X="40" Y="25"/>
            <Point X="10" Y="10"/>
        </Polygon.Points>
    </Polygon>

Book Example

<ControlTemplate x:Key="buttonTemplatePlay" TargetType="{x:Type RibbonButton}">
        <Grid Height="60" Width ="60">
            <Ellipse x:Name="outerCircle">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Blue"/>
                        <GradientStop Offset="1" Color="Red"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="5">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="White"/>
                        <GradientStop Offset="1" Color="Transparent"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Viewbox>
                <ContentControl Margin="5" Content="{TemplateBinding Content}"/>
            </Viewbox>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="outerCircle" Property="Fill" Value="Green"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Answer 1

You should set the polygon (or any other content for that matter) as the button's content:

<RibbonButton>
    <RibbonButton.Content>
        <Polygon Stroke="Black" Fill="Black">
            <Polygon.Points>
                <Point X="10" Y="40"/>
                <Point X="40" Y="25"/>
                <Point X="10" Y="10"/>
            </Polygon.Points>
        </Polygon>
    </RibbonButton.Content>
</RibbonButton>

Note that I removed the x:Key="playTriangle" attribute

If the polygon is defined in a resource dictionary, you should reference it using StaticResourceExtension instead:

<RibbonButton Content={StaticResource ResourceKey=playTriangle}" />

One way or another, the key point is that you should use RibbonButton.Content property to set content of the button.