Skip to content

Commit

Permalink
Merge pull request #859 from unoplatform/dev/xygu/20220929/toggleswit…
Browse files Browse the repository at this point in the history 
…ch-thumb-align
  • Loading branch information
@Xiaoy312
Xiaoy312 committed Sep 30, 2022
2 parents aac7e44 + 1b36573 commit b2677ea
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 74 deletions.
143 changes: 71 additions & 72 deletions src/library/Uno.Material/Styles/Controls/v2/ToggleSwitch.xaml
View file
Expand Up @@ -23,19 +23,21 @@
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- Toggle On -->
<Thickness x:Key="MaterialToggleSwitchHeaderMargin">0,0,12,0</Thickness>

<!-- Toggle On -->
<StaticResource x:Key="MaterialToggleSwitchOnButtonBrush"
ResourceKey="PrimaryBrush" />
<StaticResource x:Key="MaterialToggleSwitchOnBackgroundBrush"
ResourceKey="PrimaryVariantLightBrush" />

<!-- Toggle Off -->
<!-- Toggle Off -->
<StaticResource x:Key="MaterialToggleSwitchOffButtonBrush"
ResourceKey="OnPrimaryBrush" />
<StaticResource x:Key="MaterialToggleSwitchOffBackgroundBrush"
ResourceKey="OnSurfaceLowBrush" />

<!-- Toggle On Disabled -->
<!-- Toggle On Disabled -->
<StaticResource x:Key="MaterialToggleSwitchOnLowButtonBrush"
ResourceKey="OnSurfaceSelectedBrush" />
<StaticResource x:Key="MaterialToggleSwitchOnLowBackgroundBrush"
Expand All @@ -61,7 +63,7 @@
<Setter Property="Background"
Value="{StaticResource MaterialToggleSwitchOnBackgroundBrush}" />

<!--Start: Body Small Typo-->
<!-- Start: Body Small Typo -->
<Setter Property="FontFamily"
Value="{StaticResource MaterialToggleSwitchFontFamily}" />
<Setter Property="FontWeight"
Expand All @@ -70,16 +72,16 @@
Value="{StaticResource MaterialToggleSwitchFontSize}" />
<Setter Property="CharacterSpacing"
Value="{StaticResource MaterialToggleSwitchCharacterSpacing}" />
<!--End: Body Small Typo-->
<!-- End: Body Small Typo -->

<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<Setter Property="MinWidth"
Value="54" />

<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="ManipulationMode"
Expand Down Expand Up @@ -362,10 +364,9 @@
</VisualState>
</VisualStateGroup>

<!-- No notion of OnContent and OffContent for Material -->
<VisualStateGroup x:Name="ContentStates">
<!-- No notion of OnContent and OffContent for Material -->
<VisualState x:Name="OffContent" />

<VisualState x:Name="OnContent" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Expand All @@ -376,17 +377,22 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<TextBlock Foreground="{StaticResource OnSurfaceMediumBrush}"
Style="{StaticResource BodySmall}"
Text="{TemplateBinding Header}"
Margin="0,0,12,0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Visibility="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, TargetNullValue=Collapsed}" />
<ContentPresenter Grid.Column="0"
x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource OnSurfaceMediumBrush}"
FontSize="{StaticResource MaterialBodyMediumFontSize}"
FontWeight="{StaticResource MaterialBodyMediumFontWeight}"
FontFamily="{StaticResource MaterialBodyMediumFontFamily}"
Margin="{StaticResource MaterialToggleSwitchHeaderMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<Grid Grid.ColumnSpan="3"
Control.IsTemplateFocusTarget="True" />

<!-- Marker element used to compute draggable zone -->
<!-- Marker element used to compute draggable zone -->
<Rectangle Grid.Column="2"
x:Name="SwitchKnobBounds" />

Expand All @@ -413,7 +419,8 @@
Grid.Column="2"
Width="40"
Height="40"
HorizontalAlignment="Left">
HorizontalAlignment="Left"
VerticalAlignment="Center">
<Grid.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform" />
</Grid.RenderTransform>
Expand Down Expand Up @@ -485,12 +492,14 @@
Value="Left" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Foreground"
Value="{StaticResource MaterialToggleSwitchOnButtonBrush}" />

<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<Setter Property="MinWidth"
Value="70" />
Value="0" />
<Setter Property="Padding"
Value="9,0,10,0" />

Expand All @@ -505,21 +514,22 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">

<!-- The margin here is used to properly align the content with the UI switch -->
<ContentPresenter x:Name="ContentPresenter"
Margin="0,8,0,5"
VerticalAlignment="Stretch"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
<!-- The visibility is managed by the control impl via 'HeaderContentPresenter' marker -->
<ContentPresenter x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource OnBackgroundBrush}"
Visibility="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, TargetNullValue=Collapsed}" />

<!-- Do not add x:Name to BindableUiSwitch or else page will not load -->
Foreground="{StaticResource OnSurfaceMediumBrush}"
FontSize="{StaticResource MaterialBodyMediumFontSize}"
FontWeight="{StaticResource MaterialBodyMediumFontWeight}"
FontFamily="{StaticResource MaterialBodyMediumFontFamily}"
Margin="{StaticResource MaterialToggleSwitchHeaderMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<!-- note: BindableUISwitch is a native control and does not support any attached properties nor common FrameworkElement/UIElement properties -->
<BindableUISwitch Background="{TemplateBinding Foreground}"
Enabled="{TemplateBinding IsEnabled}"
IsOn="{TemplateBinding IsOn,
Mode=TwoWay}" />
IsOn="{TemplateBinding IsOn, Mode=TwoWay}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
Expand All @@ -536,12 +546,14 @@
Value="Left" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="MinHeight"
Value="25" />

<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<!-- microsoft/microsoft-ui-xaml#6157: reset min-width inherited from base style -->
<Setter Property="MinWidth"
Value="70" />
Value="0" />

<Setter Property="Template">
<Setter.Value>
Expand All @@ -559,15 +571,13 @@
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed" />

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="SwitchGrid.Visibility"
Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="ToggleStates">
<VisualState x:Name="Dragging" />

Expand Down Expand Up @@ -595,60 +605,49 @@
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- The margin here is used to properly align the content with the UI switch -->
<ContentPresenter x:Name="ContentPresenter"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
<!-- The visibility is managed by the control impl via 'HeaderContentPresenter' marker -->
<ContentPresenter Grid.Row="0"
x:Name="HeaderContentPresenter"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource OnBackgroundBrush}" />

<!-- TODO: fix disabled on thumbtint, using MaterialToggleSwitchOnLowButtonBrush -> OnPrimaryMedium shows a transparent opacity with android native toggleswitch -->
<!-- Grid is used because we can not collapse the visibility of a BindableSwitchCompat -->
<Grid x:Name="OnDisabledGrid"
Grid.Row="1"
Grid.Column="2">

<!-- Provides a disabled state for an on switch -->
<BindableSwitchCompat Checked="{TemplateBinding IsOn,
Mode=TwoWay}"
Foreground="{StaticResource OnSurfaceMediumBrush}"
FontSize="{StaticResource MaterialBodyMediumFontSize}"
FontWeight="{StaticResource MaterialBodyMediumFontWeight}"
FontFamily="{StaticResource MaterialBodyMediumFontFamily}"
Margin="{StaticResource MaterialToggleSwitchHeaderMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<!-- TODO: fix disabled on thumbtint, using MaterialToggleSwitchOnLowButtonBrush -> OnPrimaryMedium shows a transparent opacity with android native toggleswitch -->
<!-- note: BindableSwitchCompat is a native control and does not support any attached properties nor common FrameworkElement/UIElement properties -->
<!-- Grid wrappers are used here to alter the Visibility by proxy -->
<Grid Grid.Column="1"
x:Name="OnDisabledGrid">

<!-- Provides a disabled state for an on switch -->
<BindableSwitchCompat Checked="{TemplateBinding IsOn, Mode=TwoWay}"
Enabled="{TemplateBinding IsEnabled}"
ThumbTint="{ThemeResource MaterialPrimaryVariantLowThumbColorBrush}"
TrackTint="{ThemeResource MaterialToggleSwitchOnLowBackgroundBrush}" />
</Grid>
<Grid Grid.Column="1"
x:Name="OffDisabledGrid">

<!-- Grid is used because we can not collapse the visibility of a BindableSwitchCompat -->
<Grid x:Name="OffDisabledGrid"
Grid.Row="1"
Grid.Column="2">

<!-- Provides a disabled state for an off switch -->
<BindableSwitchCompat Checked="{TemplateBinding IsOn,
Mode=TwoWay}"
<!-- Provides a disabled state for an off switch -->
<BindableSwitchCompat Checked="{TemplateBinding IsOn, Mode=TwoWay}"
Enabled="{TemplateBinding IsEnabled}"
ThumbTint="{StaticResource MaterialPrimaryVariantLowThumbColorBrush}"
TrackTint="{StaticResource MaterialToggleSwitchOnLowBackgroundBrush}" />
</Grid>

<!-- Grid is used because we can not collapse the visibility of a BindableSwitchCompat -->
<Grid x:Name="SwitchGrid"
Grid.Row="1"
Grid.Column="2">
<Grid Grid.Column="1"
x:Name="SwitchGrid">
<BindableSwitchCompat x:Name="AndroidSwitch"
Checked="{TemplateBinding IsOn,
Mode=TwoWay}"
Checked="{TemplateBinding IsOn, Mode=TwoWay}"
Enabled="{TemplateBinding IsEnabled}" />
</Grid>
</Grid>
Expand Down
24 changes: 22 additions & 2 deletions ...Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/ToggleSwitchSamplePage.xaml
View file
Expand Up @@ -10,7 +10,7 @@
xmlns:smtx="using:ShowMeTheXAML"
mc:Ignorable="d android ios">

<!-- Material/Cupertino ToggleSwitch styles for WASM are present in the Styles/ToggleSwitch.xaml file of the shared project as a workaround for https://github.com/unoplatform/uno/issues/5372-->
<!-- Material/Cupertino ToggleSwitch styles for WASM are present in the Styles/ToggleSwitch.xaml file of the shared project as a workaround for https://github.com/unoplatform/uno/issues/5372 -->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<sample:SamplePageLayout>
<sample:SamplePageLayout.MaterialTemplate>
Expand Down Expand Up @@ -150,6 +150,26 @@
IsEnabled="False"
IsOn="True" />
</smtx:XamlDisplay>

<!-- Primary -->
<TextBlock Text="Others"
Style="{StaticResource TitleSmall}"
Margin="12,16,12,8" />
<StackPanel>
<ToggleSwitch Header="Minimal Height"
Height="20"
Style="{StaticResource MaterialToggleSwitchStyle}" />
<ToggleSwitch Header="Height=60"
Height="60"
Style="{StaticResource MaterialToggleSwitchStyle}" />

<ToggleSwitch Header="HorizontalAlignment=Stretch"
HorizontalAlignment="Stretch"
Style="{StaticResource MaterialToggleSwitchStyle}" />
<ToggleSwitch Header="HorizontalAlignment=Stretch"
HorizontalAlignment="Stretch"
Style="{StaticResource MaterialToggleSwitchStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
Expand All @@ -161,7 +181,7 @@
<TextBlock Text="ToggleSwitch"
Style="{StaticResource CupertinoTertiaryTitle}"
Margin="12,16,12,20" />

<!-- ToggleSwitch No Label -->
<smtx:XamlDisplay UniqueKey="Cupertino_ToggleSwitchSamplePage_NoLabel"
Margin="12,0">
Expand Down

0 comments on commit b2677ea

Please sign in to comment.