How to execute color animation which is inside the template style like a storyboard?

رضا جافری 1,296

First and foremost, I apologize for my grammatical errors; my first language is Persian (Iran).
I have a button that I changed its appearance and I wanting to change color of lines that is inside it with Color Animation.but this error was displaying: "'LineA' name cannot be found in the name scope of 'Libraries.SettingsWindow'"

Code behind

bool CustomButtonIsChecked = true;
private void AutomaticSystemCalendar_CustomBorder_PreviewMouseLeftButtonDown(object sender, 
MouseButtonEventArgs e)
{
    switch (CustomButtonIsChecked)
    {
        case true:
            (Resources["CustomButtonIsCheckedFalse"] as Storyboard).Begin();
            (Resources["CustomButtonLineAIsCheckedFalse"] as Storyboard).Begin();
            (Resources["CustomButtonLineBIsCheckedFalse"] as Storyboard).Begin();
            (Resources["CustomButtonLineCIsCheckedFalse"] as Storyboard).Begin();
            CustomButtonIsChecked = false;
            break;
        case false:
            (Resources["CustomButtonIsCheckedTrue"] as Storyboard).Begin();
            (Resources["CustomButtonLineAIsCheckedTrue"] as Storyboard).Begin();
            (Resources["CustomButtonLineBIsCheckedTrue"] as Storyboard).Begin();
            (Resources["CustomButtonLineCIsCheckedTrue"] as Storyboard).Begin();
            CustomButtonIsChecked = true;
            break;
    }
}

XAML code

<Window.Resources>
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="Border" Cursor="Hand" BorderBrush="DarkGray" BorderThickness="0.5" CornerRadius="9" Background="WhiteSmoke">
                        <StackPanel Margin="0,0,0,0" Height="24" Width="24">
                            <Line x:Name="LineA" Stroke="Green" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="9" Y2="9"/>
                            <Line x:Name="LineB" Stroke="White" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="2" Y2="2"/>
                            <Line x:Name="LineC" Stroke="Red" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="2" Y2="2"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
        <Storyboard x:Key="CustomButtonLineAIsCheckedTrue">
        <ColorAnimation From="{x:Null}" To="Green" Duration="00:00:01" Storyboard.TargetName="LineA" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
    <Storyboard x:Key="CustomButtonLineAIsCheckedFalse">
        <ColorAnimation From="Green" To="{x:Null}" Duration="00:00:01" Storyboard.TargetName="LineA" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
    <Storyboard x:Key="CustomButtonLineBIsCheckedTrue">
        <ColorAnimation From="{x:Null}" To="White" Duration="00:00:01" Storyboard.TargetName="LineB" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
    <Storyboard x:Key="CustomButtonLineBIsCheckedFalse">
        <ColorAnimation From="White" To="{x:Null}" Duration="00:00:01" Storyboard.TargetName="LineB" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
    <Storyboard x:Key="CustomButtonLineCIsCheckedTrue">
        <ColorAnimation From="{x:Null}" To="Red" Duration="00:00:01" Storyboard.TargetName="LineC" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
    <Storyboard x:Key="CustomButtonLineCIsCheckedFalse">
        <ColorAnimation From="Red" To="{x:Null}" Duration="00:00:01" Storyboard.TargetName="LineC" SpeedRatio="4" AutoReverse="False"/>
    </Storyboard>
</Window.Resources>
<Grid>
<Grid.Children>
            <Border x:Name="AutomaticSystemCalendar_CustomBorder" PreviewMouseLeftButtonDown="AutomaticSystemCalendar_CustomBorder_PreviewMouseLeftButtonDown" Cursor="Hand" CornerRadius="9" BorderBrush="DarkGray" BorderThickness="0.5" Margin="369,371,0,0" Height="24" Width="72" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#858d68" Offset="0"/>
                    <GradientStop Color="#cbd3ae" Offset="0.5"/>
                    <GradientStop Color="#e9f1cc" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Button x:Name="AutomaticSystemCalendar_CustomButton" Style="{StaticResource CustomButtonStyle}" Margin="0,0,0,-1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="24" Width="24">
                <Button.Effect>
                    <BlurEffect Radius="0"/>
                </Button.Effect>
            </Button>
        </Border>
    </Grid.Children>
</Grid>

Thanks

Accepted answer

DaisyTian-1203 11,621

I update your Style code as below:
Xaml code:

    <Window.Resources>  
            <Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">  
                <Setter Property="Template">  
                    <Setter.Value>  
                        <ControlTemplate x:Name="MyControlTemplate" TargetType="{x:Type Button}">  
                            <Border x:Name="MyBorder" Cursor="Hand" BorderBrush="DarkGray" BorderThickness="0.5" CornerRadius="9" Background="WhiteSmoke">  
                                <StackPanel Margin="0,0,0,0" Height="24" Width="24">  
                                    <Line Name="LineA" Stroke="Green" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="9" Y2="9"/>  
                                    <Line Name="LineB" Stroke="White" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="2" Y2="2"/>  
                                    <Line Name="LineC" Stroke="Red" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="4" X2="20" Y1="2" Y2="2"/>  
                                </StackPanel>  
                                <Border.Resources>  
                                        <Storyboard x:Key="CustomButtonLineAIsCheckedTrue">  
                                        <ColorAnimation From="Transparent" To="Green" Duration="00:00:01" Storyboard.TargetName="LineA" Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)"  SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                        <Storyboard x:Key="CustomButtonLineAIsCheckedFalse">  
                                        <ColorAnimation From="Green" To="Transparent" Duration="00:00:01" Storyboard.TargetName="LineA"  Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)" SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                        <Storyboard x:Key="CustomButtonLineBIsCheckedTrue">  
                                        <ColorAnimation From="Transparent" To="White" Duration="00:00:01" Storyboard.TargetName="LineB"  Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)"  SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                        <Storyboard x:Key="CustomButtonLineBIsCheckedFalse">  
                                        <ColorAnimation From="White" To="Transparent" Duration="00:00:01" Storyboard.TargetName="LineB"  Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)"  SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                        <Storyboard x:Key="CustomButtonLineCIsCheckedTrue">  
                                        <ColorAnimation From="Transparent" To="Red" Duration="00:00:01" Storyboard.TargetName="LineC"  Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)"  SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                        <Storyboard x:Key="CustomButtonLineCIsCheckedFalse">  
                                        <ColorAnimation From="Red" To="Transparent" Duration="00:00:01" Storyboard.TargetName="LineC"  Storyboard.TargetProperty="(Line.Stroke).(SolidColorBrush.Color)"  SpeedRatio="4" AutoReverse="False"/>  
                                        </Storyboard>  
                                </Border.Resources>  
                            </Border>  
                        </ControlTemplate>  
                          
                    </Setter.Value>  
                </Setter>  
                  
            </Style>  
        </Window.Resources>

The C# code is:

 private void AutomaticSystemCalendar_CustomBorder_PreviewMouseLeftButtonDown(object sender,  MouseButtonEventArgs e)  
        {  
            Border border = (Border)AutomaticSystemCalendar_CustomButton.Template.FindName("MyBorder", AutomaticSystemCalendar_CustomButton);  
  
            if (border == null) return;  
            switch (CustomButtonIsChecked)  
            {  
                case true:  
  
                    (border.Resources["CustomButtonLineAIsCheckedFalse"] as Storyboard).Begin();  
                    (border.Resources["CustomButtonLineBIsCheckedFalse"] as Storyboard).Begin();  
                    (border.Resources["CustomButtonLineCIsCheckedFalse"] as Storyboard).Begin();  
                    CustomButtonIsChecked = false;  
                    break;  
                case false:  
                    (border.Resources["CustomButtonLineAIsCheckedTrue"] as Storyboard).Begin();  
                    (border.Resources["CustomButtonLineBIsCheckedTrue"] as Storyboard).Begin();  
                    (border.Resources["CustomButtonLineCIsCheckedTrue"] as Storyboard).Begin();  
  
                    CustomButtonIsChecked = true;  
                    break;  
            }  
        }

The result is:

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

رضا جافری 1,296 Reputation points

2021-05-05T01:04:27.7+00:00

It was great, Thanks
DaisyTian-1203 11,621 Reputation points

2021-05-05T01:09:32.853+00:00

@64936295
I'm glad my answer was helpful to you, and I updated as you said.
رضا جافری 1,296 Reputation points

2021-05-05T01:16:16.243+00:00

♥♥♥♥♥♥♥♥♥♥

Share via

How to execute color animation which is inside the template style like a storyboard?

0 additional answers

Your answer