WPF Switching path property with enum then animation fail when started - wpf

Question

I would like to make a custom button control which can be change with an enum property that assigned on main call.
So i have implemented additionally an animation activation to this switchable button that start the animation as flowing color when activated.
But when i start the animation it fails as animation property that i want to change name is not founded here.
There is two style at the momemnt for testing, it works if i only define self defined animation and style, but when i try to add second one when animation triggered it fails. Could you please help me about it?
Here is my code;
This is Generic.xaml
<!-- Komut Butonlari -->
<Style TargetType="{x:Type local:KomutButonlari}">
<Setter Property="VerticalAlignment"
Value="Top"/>
<Setter Property="HorizontalAlignment"
Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:KomutButonlari}">
<Border x:Name="Sinir"
CornerRadius="50"
BorderThickness="0"
BorderBrush="Transparent">
<Border.Background>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#FF6ff7e8"
Offset="0"/>
<GradientStop Color="#FF1f7ea1"
Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Path x:Name="Ucgen">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<!-- Baslama Sekli -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Baslama">
<Setter Property="Data" Value="M 25 20 L 85 50 25 80 Z"/>
<Setter Property="Stroke" Value="#9928AF23"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="StrokeThickness" Value="4"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#FF28AF23"
Offset="0"/>
<GradientStop x:Name="BaslamaOtelemesi"
Color="#FF28AF23"
Offset="0"/>
<GradientStop x:Name="BaslamaOtelemesi1"
Color="WhiteSmoke"
Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Durdurma">
<Setter Property="Data" Value="M 25 20 L 45 20 45 80 25 80 Z M 55 20 L 75 20 75 80 55 80 Z"/>
<Setter Property="Stroke" Value="#E08A10"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="StrokeThickness" Value="4"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#E08A10"
Offset="0"/>
<GradientStop x:Name="DurdurmaOtelemesi"
Color="#E08A10"
Offset="0"/>
<GradientStop x:Name="DurdurmaOtelemesi1"
Color="WhiteSmoke"
Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Border>
<ControlTemplate.Triggers>
<!-- Baslama Butonu -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Aktif" Value="True"/>
<Condition Property="Stil" Value="Baslama"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="BaslamaAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="BaslamaOtelemesi"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetName="BaslamaOtelemesi1"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BaslamaAnimasyonu"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Aktif" Value="True"/>
<Condition Property="Stil" Value="Durdurma"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="DurdurmaAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="DurdurmaOtelemesi"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetName="DurdurmaOtelemesi1"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="DurdurmaAnimasyonu"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!--<Trigger Property="Aktif" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="AktiflikAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="KaydirmaOtelemesi"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetName="KaydirmaOtelemesi1"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
</Trigger.ExitActions>
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This one is code behind;
public class KomutButonlari : ButtonBase
{
static KomutButonlari()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(KomutButonlari), new FrameworkPropertyMetadata(typeof(KomutButonlari)));
}
public enum KomutSinifi
{
Baslama,
Durdurma,
Reset,
HataSilme
}
public KomutSinifi Stil
{
get { return (KomutSinifi)GetValue(StilProperty); }
set { SetValue(StilProperty, value); }
}
// Using a DependencyProperty as the backing store for Stil. This enables animation, styling, binding, etc...
public static readonly DependencyProperty StilProperty =
DependencyProperty.Register("Stil", typeof(KomutSinifi), typeof(KomutButonlari), new PropertyMetadata(KomutSinifi.Baslama));
public bool Aktif
{
get { return (bool)GetValue(AktifProperty); }
set { SetValue(AktifProperty, value); }
}
// Using a DependencyProperty as the backing store for Aktif. This enables animation, styling, binding, etc...
public static readonly DependencyProperty AktifProperty =
DependencyProperty.Register("Aktif", typeof(bool), typeof(KomutButonlari), new PropertyMetadata(false));
}
Here is how i call my buttons;
<StackPanel Grid.Row="3" Grid.ColumnSpan="3" Orientation="Horizontal">
<nesne:KomutButonlari Aktif="{Binding Test1, Mode=TwoWay}" Width="100" Height="100" Margin="10" Stil="Baslama" Click="Button_Click"/>
<nesne:KomutButonlari Aktif="{Binding Test1, Mode=TwoWay}" Width="100" Height="100" Margin="10" Stil="Durdurma"/>
</StackPanel>
And also main window code behind;
private void Button_Click(object sender, RoutedEventArgs e)
{
Test1 = !Test1;
}
To get failure you need to click once to button to trig property change to start animation..
Any idead to implement both style in once like this ?
Update:
Solution is below,
Changing Storyboard.TargetName="BaslamaOtelemesi" to Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)" work well. Also to make multi comparement with condition i just change to multidatatrigger instead datatrigger.
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Baslama">
<Setter Property="Data" Value="M 25 20 L 85 50 25 80 Z"/>
<Setter Property="Stroke" Value="#9928AF23"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="StrokeThickness" Value="4"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#FF28AF23"
Offset="0"/>
<GradientStop Color="#FF28AF23"
Offset="0"/>
<GradientStop Color="WhiteSmoke"
Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Baslama"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Aktif}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard x:Name="BaslamaAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BaslamaAnimasyonu"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>

Answer 1

<!-- Komut Butonlari -->
<Style TargetType="{x:Type local:KomutButonlari}">
<Setter Property="VerticalAlignment"
Value="Top"/>
<Setter Property="HorizontalAlignment"
Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:KomutButonlari}">
<Border x:Name="Sinir"
CornerRadius="50"
BorderThickness="0"
BorderBrush="Transparent">
<Border.Background>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#FF6ff7e8"
Offset="0"/>
<GradientStop Color="#FF1f7ea1"
Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Path x:Name="Ucgen">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<!-- Baslama Sekli -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Baslama">
<Setter Property="Data" Value="M 25 20 L 85 50 25 80 Z"/>
<Setter Property="Stroke" Value="#9928AF23"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="StrokeThickness" Value="4"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#FF28AF23"
Offset="0"/>
<GradientStop Color="#FF28AF23"
Offset="0"/>
<GradientStop Color="WhiteSmoke"
Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Baslama"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Aktif}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard x:Name="BaslamaAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BaslamaAnimasyonu"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Durdurma">
<Setter Property="Data" Value="M 25 20 L 45 20 45 80 25 80 Z M 55 20 L 75 20 75 80 55 80 Z"/>
<Setter Property="Stroke" Value="#99E08A10"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="StrokeThickness" Value="4"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,1">
<GradientStop Color="#E08A10"
Offset="0"/>
<GradientStop Color="#E08A10"
Offset="0"/>
<GradientStop Color="WhiteSmoke"
Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Stil}" Value="Durdurma"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:KomutButonlari}}, Path=Aktif}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard x:Name="DurdurmaAnimasyonu">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
<DoubleAnimation Storyboard.TargetProperty="Fill.(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
To="1"
Duration="0:0:0:3"/>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="DurdurmaAnimasyonu"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>