From c0e0396ce434071babe6acbb54a384cc3586fd77 Mon Sep 17 00:00:00 2001
From: insomnious <simon.davies@nexusmods.com>
Date: Tue, 3 Sep 2024 10:36:46 +0100
Subject: [PATCH 1/2] ToggleSwitch indeterminate styling fix

---
 .../ToggleSwitch/ToggleSwitchStyles.axaml     | 121 ++++++++++++------
 1 file changed, 85 insertions(+), 36 deletions(-)

diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
index 471bd578ea..9fe863aab0 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
@@ -102,10 +102,8 @@
         </Border>
     </Design.PreviewWith>
 
-
     <!-- Style Definitions-->
 
-
     <Style Selector="ToggleSwitch">
         <Style.Resources>
             <SolidColorBrush x:Key="ToggleSwitchFillOn" Color="{StaticResource NeutralModerate}" />
@@ -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_KNOBGROUP">
+                            <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>
@@ -258,6 +289,9 @@
             <Setter Property="Margin" Value="0" />
         </Style>
 
+        <Style Selector="^ /template/ Grid#FAKE_KNOBGROUP">
+            <Setter Property="Opacity" Value="0" />
+        </Style>
 
         <Setter Property="KnobTransitions">
             <Transitions>
@@ -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>
 
@@ -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}" />
@@ -362,35 +412,30 @@
 
         <!-- start of indeterminate state -->
         <Style Selector="^:indeterminate">
-            <Style Selector="^ /template/ Border#OuterBorder">
+
+            <!-- show fake knob -->
+            <Style Selector="^ /template/ Grid#FAKE_KNOBGROUP">
                 <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>
 
@@ -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>
 
@@ -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>
 
@@ -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 -->
@@ -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 -->
@@ -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">
@@ -538,6 +586,7 @@
                 <Style Selector="^ /template/ Ellipse#SwitchKnobOn">
                     <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
                 </Style>
+
             </Style>
         </Style>
 

From f1c25d914be8571cc14f2776fe66d627bbae6cc8 Mon Sep 17 00:00:00 2001
From: insomnious <simon.davies@nexusmods.com>
Date: Tue, 3 Sep 2024 10:41:48 +0100
Subject: [PATCH 2/2] Naming changes

---
 .../ToggleSwitch/ToggleSwitchStyles.axaml     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
index 9fe863aab0..ee00b9feb9 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/ToggleSwitch/ToggleSwitchStyles.axaml
@@ -260,7 +260,7 @@
                             Height="24"
                             Width="24"
                             Margin="20,0,0,0"
-                            x:Name="FAKE_KNOBGROUP">
+                            x:Name="FAKE_KnobGrid">
                             <Ellipse
                                 Fill="{StaticResource BrandTranslucentLight50}"
                                 Opacity="1"
@@ -272,13 +272,13 @@
                                 Opacity="1"
                                 Height="24"
                                 Width="24"
-                                x:Name="FAKE_KNOBOUTER" />
+                                x:Name="FAKE_KnobOuter" />
                             <Ellipse
                                 Fill="{StaticResource ToggleSwitchKnobFillOff}"
                                 Opacity="1"
                                 Height="16"
                                 Width="16"
-                                x:Name="FAKE_KNOBINNER" />
+                                x:Name="FAKE_KnobInner" />
                         </Grid>
                     </Grid>
                 </Grid>
@@ -289,7 +289,7 @@
             <Setter Property="Margin" Value="0" />
         </Style>
 
-        <Style Selector="^ /template/ Grid#FAKE_KNOBGROUP">
+        <Style Selector="^ /template/ Grid#FAKE_KnobGrid">
             <Setter Property="Opacity" Value="0" />
         </Style>
 
@@ -330,12 +330,12 @@
                 <Setter Property="Margin" Value="0,0,0,0" />
             </Style>
 
-            <Style Selector="^ /template/ Ellipse#FAKE_KNOBOUTER">
+            <Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
                 <Setter Property="Height" Value="16" />
                 <Setter Property="Width" Value="16" />
             </Style>
 
-            <Style Selector="^ /template/ Ellipse#FAKE_KNOBINNER">
+            <Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
                 <Setter Property="Height" Value="10" />
                 <Setter Property="Width" Value="10" />
             </Style>
@@ -414,15 +414,15 @@
         <Style Selector="^:indeterminate">
 
             <!-- show fake knob -->
-            <Style Selector="^ /template/ Grid#FAKE_KNOBGROUP">
+            <Style Selector="^ /template/ Grid#FAKE_KnobGrid">
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <Style Selector="^ /template/ Ellipse#FAKE_KNOBOUTER">
+            <Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
                 <Setter Property="Fill" Value="{StaticResource ToggleSwitchKnobFillOn}" />
             </Style>
 
-            <Style Selector="^ /template/ Ellipse#FAKE_KNOBINNER">
+            <Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
                 <Setter Property="Fill" Value="{StaticResource ToggleSwitchFillOn}" />
             </Style>
 
@@ -567,11 +567,11 @@
                     <!-- turn off border as it's not needed  -->
                 </Style>
 
-                <Style Selector="^ /template/ Ellipse#FAKE_KNOBOUTER">
+                <Style Selector="^ /template/ Ellipse#FAKE_KnobOuter">
                     <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
                 </Style>
 
-                <Style Selector="^ /template/ Ellipse#FAKE_KNOBINNER">
+                <Style Selector="^ /template/ Ellipse#FAKE_KnobInner">
                     <Setter Property="Fill" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
                 </Style>