Microsoft-ui-xaml: Bug: RadioButtons clips items to size of first item

[chrisglein]

Describe the bug
RadioButtons is built on ListView. And this appears to be doing a Grid-like thing where it doesn’t know how big each item should be so it measures the first item and then uses that as the grid size for all the following items. A classic non-uniform layout problem.

Steps to reproduce the bug

    <controls:RadioButtons ItemsSource="{x:Bind Items}">
        <controls:RadioButtons.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </controls:RadioButtons.ItemTemplate>
    </controls:RadioButtons>

    public sealed partial class MainPage : Page
    {
        public List<string> Items = new List<string>(new string[] { "Light theme", "Dark theme", "Use my Windows Thingy" });

Expected behavior
Text is not clipped

Screenshots

(Note third item is clipped)

Additional context
The problem is the going to be in the layout used here:

It doesn’t appear that RadioButtons allows you to set ListView’s ItemsPanel, which could provide a workaround. And RadioButtons isn’t using a layout that handles variable sized items.
A hacky workaround would be to put a MinWidth on your TextBlock so that the first item uses up more space. But the real fix should be to change the layout used by RadioButtons.

[Felix-Dev]

Any updates on this? Experiencing the exact same problem.

[jevansaks]

@stephenlpeters is picking up RadioButtons and can look into this as part of that work.