Created
December 4, 2020 00:36
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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