RadioButtons: Custom ItemTemplate is not automatically prefaced by a RadioButton if it doesn't specify one itself as its root element

Describe the bug According to https://github.com/microsoft/microsoft-ui-xaml/issues/333#issuecomment-468839517 by @kikisaints, a custom ItemTemplate for the RadioButtons control will be prefaced by a RadioButton icon:

Meaning you can customize your data template in any way you like, and get that exact definition represented in the RadioButton group, but prefaced with a RadioButton icon.

Thus, if we have the following XAML:

<muxc:RadioButtons Header="Test Group"
                   ItemsSource="{x:Bind Options}">
    <muxc:RadioButtons.ItemTemplate>
        <DataTemplate x:DataType="local:OptionDataModel">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{x:Bind Label}" Margin="5"/>
                <HyperlinkButton Content="My Link" Margin="5"/>
                <Rectangle Fill="Orange" Width="10" Height="10" Margin="5"/>
            </StackPanel>
        </DataTemplate>
    </muxc:RadioButtons.ItemTemplate>
</muxc:RadioButtons>

and code-behind like this:

public class OptionDataModel
{
    public string Label { get; set; }
}

public IList<OptionDataModel> Options { get; set; }

public MainPage()
{
    this.InitializeComponent();

    Options = new List<OptionDataModel>
    {
        new OptionDataModel() { Label = "Item 1" },
        new OptionDataModel() { Label = "Item 2" },
        new OptionDataModel() { Label = "Item 3" },
        new OptionDataModel() { Label = "Item 4" },
        new OptionDataModel() { Label = "Item 5" },
    };
}

The expected UI is this:

But the actual UI we get is this:

As you can see, there are no RadioButton icons, plus our items are no longer represented as RadioButtons internally, thus we cannot select our options in a mutually exclusive way (actually, we cannot select them at all).

Version Info

NuGet package version: Newest WinUI 2.5 preview.

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context I would like to fix this.

[Felix-Dev]

@ranjeshj Yeah, I like the idea that we will implicitly create a RadioButton to wrap around the ItemTemplate (if it isn’t already a RadioButton), yet if you need to customize the RadioButton appearance, then you can just create an ItemTemplate with an explicit RadioButton as its root.

So, to summarize: What is to do here is to

• provide the implicit wrapping functionality for the ItemTemplate if not already a RadioButton and
• improve the documentation to show how the RadioButton can be customized.

I would like to work on both of these items.

[ranjeshj]

Sorry missed the ping… I’m also thinking there likely isn’t much to do here.

If the root of the template is not a RadioButton, we could create one automatically for you which will fix this.

The issue is that if RadioButtons automatically created a RadioButton for you, there is no explicit property to style that RadioButton. You could add a style to RadioButtons.ResourceDictionary. Alternatively you could provide your own RadioButton in the template and update its properties directly. This part probably just needs better documentation.