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.

Sign up for GitHub

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

Jump to bottom

RadioButtons cleanup #500

Merged
merged 6 commits into from
Jul 14, 2020
Merged

RadioButtons cleanup #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
72f2468
Clarify the distinction between RadioButton and RadioButtons by movin…
stmoy Jul 11, 2020
fd66290
Remove unnecessary RelativePanel, update wording in json file
stmoy Jul 11, 2020
c689e30
Clean up RadioButton sample.
stmoy Jul 11, 2020
dd377ba
Adding RadioButtons icon to differentiate from RadioButton
stmoy Jul 11, 2020
75cc1f2
Add sample code substitution for SelectedIndex on RadioButtons page.
stmoy Jul 11, 2020
f959ec1
Responding to PR feedback
stmoy Jul 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added XamlControlsGallery/Assets/RadioButtons.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 16 additions & 26 deletions XamlControlsGallery/ControlPages/RadioButtonPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,25 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<RelativePanel HorizontalAlignment="Left">
<local:ControlExample x:Name="Example1"
HeaderText="A group of radio buttons implicitly grouped by their parent container.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel>
<!-- A RadioButton group. -->
<TextBlock Text="Options:"/>
<RadioButton x:Name="Option1RadioButton" Content="Option 1" Checked="Option1RadioButton_Checked" />
<RadioButton x:Name="Option2RadioButton" Content="Option 2" Checked="Option2RadioButton_Checked" />
<RadioButton x:Name="Option3RadioButton" Content="Option 3" Checked="Option3RadioButton_Checked" />
</StackPanel>
<TextBlock x:Name="Control1Output" Text="Select an option." Style="{ThemeResource BodyTextBlockStyle}"
VerticalAlignment="Center" Grid.Column="1" Margin="8,0"/>
</Grid>
<StackPanel>
<local:ControlExample HeaderText="A group of RadioButton controls in a RadioButtons group.">
<StackPanel>
<muxc:RadioButtons Header="Options:">
<RadioButton Content="Option 1" Checked="RadioButton_Checked" />
<RadioButton Content="Option 2" Checked="RadioButton_Checked" />
<RadioButton Content="Option 3" Checked="RadioButton_Checked" />
</muxc:RadioButtons>
<TextBlock x:Name="Control1Output" Text="Select an option." Style="{ThemeResource BodyTextBlockStyle}" Margin="0,8" />
</StackPanel>
<local:ControlExample.Xaml>
<x:String xml:space="preserve">
&lt;StackPanel&gt;
&lt;TextBlock Text="Options:"/&gt;
&lt;RadioButton x:Name="Option1RadioButton" Content="Option 1" Checked="Option1RadioButton_Checked"/&gt;
&lt;RadioButton x:Name="Option2RadioButton" Content="Option 2" Checked="Option2RadioButton_Checked"/&gt;
&lt;RadioButton x:Name="Option3RadioButton" Content="Option 3" Checked="Option3RadioButton_Checked"/&gt;
&lt;/StackPanel&gt;
&lt;muxc:RadioButtons Header="Options:"&gt;
&lt;RadioButton Content="Option 1" Checked="RadioButton_Checked"/&gt;
&lt;RadioButton Content="Option 2" Checked="RadioButton_Checked"/&gt;
&lt;RadioButton Content="Option 3" Checked="RadioButton_Checked"/&gt;
&lt;/muxc:RadioButtons&gt;
</x:String>
</local:ControlExample.Xaml>
</local:ControlExample>

</RelativePanel>
</StackPanel>
</Page>
14 changes: 2 additions & 12 deletions XamlControlsGallery/ControlPages/RadioButtonPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,9 @@ public RadioButtonPage()
this.InitializeComponent();
}

private void Option1RadioButton_Checked(object sender, RoutedEventArgs e)
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
Control1Output.Text = "You selected option 1.";
}

private void Option2RadioButton_Checked(object sender, RoutedEventArgs e)
{
Control1Output.Text = "You selected option 2.";
}

private void Option3RadioButton_Checked(object sender, RoutedEventArgs e)
{
Control1Output.Text = "You selected option 3.";
Control1Output.Text = string.Format("You selected {0}", (sender as RadioButton).Content.ToString());
}
}
}
34 changes: 18 additions & 16 deletions XamlControlsGallery/ControlPages/RadioButtonsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<RelativePanel HorizontalAlignment="Left">
<StackPanel>
<local:ControlExample HeaderText="Two RadioButtons controls with strings as options.">
<StackPanel>
<muxc:RadioButtons MaxColumns="4" Header="Background" SelectedIndex="1" SelectionChanged="BackgroundColor_SelectionChanged">
<muxc:RadioButtons x:Name="BackgroundRadioButtons" MaxColumns="3" Header="Background" SelectedIndex="0" SelectionChanged="BackgroundColor_SelectionChanged">
<x:String>Green</x:String>
<x:String>Yellow</x:String>
<x:String>White</x:String>
</muxc:RadioButtons>
<muxc:RadioButtons MaxColumns="4" Header="Border" SelectedIndex="2" SelectionChanged="BorderBrush_SelectionChanged">
<muxc:RadioButtons x:Name="BorderRadioButtons" MaxColumns="3" Header="Border" SelectedIndex="1" SelectionChanged="BorderBrush_SelectionChanged">
<x:String>Green</x:String>
<x:String>Yellow</x:String>
<x:String>White</x:String>
Expand All @@ -37,20 +37,22 @@
</StackPanel>
<local:ControlExample.Xaml>
<x:String xml:space="preserve">
&lt;StackPanel&gt;
&lt;muxc:RadioButtons MaxColumns="4" Header="Background" SelectedIndex="1" SelectionChanged="BackgroundColor_SelectionChanged"&gt;
&lt;x:String&gt;Green&lt;/x:String&gt;
&lt;x:String&gt;Yellow&lt;/x:String&gt;
&lt;x:String&gt;White&lt;/x:String&gt;
&lt;/muxc:RadioButtons&gt;
&lt;muxc:RadioButtons MaxColumns="4" Header="Border" SelectedIndex="2" SelectionChanged="BorderBrush_SelectionChanged"&gt;
&lt;x:String&gt;Green&lt;/x:String&gt;
&lt;x:String&gt;Yellow&lt;/x:String&gt;
&lt;x:String&gt;White&lt;/x:String&gt;
&lt;/muxc:RadioButtons&gt;
&lt;/StackPanel&gt;
&lt;muxc:RadioButtons x:Name="BackgroundRadioButtons" SelectedIndex="$(BackgroundRadioButtonsSubstitution)" MaxColumns="3" Header="Background" SelectionChanged="BackgroundColor_SelectionChanged"&gt;
&lt;x:String&gt;Green&lt;/x:String&gt;
&lt;x:String&gt;Yellow&lt;/x:String&gt;
&lt;x:String&gt;White&lt;/x:String&gt;
&lt;/muxc:RadioButtons&gt;
&lt;muxc:RadioButtons x:Name="BorderRadioButtons" SelectedIndex="$(BorderRadioButtonsSubstitution)" MaxColumns="3" Header="Border" SelectionChanged="BorderBrush_SelectionChanged"&gt;
&lt;x:String&gt;Green&lt;/x:String&gt;
&lt;x:String&gt;Yellow&lt;/x:String&gt;
&lt;x:String&gt;White&lt;/x:String&gt;
&lt;/muxc:RadioButtons&gt;
</x:String>
</local:ControlExample.Xaml>
<local:ControlExample.Substitutions>
<local:ControlExampleSubstitution Key="BackgroundRadioButtonsSubstitution" Value="{x:Bind BackgroundRadioButtons.SelectedIndex, Mode=OneWay}" />
<local:ControlExampleSubstitution Key="BorderRadioButtonsSubstitution" Value="{x:Bind BorderRadioButtons.SelectedIndex, Mode=OneWay}" />
</local:ControlExample.Substitutions>
</local:ControlExample>
</RelativePanel>
</StackPanel>
</Page>
58 changes: 28 additions & 30 deletions XamlControlsGallery/DataModel/ControlInfoData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,12 +894,11 @@
{
"UniqueId": "RadioButton",
"Title": "RadioButton",
"Subtitle": "A control that allows a user to select a single option from a group of options. When radio buttons are grouped together they are mutually exclusive.",
"Subtitle": "A control that allows a user to select a single option from a group of options.",
"ImagePath": "ms-appx:///Assets/RadioButton.png",
"Description": "Use RadioButtons to let a user choose between mutually exclusive, related options.",
"Description": "Use RadioButtons to let a user choose between mutually exclusive, related options. Generally contained within a RadioButtons group control.",
stmoy marked this conversation as resolved.
Show resolved Hide resolved
"Content": "<p>Look at the <i>RadioButtonPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
"IsNew": false,
"IsPreview": true,
"IsUpdated": true,
"Docs": [
{
"Title": "RadioButton - API",
Expand All @@ -917,32 +916,6 @@
"ToggleButton"
]
},
{
"UniqueId": "RadioButtons",
"Title": "RadioButtons",
"Subtitle": "A control that allows a user to select a single option from a group of options. The RadioButtons control makes the available options mutually exclusive",
"ImagePath": "ms-appx:///Assets/RadioButton.png",
"Description": "Use RadioButtons to let a user choose between mutually exclusive, related options.",
"Content": "<p>Look at the <i>RadioButtonsPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
"IsNew": false,
"IsPreview": true,
"Docs": [
{
"Title": "RadioButtons - API",
"Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.radiobuttons?view=winui-2.4"
},
{
"Title": "Guidelines",
"Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/radio-button"
}
],
"RelatedControls": [
"CheckBox",
"RadioButton",
"ToggleSwitch",
"ToggleButton"
]
},
{
"UniqueId": "RatingControl",
"Title": "RatingControl",
Expand Down Expand Up @@ -1376,6 +1349,31 @@
"VariableSizedWrapGrid",
"RelativePanel"
]
},
{
"UniqueId": "RadioButtons",
"Title": "RadioButtons",
"Subtitle": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.",
"ImagePath": "ms-appx:///Assets/RadioButtons.png",
"Description": "A control that displays a group of mutually exclusive options with keyboarding and accessibility support.",
"Content": "<p>Look at the <i>RadioButtonsPage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
"IsNew": true,
"Docs": [
{
"Title": "RadioButtons - API",
"Uri": "https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.radiobuttons?view=winui-2.4"
},
{
"Title": "Guidelines",
"Uri": "https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/radio-button"
}
],
"RelatedControls": [
"CheckBox",
"RadioButton",
"ToggleSwitch",
"ToggleButton"
]
},
{
"UniqueId": "RelativePanel",
Expand Down
1 change: 1 addition & 0 deletions XamlControlsGallery/XamlControlsGallery.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
</Content>
<Content Include="Assets\LottieLogo1.png" />
<Content Include="Assets\NumberBox.png" />
<Content Include="Assets\RadioButtons.png" />
<Content Include="Assets\SampleMedia\cliff.jpg" />
<Content Include="Assets\SampleMedia\fishes.wmv" />
<Content Include="Assets\SampleMedia\grapes.jpg" />
Expand Down