Hi everyone,
I'm about making ToggleSwitch which is based on ToggleButton by using . It works fine, but now I want that after the move animation is done, the checked event or unchecked event is fired. That means, after complete moving the thumb to the left or right,
the toggleswitch's state is changed
This is my code :
<UserControl x:Class="ToggleSwitchExample.ToggleSwitchWPF" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" Width="Auto" Height="Auto"><Grid Name="grdMainGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="40" MaxWidth="{Binding RelativeSource={RelativeSource Mode=Self}, Path=MinWidth}" MinHeight="23" MaxHeight="{Binding RelativeSource={RelativeSource Mode=Self}, Path=MinHeight}"><!-- This is the main component of this UserControl --><ToggleButton Name="tbnMainToggleButton" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="btnMainToggleButton_Click" Checked="btnMainToggleButton_Checked" Unchecked="btnMainToggleButton_Unchecked"><!-- Customize toggle button's template --><ToggleButton.Template><ControlTemplate TargetType="{x:Type ToggleButton}"><Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><i:Interaction.Behaviors><ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.1"><ei:FluidMoveBehavior.EaseX><SineEase EasingMode="EaseIn" /></ei:FluidMoveBehavior.EaseX></ei:FluidMoveBehavior></i:Interaction.Behaviors><!-- This is the vertial border which contains the Vertial Bar --><Border Name="bdrVertialBarBorder" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderBrush="Gray" BorderThickness="1" Grid.ColumnSpan="2"><!-- This is the background inside the vertical border --><Border x:Name="bdrInsideVerticalBorder" Grid.ColumnSpan="2" Background="Green" Margin="2"/></Border><!-- This is the object which runs from left to right or vice versa to indicate whether is toggle button is checked or not--><Border Name="Thumb" Height="{Binding ElementName=bdrVertialBarBorder, Path=ActualHeight}" CornerRadius="2" Background="Black" Margin="1, 0, 1, 0" Grid.Column="0"/></Grid><ControlTemplate.Triggers><!-- This trigger is activated when the toggle button is checked --><Trigger Property="IsChecked" Value="true"><Setter Property="Grid.Column" TargetName="Thumb" Value="1"/><Setter TargetName="bdrInsideVerticalBorder" Property="Background" Value="Red"/></Trigger><!-- This trigger is activated when the toggle button is disabled --><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" Value="0.4"/></Trigger></ControlTemplate.Triggers></ControlTemplate></ToggleButton.Template></ToggleButton></Grid></UserControl>
Can anyone help me please?
Thank you