WPF Switching path property with enum then animation fail when started

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 additionally implemented 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 idea to implement both style in once like this ?

Leave a Comment