Skip to content

Commit

Permalink
Merge pull request #1970 from Nexus-Mods/fix/toggleswitch-styling
Browse files Browse the repository at this point in the history 
ToggleSwitch indeterminate styling fix
  • Loading branch information
@Al12rs
Al12rs authored Sep 3, 2024
2 parents b93b0f6 + f1c25d9 commit 2e29673
Showing 1 changed file with 85 additions and 36 deletions.
121 changes: 85 additions & 36 deletions ...es/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,8 @@
</Border>
</Design.PreviewWith>


<!-- Style Definitions-->


<Style Selector="ToggleSwitch">
<Style.Resources>
<SolidColorBrush x:Key="ToggleSwitchFillOn" Color="{StaticResource NeutralModerate}" />
Expand Down Expand Up @@ -249,6 +247,39 @@
x:Name="SwitchKnobOff" />
</Grid>
</Canvas>

<!-- NOTE (insomnious):
The below elements have been added and are only shown when the control is 'indeterminate' and is
to force the indeterminate visual state without relying on the original controls knob position.
This is a workaround for the lack of knob movement when IsChecked is set to null.
-->

<Grid
Grid.Row="1"
Grid.Column="0"
Height="24"
Width="24"
Margin="20,0,0,0"
x:Name="FAKE_KnobGrid">
<Ellipse
Fill="{StaticResource BrandTranslucentLight50}"
Opacity="1"
Height="40"
Width="40"
x:Name="FAKE_KNOBHOVER" />
<Ellipse
Fill="{StaticResource ToggleSwitchKnobFillOn}"
Opacity="1"
Height="24"
Width="24"
x:Name="FAKE_KnobOuter" />
<Ellipse
Fill="{StaticResource ToggleSwitchKnobFillOff}"
Opacity="1"
Height="16"
Width="16"
x:Name="FAKE_KnobInner" />
</Grid>
</Grid>
</Grid>
</ControlTemplate>
Expand All @@ -258,6 +289,9 @@
<Setter Property="Margin" Value="0" />
</Style>

<Style Selector="^ /template/ Grid#FAKE_KnobGrid">
<Setter Property="Opacity" Value="0" />
</Style>

<Setter Property="KnobTransitions">
<Transitions>
Expand Down Expand Up @@ -293,7 +327,22 @@

<Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="20" />
<Setter Property="Margin" Value="-2,-2,0,0" />
<Setter Property="Margin" Value="0,0,0,0" />
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
<Setter Property="Height" Value="16" />
<Setter Property="Width" Value="16" />
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
<Setter Property="Height" Value="10" />
<Setter Property="Width" Value="10" />
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KNOBHOVER">
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="32" />
</Style>
</Style>

Expand Down Expand Up @@ -331,6 +380,7 @@

<!-- start of unchecked state -->
<Style Selector="^:unchecked">

<Style Selector="^ /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1" />
<Setter Property="Background" Value="{StaticResource ToggleSwitchFillOff}" />
Expand Down Expand Up @@ -362,35 +412,30 @@

<!-- start of indeterminate state -->
<Style Selector="^:indeterminate">
<Style Selector="^ /template/ Border#OuterBorder">

<!-- show fake knob -->
<Style Selector="^ /template/ Grid#FAKE_KnobGrid">
<Setter Property="Opacity" Value="1" />
<Setter Property="Background" Value="{StaticResource ToggleSwitchFillOn}" />
<Setter Property="BorderBrush" Value="{StaticResource ToggleSwitchStrokeOn}" />
</Style>

<Style Selector="^ /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1" />
<Setter Property="Fill" Value="{StaticResource ToggleSwitchFillOn}" />
<Setter Property="Margin" Value="32,0,0,0" />
<Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
<Setter Property="Fill" Value="{StaticResource ToggleSwitchKnobFillOn}" />
</Style>

<Style Selector="^ /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="1" />
<Setter Property="Margin" Value="32,0,0,0" />
<Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
<Setter Property="Fill" Value="{StaticResource ToggleSwitchFillOn}" />
</Style>

<Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
<Style Selector="^ /template/ Ellipse#FAKE_KNOBHOVER">
<Setter Property="Opacity" Value="0" />
</Style>

<Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="1" />
<Style Selector="^ /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="0" />
</Style>

<!-- COMPACT -->
<Style Selector="^.Compact /template/ Ellipse#SwitchKnobOff">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Style Selector="^ /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="0" />
</Style>
</Style>

Expand All @@ -411,19 +456,19 @@

<!-- indeterminate -->
<Style Selector="^:indeterminate">
<Style Selector="^ /template/ Ellipse#SwitchKnobOuter">
<Setter Property="Margin" Value="32,0,0,0" />
</Style>

<Style Selector="^ /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{StaticResource ToggleSwitchFillOnPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
<Setter Property="BorderThickness" Value="0" />
</Style>

<Style Selector="^ /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
<Style Selector="^ /template/ Ellipse#SwitchKnobOuter">
<Setter Property="Opacity" Value="0" />
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KNOBHOVER">
<Setter Property="Opacity" Value="1" />
</Style>

</Style>
</Style>

Expand All @@ -439,7 +484,6 @@
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
<Setter Property="Width" Value="28" />
<Setter Property="Height" Value="28" />
<Setter Property="Margin" Value="0,0,0,0" />
<!-- need to move knob slightly left after size increase -->
</Style>

Expand All @@ -454,14 +498,9 @@
<Style Selector="^ /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1" />
<Setter Property="Fill" Value="{StaticResource ToggleSwitchFillOn}" />
<Setter Property="Margin" Value="32,0,0,0" />
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
</Style>

<Style Selector="^ /template/ Ellipse#SwitchKnobOn">
<Setter Property="Margin" Value="32,0,0,0" />
</Style>
</Style>

<!-- COMPACT -->
Expand Down Expand Up @@ -510,7 +549,8 @@
<Style Selector="^:checked /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
<Setter Property="BorderThickness" Value="0" /> <!-- turn off as it's not needed -->
<Setter Property="BorderThickness" Value="0" />
<!-- turn off border as it's not needed -->
</Style>

<!-- unchecked -->
Expand All @@ -523,8 +563,16 @@
<Style Selector="^:indeterminate">
<Style Selector="^/template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
<Setter Property="BorderThickness" Value="0" /> <!-- turn off as it's not needed -->
<Setter Property="BorderThickness" Value="0" />
<!-- turn off border as it's not needed -->
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
</Style>

<Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
</Style>

<Style Selector="^ /template/ Border#SwitchKnobBounds">
Expand All @@ -538,6 +586,7 @@
<Style Selector="^ /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
</Style>

</Style>
</Style>

Expand Down

0 comments on commit 2e29673

Please sign in to comment.