Merge pull request #3756 from MahApps/feature/ToggleSwitch-3753

UWP like ToggleSwitch
MahApps · Mar 1, 2020 · 704e8ab · 704e8ab
2 parents 00c221b + b4df0cc
commit 704e8ab
Show file tree

Hide file tree

Showing 18 changed files with 943 additions and 1,117 deletions.
diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/ButtonsExample.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/ButtonsExample.xaml
@@ -273,78 +273,28 @@
             </StackPanel>
         </StackPanel>
 
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Center">
-            <StackPanel.Resources>
-                <Style x:Key="CustomMetroToggleSwitch"
-                       BasedOn="{StaticResource MahApps.Styles.ToggleSwitch}"
-                       TargetType="{x:Type Controls:ToggleSwitch}">
-                    <Setter Property="OffLabel" Value="False" />
-                    <Setter Property="OffSwitchBrush" Value="Red" />
-                    <Setter Property="OnLabel" Value="True" />
-                    <Setter Property="OnSwitchBrush" Value="Green" />
-                </Style>
-                <Style x:Key="CustomMetroToggleSwitchButton"
-                       BasedOn="{StaticResource MahApps.Styles.ToggleSwitchButton}"
-                       TargetType="{x:Type Controls:ToggleSwitchButton}">
-                    <Setter Property="OffSwitchBrush" Value="DarkRed" />
-                    <Setter Property="OnSwitchBrush" Value="DarkGreen" />
-                </Style>
-            </StackPanel.Resources>
-            <Label Content="Toggle switch" Style="{DynamicResource DescriptionHeaderStyle}" />
-            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   Header="ToggleSwitch Header"
-                                   IsChecked="True"
-                                   ToggleSwitchButtonStyle="{StaticResource CustomMetroToggleSwitchButton}" />
-            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   IsChecked="True"
-                                   Style="{DynamicResource CustomMetroToggleSwitch}" />
-            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   IsChecked="True"
-                                   IsEnabled="False" />
-            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}" IsEnabled="False" />
-        </StackPanel>
+        <!--  Row 1  -->
 
         <StackPanel Grid.Row="1"
-                    Grid.Column="1"
+                    Grid.Column="0"
                     HorizontalAlignment="Center">
-            <StackPanel.Resources>
-                <BooleanToVisibilityConverter x:Key="btv" />
-            </StackPanel.Resources>
-            <Label Content="Enable / Visible" Style="{DynamicResource DescriptionHeaderStyle}" />
-            <Controls:ToggleSwitch x:Name="enabledSwitch"
-                                   Margin="{StaticResource ControlMargin}"
-                                   Header="Win10 Style"
-                                   IsChecked="True"
-                                   OffLabel="Disabled"
-                                   OnLabel="Enabled"
-                                   Style="{StaticResource MahApps.Styles.ToggleSwitch.Win10}" />
-            <Controls:ToggleSwitch x:Name="visibleSwitch"
-                                   Margin="{StaticResource ControlMargin}"
-                                   Controls:ValidationHelper.CloseOnMouseLeftButtonDown="True"
-                                   Controls:ValidationHelper.ShowValidationErrorOnMouseOver="True"
-                                   IsChecked="{Binding IsToggleSwitchVisible, ValidatesOnDataErrors=True}"
-                                   OffLabel="Collapsed"
-                                   OnLabel="Visible"
-                                   Style="{StaticResource MahApps.Styles.ToggleSwitch.Win10}" />
-            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   IsEnabled="{Binding ElementName=enabledSwitch, Path=IsChecked}"
-                                   Style="{StaticResource MahApps.Styles.ToggleSwitch.Win10}"
-                                   Visibility="{Binding ElementName=visibleSwitch, Path=IsChecked, Converter={StaticResource btv}}" />
+            <Label Content="ToggleSwitch" Style="{DynamicResource DescriptionHeaderStyle}" />
 
+            <Controls:ToggleSwitch x:Name="TestToggleSwitch" Margin="{StaticResource ControlMargin}" Header="Header" />
+            <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}" IsEnabled="{Binding ElementName=TestToggleSwitch, Path=IsOn, Mode=OneWay}" />
             <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   IsChecked="True"
-                                   IsEnabled="False"
-                                   Style="{StaticResource MahApps.Styles.ToggleSwitch.Win10}" />
+                                   IsOn="True"
+                                   OffContent="Disabled"
+                                   OnContent="Enabled" />
             <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}"
-                                   IsChecked="False"
                                    IsEnabled="False"
-                                   Style="{StaticResource MahApps.Styles.ToggleSwitch.Win10}" />
+                                   IsOn="True"
+                                   OffContent="Disabled"
+                                   OnContent="Enabled" />
         </StackPanel>
 
         <StackPanel Grid.Row="1"
-                    Grid.Column="2"
+                    Grid.Column="1"
                     HorizontalAlignment="Center"
                     UseLayoutRounding="True">
             <StackPanel>
@@ -395,7 +345,7 @@
         </StackPanel>
 
         <StackPanel Grid.Row="1"
-                    Grid.Column="3"
+                    Grid.Column="2"
                     HorizontalAlignment="Center"
                     UseLayoutRounding="True">
             <StackPanel>
@@ -458,7 +408,7 @@
         </StackPanel>
 
         <StackPanel Grid.Row="1"
-                    Grid.Column="4"
+                    Grid.Column="3"
                     HorizontalAlignment="Stretch">
             <StackPanel.Resources>
                 <Style x:Key="CircleDropDownButton"
@@ -523,7 +473,11 @@
                     </Controls:DropDownButton.Icon>
                 </Controls:DropDownButton>
             </StackPanel>
+        </StackPanel>
 
+        <StackPanel Grid.Row="1"
+                    Grid.Column="4"
+                    HorizontalAlignment="Stretch">
             <Label Content="SplitButton" Style="{DynamicResource DescriptionHeaderStyle}" />
 
             <Controls:SplitButton Margin="5"
@@ -549,7 +503,6 @@
                     <iconPacks:PackIconModern Margin="6" Kind="Book" />
                 </Controls:SplitButton.Icon>
             </Controls:SplitButton>
-
         </StackPanel>
     </Grid>
 

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuCreatorsUpdate.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuCreatorsUpdate.xaml
@@ -113,7 +113,7 @@
             <StackPanel Margin="0 0 0 10" Orientation="Vertical">
                 <Controls:ToggleSwitch Margin="0 10 0 5"
                                        Header="IsPaneOpen:"
-                                       IsChecked="{Binding ElementName=HamburgerMenuControl, Path=IsPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                       IsOn="{Binding ElementName=HamburgerMenuControl, Path=IsPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
                 <Controls:MetroHeader Margin="0 10 0 5" Header="DisplayMode:">
                     <ComboBox MinWidth="150"

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuDefault.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuDefault.xaml
@@ -107,13 +107,13 @@
             <StackPanel Margin="0 0 0 10" Orientation="Vertical">
                 <Controls:ToggleSwitch Margin="0 10 0 5"
                                        Header="HamburgerMenuItem About:"
-                                       IsChecked="{Binding CanShowHamburgerAboutCommand, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
-                                       OffLabel="Disabled"
-                                       OnLabel="Enabled" />
+                                       IsOn="{Binding CanShowHamburgerAboutCommand, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                       OffContent="Disabled"
+                                       OnContent="Enabled" />
 
                 <Controls:ToggleSwitch Margin="0 10 0 5"
                                        Header="IsPaneOpen:"
-                                       IsChecked="{Binding IsHamburgerMenuPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                       IsOn="{Binding IsHamburgerMenuPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
                 <Controls:MetroHeader Margin="0 10 0 5" Header="PanePlacement:">
                     <ComboBox MinWidth="150"

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuSample.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/HamburgerMenuSample.xaml
@@ -12,12 +12,6 @@
              mc:Ignorable="d">
 
     <UserControl.Resources>
-        <Style BasedOn="{StaticResource MahApps.Styles.ToggleSwitch.Win10}" TargetType="{x:Type Controls:ToggleSwitch}">
-            <Setter Property="FontSize" Value="15" />
-            <Setter Property="Margin" Value="0" />
-            <Setter Property="VerticalAlignment" Value="Center" />
-        </Style>
-
         <Style BasedOn="{StaticResource MahApps.Styles.Slider.Win10}" TargetType="{x:Type Slider}" />
 
         <Style BasedOn="{StaticResource {x:Type Controls:MetroHeader}}" TargetType="{x:Type Controls:MetroHeader}">

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/TextExamples.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/TextExamples.xaml
@@ -594,8 +594,7 @@
                     <CheckBox x:Name="ModifierKeysRequired"
                               Margin="{StaticResource ControlMargin}"
                               Content="Require modifier keys" />
-                    <TextBlock Margin="{StaticResource ControlMargin}"
-                               Text="Try SHIFT+D to demonstrate validation" />
+                    <TextBlock Margin="{StaticResource ControlMargin}" Text="Try SHIFT+D to demonstrate validation" />
                     <Controls:HotKeyBox Margin="{StaticResource ControlMargin}"
                                         Controls:TextBoxHelper.ClearTextButton="True"
                                         Controls:TextBoxHelper.Watermark="Enter hot key"

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleWindows/ShowcaseFlyout.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleWindows/ShowcaseFlyout.xaml
@@ -129,17 +129,16 @@
                                        Grid.Column="1"
                                        Margin="2"
                                        Header="Flyout closing"
-                                       IsChecked="{Binding CanCloseFlyout, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
-                                       OffLabel="Disabled"
-                                       OnLabel="Allowed" />
+                                       IsOn="{Binding CanCloseFlyout, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                       OffContent="Disabled"
+                                       OnContent="Allowed" />
                 <controls:ToggleSwitch Grid.Row="3"
                                        Grid.Column="1"
                                        Margin="2"
                                        Header="Flyout closing"
-                                       IsChecked="{Binding CanCloseFlyout, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
-                                       OffLabel="Disabled"
-                                       OnLabel="Allowed"
-                                       Style="{DynamicResource MahApps.Styles.ToggleSwitch.Win10}" />
+                                       IsOn="{Binding CanCloseFlyout, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                       OffContent="Disabled"
+                                       OnContent="Allowed" />
 
             </Grid>
 

diff --git a/src/MahApps.Metro.Samples/MahApps.Metro.Demo/HamburgerMenuRipple/HamburgerMenuRipple.xaml b/src/MahApps.Metro.Samples/MahApps.Metro.Demo/HamburgerMenuRipple/HamburgerMenuRipple.xaml
@@ -176,7 +176,7 @@
             <StackPanel Margin="0 0 0 10" Orientation="Vertical">
                 <Controls:ToggleSwitch Margin="0 10 0 5"
                                        Header="IsPaneOpen:"
-                                       IsChecked="{Binding ElementName=HamburgerMenuControl, Path=IsPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                                       IsOn="{Binding ElementName=HamburgerMenuControl, Path=IsPaneOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
                 <Controls:MetroHeader Margin="0 10 0 5" Header="DisplayMode:">
                     <ComboBox MinWidth="150"
@@ -264,7 +264,7 @@
                                         <Controls:ToggleSwitch Margin="0 0 0 5" Header="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                                         <Controls:ToggleSwitch Margin="0 0 0 5"
                                                                Header="Ut dictum arcu egestas aliquet elementum"
-                                                               IsChecked="True" />
+                                                               IsOn="True" />
                                         <Controls:ToggleSwitch Margin="0 0 0 5" Header="Pellentesque ultricies metus quis dui luctus, vel faucibus risus rhoncus" />
                                     </StackPanel>
                                 </UserControl>