I customized a ribbonbutton, but only blank white window showing

Question

I am trying to customize a ribbon button.

I have drawn two ellipses with an arrow pointing downwards. I've put this in Windows resources so that I can use this style throughout the project by referencing it by its key name "RibbonButtonControlTemplateTest". However, when I execute the code below all I see displayed is a blank white window, why?

<Window x:Class="WpfApplication5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    xmlns:local="clr-namespace:WpfApplication5"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <ControlTemplate x:Key="RibbonButtonControlTemplateTest" TargetType="{x:Type RibbonButton}">
        <Grid>
            <Ellipse>
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Green"/>
                        <GradientStop Offset="0.5" Color="White"/>
                        <GradientStop Offset="1" Color="Green"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="10">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Offset="0" Color="Transparent"/>
                        <GradientStop Offset="0.5" Color="White"/>
                        <GradientStop Offset="1" Color="Transparent"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <ed:BlockArrow HorizontalAlignment="Stretch" Height="Auto" Margin="28.212,26.557,29.404,19.757" Orientation="Down" Width="Auto">
                <ed:BlockArrow.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Green"/>
                        <GradientStop Offset="0.5" Color="White"/>
                        <GradientStop Offset="1" Color="Green"/>
                    </LinearGradientBrush>
                </ed:BlockArrow.Fill>
            </ed:BlockArrow>
        </Grid>
    </ControlTemplate>
</Window.Resources>

<Grid>
    <Grid x:Name="gridLeft" HorizontalAlignment="Left" Width="253.714">
        <RibbonButton x:Name="ribbonButton" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"
                      Content="{StaticResource RibbonButtonControlTemplateTest}">
        </RibbonButton>
    </Grid>
    <Grid x:Name="gridRight" HorizontalAlignment="Right" Width="253.714">
    </Grid>

</Grid>

Answer 1

You use content instead template. Try to change this code:

<RibbonButton x:Name="ribbonButton" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"
                      Content="{StaticResource RibbonButtonControlTemplateTest}">
        </RibbonButton>

To:

<RibbonButton x:Name="ribbonButton" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"
                      Template="{StaticResource RibbonButtonControlTemplateTest}">
        </RibbonButton>