Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RadioButtons: Wrap custom ItemTemplate in a RadioButton if required #3194

Conversation

Felix-Dev
Copy link
Contributor

@Felix-Dev Felix-Dev commented Aug 25, 2020

Description

This PR fixes an issue where a custom ItemTemplate specified for the RadioButtons control would not wrap that template in a RadioButton if it wasn't a RadioButton. This made the RadioButtons control basically unusuable if developers did not explicitly specify a RadioButton as the root of the ItemTemplate (no (mutually-exclusive) selection was possible).

We now wrap the ItemTemplate in a RadioButton if it isn't already a RadioButton. If the user set a RadioButton as the root of the ItemTemplate we take it as is and perform no wrapping. This will make sure user-provided RadioButton customizations won't be lost.

@kikisaints As part of #3159 providing better documention for the RadioButton customization aspect was identified as a work item. My curent thinking is to create a new sub-section titled "Customizing the radio button appearance" here. This section will show you can explicitly set a RadioButton as the root of the ItemTemplate to change its appearance:

public ObservableCollection<string> Options { get; set; } = new ObservableCollection<string>() { "Option 1", "Option 2" };
<muxc:RadioButtons ItemsSource="{x:Bind Options}" SelectedIndex="0">
    <muxc:RadioButtons.ItemTemplate>
        <DataTemplate>
            <RadioButton Foreground="Blue">
                <TextBlock Text="{Binding}"/>
            </RadioButton>
        </DataTemplate>
    </muxc:RadioButtons.ItemTemplate>
</muxc:RadioButtons>

image

I would also like to create a reference on the RadioButtons API documentation page to the RadioButton control overview page as can be seen for other controls like the TabView (see the green info block).

I would work on this once this PR has been merged and would tag you then so you can give further input/review. For now, you can already comment on how you view the overview I gave above, if you like.

Also @ranjeshj FYI.

Motivation and Context

Fixes #3159.

How Has This Been Tested?

Tested visually and added API test.

Screenshots:

The following C# and XAML markup gives us the UI shown below:

public ObservableCollection<string> Options { get; set; } = new ObservableCollection<string>() { "Option 1", "Option 2" };
<muxc:RadioButtons ItemsSource="{x:Bind Options}" SelectedIndex="0">
    <muxc:RadioButtons.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </muxc:RadioButtons.ItemTemplate>
</muxc:RadioButtons>

image

@msft-github-bot msft-github-bot added the needs-triage Issue needs to be triaged by the area owners label Aug 25, 2020
@llongley llongley requested a review from teaP August 25, 2020 21:19
@teaP teaP requested a review from ojhad August 25, 2020 22:22
@YuliKl YuliKl added area-RadioButtons team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Aug 25, 2020
@StephenLPeters
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@StephenLPeters
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@StephenLPeters
Copy link
Contributor

@Felix-Dev The pipeline fix just went in, could you please merge master into this PR?

@Felix-Dev
Copy link
Contributor Author

@StephenLPeters Merged with master.

@StephenLPeters
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

Copy link
Contributor

@StephenLPeters StephenLPeters left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@StephenLPeters StephenLPeters merged commit 8730c31 into microsoft:master Sep 8, 2020
@Felix-Dev Felix-Dev deleted the user/Felix-Dev/radiobuttons-itemtemplate-issue-fix branch September 8, 2020 23:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-RadioButtons team-Controls Issue for the Controls team
Projects
None yet
4 participants