Another short post today, here I modified the code for my Apple Style Toggle Button so that it more resembled the MaterialDesign toggle button. I thought of this whilst playing with the YouTube autoplay button. Here is my code:
<Style TargetType="{x:Type ToggleButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Viewbox> <Border x:Name="Border" CornerRadius="10" Background="#FFE2E2E2" Width="40" Height="20"> <Border.Effect> <DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" /> </Border.Effect> <Ellipse x:Name="Ellipse" Fill="#FF909090" Stretch="Uniform" Margin="-8 -4" Stroke="Gray" StrokeThickness="0.2" HorizontalAlignment="Stretch"> <Ellipse.Effect> <DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" /> </Ellipse.Effect> </Ellipse> </Border> </Viewbox> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="Checked"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="#FF0069F3" Duration="0:0:0.05" AccelerationRatio="0.7" DecelerationRatio="0.3"/> <ThicknessAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Margin" To="20 -4 -8 -4" Duration="0:0:0.15" AccelerationRatio="0.7" DecelerationRatio="0.3"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Unchecked"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="#FF909090" Duration="0:0:0.05" AccelerationRatio="0.7" DecelerationRatio="0.3"/> <ThicknessAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Margin" To="-8 -4" Duration="0:0:0.15" AccelerationRatio="0.7" DecelerationRatio="0.3"/> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
And finally, here is a little GIF of the toggle button:
Enjoy!