[WPF] 애니메이션 토글버튼

2023-02-14 오류

mvvm 방식으로 해당 스타일이 적용된 버튼을 컨트롤하려고하는데
Storyboard.TargetName을 찾을수 없다는 예외 처리 오류가 발생
해당 부분을 Storyboard.Target="{Binding ElementName=Border} 로 변경하니
실행은 되나 애니메이션이 비정상적으로 동작합니다.

XAML소스

    <!-- Colors -->

    <!-- Background Colors -->
    <SolidColorBrush x:Key="PrimaryBackgroundColor" Color="#14181D"/>
    <SolidColorBrush x:Key="SecundaryBackgroundColor" Color="#1C1C25"/>

    <!-- Primary Colors -->
    <SolidColorBrush x:Key="PrimaryBlueColor" Color="#234E46"/>
    <SolidColorBrush x:Key="PrimaryGrayColor" Color="#DFDFDF"/>

    <!-- Secundary Colors -->
    <SolidColorBrush x:Key="SecundaryBlueColor" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="SecundaryGrayColor" Color="#CECECE"/>

    <!-- Tertiary Colors -->
    <SolidColorBrush x:Key="TertiaryBlueColor" Color="#FFFFFF"/>

    <!-- BorderBrush Colors -->
    <SolidColorBrush x:Key="BorderBrushColor" Color="#234E46"/>

    <!-- Text Colors -->
    <SolidColorBrush x:Key="PrimaryTextColor" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="ProTextColor" Color="#FFFFFF"/>


    <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="{DynamicResource SecundaryGrayColor}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryGrayColor}"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="100"/>
        <Setter Property="MaxHeight" Value="50"/>
        <Setter Property="MaxWidth" Value="100"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <Border x:Name="Border"
                                Background="{TemplateBinding Background}"
                                CornerRadius="25"
                                Height="45"
                                Width="100"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                            <!-- Optional -->
                            <!--<Border.Effect>
                                <DropShadowEffect ShadowDepth="0.5" Opacity=".2"/>
                            </Border.Effect>-->
                        </Border>
                        <Ellipse x:Name="Ellipse"
                                     Height="42"
                                     Width="42"
                                     VerticalAlignment="Center"
                                     HorizontalAlignment="Left"
                                     Fill="{DynamicResource PrimaryTextColor}"
                                     Stroke="{TemplateBinding BorderBrush}"
                                     StrokeThickness="3">
                            <!-- Optional -->
                            <!--<Ellipse.Effect>
                                <DropShadowEffect ShadowDepth="0.5" Opacity=".2"/>
                            </Ellipse.Effect>-->
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!-- EventTrigger Checked -->
                        <EventTrigger RoutedEvent="Checked">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        To="#234E46" Duration="0:0:0.2"/>
                                    <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                            Storyboard.TargetProperty="Margin"
                                                            To="57 0 0 0" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <!-- EventTrigger UnChecked -->
                        <EventTrigger RoutedEvent="Unchecked">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Border"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        To="#CECECE" Duration="0:0:0.2"/>
                                    <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                            Storyboard.TargetProperty="Margin"
                                                            To="0 0 0 0" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>

                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Ellipse"
                                    Property="Fill"
                                    Value="{DynamicResource SecundaryBlueColor}"/>
                            <Setter TargetName="Ellipse"
                                   Property="Stroke"
                                   Value="{DynamicResource BorderBrushColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

참고자료
참고영상 링크