I'm trying to make a slider switch in XAML, but when you click on this button, the circle of the switch does not move, I seem to have written everything correctly, but alas, I can't find the error, as well as its solution. Here is the code that I managed to write:
<ToggleButton x:Name="toggleSwitch" Width="30" Height="18"
Style="{StaticResource CustomToggleSwitch}"/>
<Style TargetType="ToggleButton" x:Key="CustomToggleSwitch">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<StackPanel>
<Border x:Name="BorderElement" CornerRadius="8" Width="28" Height="18">
<Border.Background>
<SolidColorBrush Color="#252525"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="#333333"/>
</Border.BorderBrush>
<Border.BorderThickness>
<Thickness>2</Thickness>
</Border.BorderThickness>
<Ellipse x:Name="SwitchEllipse"
Fill="#848386"
Width="10"
Height="10"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="2">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="EllipseTranslateTransform" />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="SwitchEllipse" Property="Fill" Value="#F5F1FF"/>
<Setter TargetName="BorderElement" Property="Background" Value="#725DFF"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform"
Storyboard.TargetProperty="X"
To="25" Duration="0:0:0.2"/>
<!-- Движение вправо -->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="SwitchEllipse" Property="Fill" Value="#848386"/>
<Setter TargetName="BorderElement" Property="Background" Value="#252525"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform"
Storyboard.TargetProperty="X"
To="0" Duration="0:0:0.2"/>
<!-- Возвращение влево -->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this is how it should look like:
I'm trying to make a slider switch in XAML, but when you click on this button, the circle of the switch does not move, I seem to have written everything correctly, but alas, I can't find the error, as well as its solution. Here is the code that I managed to write:
<ToggleButton x:Name="toggleSwitch" Width="30" Height="18"
Style="{StaticResource CustomToggleSwitch}"/>
<Style TargetType="ToggleButton" x:Key="CustomToggleSwitch">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<StackPanel>
<Border x:Name="BorderElement" CornerRadius="8" Width="28" Height="18">
<Border.Background>
<SolidColorBrush Color="#252525"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="#333333"/>
</Border.BorderBrush>
<Border.BorderThickness>
<Thickness>2</Thickness>
</Border.BorderThickness>
<Ellipse x:Name="SwitchEllipse"
Fill="#848386"
Width="10"
Height="10"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="2">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="EllipseTranslateTransform" />
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="SwitchEllipse" Property="Fill" Value="#F5F1FF"/>
<Setter TargetName="BorderElement" Property="Background" Value="#725DFF"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform"
Storyboard.TargetProperty="X"
To="25" Duration="0:0:0.2"/>
<!-- Движение вправо -->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="SwitchEllipse" Property="Fill" Value="#848386"/>
<Setter TargetName="BorderElement" Property="Background" Value="#252525"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform"
Storyboard.TargetProperty="X"
To="0" Duration="0:0:0.2"/>
<!-- Возвращение влево -->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
this is how it should look like:
Share Improve this question asked Mar 14 at 11:47 RoDeZRoDeZ 751 silver badge6 bronze badges 1- It will be cooler UX to make the color fade in/out with the Ellipse – Hak Commented Mar 14 at 14:55
1 Answer
Reset to default 4I am not sure if using multiple storyboards with FillBehavior=Stop nor the layout is the best, but anyway to fix your code, you may need to cancel other storyboard.
Give names to storyboards and use StopStoryBoard or (preferably) RemoveStoryBoard:
<Trigger.EnterActions>
<BeginStoryboard x:Name="checked" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform" Storyboard.TargetProperty="X" To="10" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
<StopStoryboard BeginStoryboardName="unchecked" />
</Trigger.EnterActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="EllipseTranslateTransform" Storyboard.TargetProperty="X" From="10" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
<StopStoryboard BeginStoryboardName="checked" />
</Trigger.EnterActions>Also note, that default value TranslateTransform.X=0, so you don't need to specify From or To when going from/to 0 (as you already did in first animation), rather only specify non-default value.
Edit: The value X=10 seems more approparite than 25, edited in snippet.
I put the ToggleButton into Viewbox to observe smooth animation: