Skip to content

Commit 9e64c3c

Browse files
ButchersBoyButchersBoy
committed
toggle switch UWP [skip ci]
1 parent 4c1d73d commit 9e64c3c

File tree

4 files changed

+170
-4
lines changed

4 files changed

+170
-4
lines changed

‎MainDemo.Uwp/MainPage.xaml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
>
1616

1717
<Page.Resources>
18-
<ResourceDictionary>
18+
<ResourceDictionary>
19+
20+
1921

2022
</ResourceDictionary>
2123
</Page.Resources>
@@ -30,6 +32,7 @@
3032
<Button Margin="8 0 0 0" Width="100" Style="{StaticResource MaterialDesignRaisedDarkButton}">DARK</Button>
3133
<Button Margin="8 0 0 0" Width="100" Style="{StaticResource MaterialDesignRaisedAccentButton}">ACCENT</Button>
3234
</StackPanel>
35+
<ToggleSwitch Style="{StaticResource MaterialDesignToggleSwitch}" />
3336
</StackPanel>
3437
</Grid>
3538
</Page>

‎MainDemo.Wpf/Buttons.xaml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,9 @@
119119
</CheckBox>
120120
</StackPanel>
121121
<StackPanel Grid.Row="7" Margin="0 16 0 0" Orientation="Horizontal">
122-
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="0 0 8 8" />
123-
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="0 0 8 8" IsChecked="True" />
122+
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" />
123+
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="8 0 0 0" IsChecked="True" />
124+
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="8 0 0 0" IsEnabled="False" />
124125
</StackPanel>
125126
<StackPanel Grid.Row="8" Margin="0 16 0 0" Orientation="Horizontal">
126127
<ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}">

‎MaterialDesignThemes.Uwp/Themes/MaterialDesign.xaml

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,4 +110,166 @@
110110
<Setter Property="Foreground" Value="{ThemeResource SecondaryAccentForegroundBrush}"/>
111111
</Style>
112112

113+
<Style x:Key="MaterialDesignToggleSwitch" TargetType="ToggleSwitch">
114+
<Setter Property="Foreground" Value="{ThemeResource MaterialDesignBody}"/>
115+
<Setter Property="HorizontalAlignment" Value="Left"/>
116+
<Setter Property="VerticalAlignment" Value="Center"/>
117+
<Setter Property="HorizontalContentAlignment" Value="Left"/>
118+
<Setter Property="FontFamily" Value="ms-appx:///MaterialDesignThemes.Uwp/Assets/Roboto/Roboto-Regular.ttf#Roboto" />
119+
<Setter Property="FontSize" Value="14" />
120+
<Setter Property="ManipulationMode" Value="System,TranslateX"/>
121+
<Setter Property="UseSystemFocusVisuals" Value="True"/>
122+
<Setter Property="Template">
123+
<Setter.Value>
124+
<ControlTemplate TargetType="ToggleSwitch">
125+
<Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
126+
<Grid.ColumnDefinitions>
127+
<ColumnDefinition Width="Auto"/>
128+
<ColumnDefinition Width="Auto"/>
129+
</Grid.ColumnDefinitions>
130+
<Grid.RowDefinitions>
131+
<RowDefinition Height="Auto"/>
132+
<RowDefinition Height="Auto"/>
133+
</Grid.RowDefinitions>
134+
<VisualStateManager.VisualStateGroups>
135+
<VisualStateGroup x:Name="CommonStates">
136+
<VisualState x:Name="Normal"/>
137+
<VisualState x:Name="PointerOver" />
138+
<VisualState x:Name="Pressed">
139+
<Storyboard>
140+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"
141+
Storyboard.TargetName="KnobShadowTranslateTransform">
142+
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="11.75">
143+
<EasingDoubleKeyFrame.EasingFunction>
144+
<QuadraticEase EasingMode="EaseOut"/>
145+
</EasingDoubleKeyFrame.EasingFunction>
146+
</EasingDoubleKeyFrame>
147+
</DoubleAnimationUsingKeyFrames>
148+
</Storyboard>
149+
</VisualState>
150+
<VisualState x:Name="Disabled">
151+
<Storyboard>
152+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchGrid" Storyboard.TargetProperty="Opacity">
153+
<DiscreteObjectKeyFrame KeyTime="0" Value=".12"/>
154+
</ObjectAnimationUsingKeyFrames>
155+
</Storyboard>
156+
</VisualState>
157+
</VisualStateGroup>
158+
<VisualStateGroup x:Name="ToggleStates">
159+
<VisualStateGroup.Transitions>
160+
<VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
161+
</VisualTransition>
162+
<VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
163+
</VisualTransition>
164+
<VisualTransition x:Name="OnToOffTransition" From="On" To="Off">
165+
<Storyboard>
166+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"
167+
Storyboard.TargetName="KnobShadowTranslateTransform">
168+
<EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
169+
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
170+
<EasingDoubleKeyFrame.EasingFunction>
171+
<QuadraticEase EasingMode="EaseOut"/>
172+
</EasingDoubleKeyFrame.EasingFunction>
173+
</EasingDoubleKeyFrame>
174+
</DoubleAnimationUsingKeyFrames>
175+
</Storyboard>
176+
</VisualTransition>
177+
<VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
178+
<Storyboard>
179+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"
180+
Storyboard.TargetName="KnobShadowTranslateTransform">
181+
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
182+
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
183+
<EasingDoubleKeyFrame.EasingFunction>
184+
<QuadraticEase EasingMode="EaseOut"/>
185+
</EasingDoubleKeyFrame.EasingFunction>
186+
</EasingDoubleKeyFrame>
187+
</DoubleAnimationUsingKeyFrames>
188+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
189+
Storyboard.TargetName="KnobBorder"
190+
Duration="0">
191+
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryHueMidBrush}" />
192+
</ObjectAnimationUsingKeyFrames>
193+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
194+
Storyboard.TargetName="Track"
195+
Duration="0">
196+
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryHueLightBrush}" />
197+
</ObjectAnimationUsingKeyFrames>
198+
</Storyboard>
199+
</VisualTransition>
200+
</VisualStateGroup.Transitions>
201+
<VisualState x:Name="Dragging"/>
202+
<VisualState x:Name="Off"/>
203+
<VisualState x:Name="On">
204+
<Storyboard FillBehavior="HoldEnd">
205+
<DoubleAnimation Storyboard.TargetProperty="X"
206+
Storyboard.TargetName="KnobShadowTranslateTransform"
207+
Duration="0" To="23.5" />
208+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
209+
Storyboard.TargetName="KnobBorder"
210+
Duration="0">
211+
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryHueMidBrush}" />
212+
</ObjectAnimationUsingKeyFrames>
213+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
214+
Storyboard.TargetName="Track"
215+
Duration="0">
216+
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PrimaryHueLightBrush}" />
217+
</ObjectAnimationUsingKeyFrames>
218+
</Storyboard>
219+
</VisualState>
220+
</VisualStateGroup>
221+
<VisualStateGroup x:Name="ContentStates">
222+
<VisualState x:Name="OffContent">
223+
<Storyboard>
224+
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OffContentPresenter"/>
225+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
226+
<DiscreteObjectKeyFrame KeyTime="0">
227+
<DiscreteObjectKeyFrame.Value>
228+
<x:Boolean>True</x:Boolean>
229+
</DiscreteObjectKeyFrame.Value>
230+
</DiscreteObjectKeyFrame>
231+
</ObjectAnimationUsingKeyFrames>
232+
</Storyboard>
233+
</VisualState>
234+
<VisualState x:Name="OnContent">
235+
<Storyboard>
236+
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnContentPresenter"/>
237+
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
238+
<DiscreteObjectKeyFrame KeyTime="0">
239+
<DiscreteObjectKeyFrame.Value>
240+
<x:Boolean>True</x:Boolean>
241+
</DiscreteObjectKeyFrame.Value>
242+
</DiscreteObjectKeyFrame>
243+
</ObjectAnimationUsingKeyFrames>
244+
</Storyboard>
245+
</VisualState>
246+
</VisualStateGroup>
247+
</VisualStateManager.VisualStateGroups>
248+
<ContentPresenter x:Name="HeaderContentPresenter" AutomationProperties.AccessibilityView="Raw" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" IsHitTestVisible="False" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
249+
<ContentPresenter x:Name="OffContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
250+
<ContentPresenter x:Name="OnContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Opacity="0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
251+
<Grid Grid.ColumnSpan="2" Grid.Column="0" Control.IsTemplateFocusTarget="True" Margin="0,5" Grid.Row="1" />
252+
<Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" x:Name="SwitchGrid" Margin="0 0 8 0">
253+
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
254+
<uwp:Shadow x:Name="KnobShadow" HorizontalContentAlignment="Left">
255+
<uwp:Shadow.RenderTransform>
256+
<TranslateTransform x:Name="KnobShadowTranslateTransform" X="0"/>
257+
</uwp:Shadow.RenderTransform>
258+
<Border Background="#FFFAFAFA" x:Name="KnobBorder" Width="24" Height="24" CornerRadius="12" HorizontalAlignment="Left" />
259+
</uwp:Shadow>
260+
</Grid>
261+
<Thumb x:Name="SwitchThumb" AutomationProperties.AccessibilityView="Raw" Grid.ColumnSpan="2"
262+
Grid.Column="0" Grid.Row="1">
263+
<Thumb.Template>
264+
<ControlTemplate TargetType="Thumb">
265+
<Rectangle Fill="Transparent"/>
266+
</ControlTemplate>
267+
</Thumb.Template>
268+
</Thumb>
269+
</Grid>
270+
</ControlTemplate>
271+
</Setter.Value>
272+
</Setter>
273+
</Style>
274+
113275
</ResourceDictionary>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ToggleButton.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@
244244
</ControlTemplate.Resources>
245245
<Viewbox Width="34">
246246
<Grid>
247-
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,-4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
247+
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
248248
<Ellipse x:Name="Thumb" Fill="#FFFAFAFA" HorizontalAlignment="Left" Height="25" Margin="0,0,0,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="25" RenderTransformOrigin="0.5,0.5" Effect="{DynamicResource MaterialDesignShadowDepth1}">
249249
<Ellipse.RenderTransform>
250250
<TransformGroup>

0 commit comments

Comments
 (0)