Apple Style Toggle Button in WPF C#
This is what we will create!

Wow! So this post blew up!

I rewrote this post on Medium too in case you prefer to read it there!

I recently redesigned my site and I also wanted to take the opportunity to redo this post. Lets cover how I made this Apple style toggle button in WPF C#.

Apple Style Toggle Button In WPF C#

Lets jump straight in!

This button was entirely built using the XML side of the Windows Presentation Framework (WPF). Which makes it incredible easy to create just about anything in WPF.

I surprised myself too with how easy this was to build and implement, it only took about 3 hours in total if my memory serves correct!

My solution obviously isn’t pixel perfect, but it does a damn good job of presenting itself as the Apple toggle button.

Without any further adieu, here’s the XML code I used to create this toggle button:

<Style TargetType="{x:Type ToggleButton}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type ToggleButton}">
				<Viewbox>
					<Border x:Name="Border" CornerRadius="10" Background="#FFFFFFFF" Width="40" Height="20">
						<Border.Effect>
							<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
						</Border.Effect>
						<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform" Margin="2 1 2 1" 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="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF4CD661" Duration="0:0:0.1" />
								<ThicknessAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Margin" To="20 1 2 1" Duration="0:0:0.1" />
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger>
					<EventTrigger RoutedEvent="Unchecked">
						<BeginStoryboard>
							<Storyboard>
								<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="White" Duration="0:0:0.1" />
								<ThicknessAnimation Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="Margin" To="2 1 2 1" Duration="0:0:0.1" />
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

I also built this in a way that size doesn’t matter for once!

You can resize the button as big or small as you want and the perspective stays the same. Thank goodness for view boxes! Really helped this along to the finish line 🙌

If this post helped you, consider signing up to my news letter to stay up to date!

Here’s the same GIF as above again, showing the operation and resizing capabilities of my creation. 

Another GIF displaying the operation of the toggle button

Enjoy! 🎉

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *

IT. Delinquent
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Subscribe to our
Stay up to date with the latest posts and news!
Newsletter