Question

I’m new to WPF so this may be a stupid question but here it is.
I’m trying to create custom button using the XAML thing, so this is what I have:

<Button x:Class="Controls.ShinyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" Height="40" Width="150">
    <Button.Resources>
        <ResourceDictionary Source=".\Resources.xaml" />
    </Button.Resources>

    <Border Background="{StaticResource BlueGradient}" CornerRadius="5">
        <DockPanel>
            <Image x:Name="imgIcon" DockPanel.Dock="Left" Height="32" Margin="4"/>
            <TextBlock DockPanel.Dock="Right" Text ="Test" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="White" />
        </DockPanel>
    </Border>

    <Button.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF02B6FF" Offset="0" />
            <GradientStop Color="#FF0084F0" Offset="1" />
        </LinearGradientBrush>
    </Button.Background>
 </Button>

The designer understands it and it compiles without errors, but when I try to run the program and create an instance of it, I get the error:
“Content of a ContentControl must be a single element.”

My resources file is:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <LinearGradientBrush x:Key="BlueGradient">
        <GradientStop Offset="0" Color="#FF02B6FF"/>
        <!-- (2, 182, 255)-->
        <GradientStop Offset="1" Color="#FF0084F0"/>
        <!-- (0, 132, 240) -->
    </LinearGradientBrush>

</ResourceDictionary>

I have the DockPanel inside my Border so the button has only one child…
The “ShinyButton” class looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Controls
{
    /// <summary>
    /// Interaction logic for ShinyButton.xaml
    /// </summary>
    public partial class ShinyButton : Button
    {
        public ShinyButton()
        {
            InitializeComponent();
        }
    }
}

In the main function I add it like this:

public MainWindow()
        {
            InitializeComponent();

            ShinyButton shiny = new ShinyButton();
            this.AddChild(shiny); //This is where the exception is thrown.

        }

What am I doing wrong?

Answer 1

Just a guess and atm I am not able to test it, but try following code:

<Button.Template>
    <ControlTemplate>
        <Border Background="{StaticResource BlueGradient}" CornerRadius="5">
            <DockPanel>
                <Image x:Name="imgIcon" DockPanel.Dock="Left" Height="32" Margin="4"/>
                <TextBlock DockPanel.Dock="Right" Text ="Test" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="White" />
            </DockPanel>
        </Border>
    </ControlTemplate>
</Button.Template>

EDIT: Ok next try:

Instead of adding your ShinyButton to the Window (remove this.AddChild(shiny)), try adding your ShinyButton to the Grid by adding this code:

NameOfGrid.Children.Add(shiny);

The reason of this error is that your Window just can have one child and I bet in your case there is already a Grid as this child.