XAML Custom Toggle Style

Pluto_Guy

Pluto

Posts: 607

Threads: 54

Joined: Oct, 2022

Reputation: 40

Posted

Hello, here is a custom toggle style i made which you can modify or anything!

Here is what it looks like

https://cdn.discordapp.com/attachments/1127174466645000213/1140291424944930876/Untitled_video_-_Made_with_Clipchamp_5.mp4

        <Style TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Name="ToggleBackground" Width="40" Height="20" CornerRadius="10" Background="#FF2C2037">
                            <Grid>
                                <Ellipse Name="CircleInside" Margin="5,5,5,5"  HorizontalAlignment="Left" VerticalAlignment="Center" Fill="#FF8E5DBC" Width="10" Height="10"></Ellipse>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Checked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0:0.2" Storyboard.TargetName="CircleInside" Storyboard.TargetProperty="Margin" From="5,0,0,0" To="25,0,0,0"></ThicknessAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Unchecked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Duration="0:0:0:0.2" Storyboard.TargetName="CircleInside" Storyboard.TargetProperty="Margin" From="25,0,0,0"  To="5,0,0,0"></ThicknessAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

- Updated circle to elipse

- Updated and added animations

0

Owner @Pluto - The Best Executor, External and Script Hub

Download Here! - https://pluto.ad

TERIHAX

i say im gay as a joke 🙀

Posts: 1789

Threads: 92

Joined: Jul, 2020

Reputation: 30

Replied

use an ellipse instead of a rounded border if you want to make a circle

Comments

Pluto_Guy 40 Reputation

Commented

ye, just realised that. Its more perfect if you use that

0

Added

@kxhu Ye your right.

0

TERIHAX 30 Reputation

Commented

@Kxhu yes but if you're looking for a circle use an ellipse

0

0

https://i.gyazo.com/be71d4feff1dbba0acfa5ea6f55154ca.png

https://i.imgur.com/P0ijupK.png

ItsNitro

Dad

Posts: 487

Threads: 39

Joined: May, 2020

Reputation: 4

Replied

This is definitely the wrong category to post this in, also it's not even animated

Comments

Pluto_Guy 40 Reputation

Commented

I didnt know where to put it lol

Also, i said i would add animations to it soon.

0

ItsNitro 4 Reputation

Commented

c# section since this is xaml for wpf

0

Pluto_Guy 40 Reputation

Commented

Just added animations

0

0

nltr | Wpf/C# & Cpp Developer | Former Fluxus Administrator------------------------------------------------------------------------------------💜 Developer of Kronos 💜

Discord

hwaunt

Posts: 30

Threads: 3

Joined: Aug, 2023

Reputation: -2

Replied

vouuch vouch vouch great work colors match n overall looks clean tbh

0

blueless

Failed to fetch.

Posts: 325

Threads: 35

Joined: Dec, 2021

Reputation: 15

Replied

it isn't that hard 5/10 medium vouch

0

Failed to fetch.

XAML Custom Toggle Style

Users viewing this thread: