Skip to content

Instantly share code, notes, and snippets.

@michael-hawker
Created December 4, 2020 00:36
Show Gist options
  • Save michael-hawker/06bda503efa14fbb2a84896643c21959 to your computer and use it in GitHub Desktop.
Save michael-hawker/06bda503efa14fbb2a84896643c21959 to your computer and use it in GitHub Desktop.
Example test of trying to re-style a `RadioButtons` control to look like a Segmented Control.
<!-- See Reference Issues:
https://github.com/microsoft/microsoft-ui-xaml/issues/2310
https://github.com/microsoft/microsoft-ui-xaml/issues/3759
-->
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="SegmentedToggleButtonStyle" BasedOn="{StaticResource DefaultToggleButtonStyle}" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Padding" Value="12,0,12,0"/>
</Style>
<DataTemplate x:Key="SegmentedRadioButtonsItemTemplate">
<ToggleButton Content="{Binding}"
Style="{StaticResource SegmentedToggleButtonStyle}"/> <!-- TODO: Bind to SelectedItem of parent? -->
</DataTemplate>
<Style x:Key="SegmentedRadioButtons" TargetType="muxc:RadioButtons">
<Setter Property="MaxColumns" Value="100"/> <!-- Workaround for Layout not being exposed: https://github.com/microsoft/microsoft-ui-xaml/issues/2084 -->
<Setter Property="ItemTemplate" Value="{StaticResource SegmentedRadioButtonsItemTemplate}"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="SelectedIndex" Value="0"/>
</Style>
</Page.Resources>
<!-- Had issues in XAML Studio for some reason copying and overriding the RadioButtons style, so used border here
to work around https://github.com/microsoft/microsoft-ui-xaml/issues/3247 -->
<Border BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" BorderThickness="{ThemeResource RadioButtonBorderThemeThickness}"
CornerRadius="16"
Padding="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<muxc:RadioButtons Style="{StaticResource SegmentedRadioButtons}">
<muxc:RadioButtons.Resources>
<x:Double x:Key="RadioButtonsColumnSpacing">0</x:Double>
</muxc:RadioButtons.Resources>
<x:String>None</x:String>
<x:String>Some</x:String>
<x:String>All</x:String>
</muxc:RadioButtons>
</Border>
</Page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment