Create user control that receives content from user code/xaml (UWP)

Question

I have a user control which hosts a styled toggle button. I want to use this control and pass the content to the user control as follows:

User control:

<UserControl
    x:Class="TouchApp.UI.Views.DieselMotor.DieselToggle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TouchApp.UI.Views.DieselMotor"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Name="DieselButton"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <UserControl.Resources>
        <Style x:Key="DieselToggleButton"  TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid x:Name="RootGrid">
                            <Ellipse 
                                Margin="6,-49,0,0"
                                Width="340"
                                Height="340"
                                Stroke="Black"
                                StrokeThickness="2">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="{Binding Path=BackColor, ElementName=DieselButton}"/>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter 
                                Content="{TemplateBinding Content}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ToggleButton 
        Style="{StaticResource DieselToggleButton}">
        <ContentControl Content="{TemplateBinding Content}"/>
    </ToggleButton>
</UserControl>

I hoped to use the user control as follows:

<local:DieselToggle
    BackColor="Aqua"
    Command="{Binding SteeringCommand}" CommandParameter="{Binding Path=IsChecked, RelativeSource={RelativeSource Self}}">
    <StackPanel>
        <Image Source="../../../Resources/Diesel/Actuator_off.png"/>
        <TextBlock 
            Style="{StaticResource MainButtonText}"
            HorizontalTextAlignment="Center"
            x:Uid="buttonSteeringText"/>
    </StackPanel>
</local:DieselToggle>

But the result is that the content is just shown, but it's not "passed through" to the toggle button.

Is there a way to accomplish this?

Answer 1

I expect a compilation error in your case. Maybe use Binding will fix it

Style="{StaticResource DieselToggleButton}">
    <ContentControl Content="{Binding Content}"/>
</ToggleButton>