WPF Border Slide Animation

1. Xaml Code

Radio Button 2개를 만들고 그 아래 Border 를 배치한다.

<Grid>
  <StackPanel Orientation="Horizontal">
     <RadioButton Content="버튼 일번" 
                  d:IsChecked="True"
                  IsChecked="{Binding SelectedMenu, Converter={cv:SelectedMenuToBoolConverter}, ConverterParameter={x:Static enum:EMenu.Num1}}"/>
     <RadioButton Content="버튼튼 이번"
                  IsChecked="{Binding SelectedMenu, Converter={cv:SelectedMenuToBoolConverter}, ConverterParameter={x:Static enum:EMenu.Num2}}"/>
 </StackPanel>
 <Border Grid.Row="1"
         BorderBrush="#353C4B"
         BorderThickness="0 0 0 3"
         CornerRadius="3"
         HorizontalAlignment="Left"
         Width="66"
         Margin="0 0 0 5">
     <!-- RenderTransform 추가 -->
     <Border.RenderTransform>
         <TransformGroup>
             <ScaleTransform/>
             <TranslateTransform />
         </TransformGroup>
     </Border.RenderTransform>
     <Border.Style>
         <Style TargetType="{x:Type Border}">
             <Style.Triggers>
                 <!-- EMenu.Num1 -->
                 <DataTrigger Binding="{Binding SelectedMenu}" Value="{x:Static enum:EMenu.Num1}">
                     <DataTrigger.EnterActions>
                         <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          To="1.0" Duration="0:0:0.3" />
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].X"
                          To="10" Duration="0:0:0.3" />
                             </Storyboard>
                         </BeginStoryboard>
                     </DataTrigger.EnterActions>
                     <DataTrigger.ExitActions>
                         <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          To="1" Duration="0:0:0.3" />
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].X"
                          To="8" Duration="0:0:0.3" />
                             </Storyboard>
                         </BeginStoryboard>
                     </DataTrigger.ExitActions>
                 </DataTrigger>

                 <!-- EMenu.Num2 -->
                 <DataTrigger Binding="{Binding SelectedMenu}" Value="{x:Static enum:EMenu.Num2}">
                     <DataTrigger.EnterActions>
                         <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          To="1.22" Duration="0:0:0.3" />
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].X"
                          To="79" Duration="0:0:0.3" />
                             </Storyboard>
                         </BeginStoryboard>
                     </DataTrigger.EnterActions>
                     <DataTrigger.ExitActions>
                         <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          To="1" Duration="0:0:0.3" />
                                 <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].X"
                          To="8" Duration="0:0:0.3" />
                             </Storyboard>
                         </BeginStoryboard>
                     </DataTrigger.ExitActions>
                 </DataTrigger>
             </Style.Triggers>
         </Style>
     </Border.Style>
 </Border>
</Grid>

2. ViewModel Code

RadioButton IsChecked 에 바인딩할 속성 구현

Community Toolkit 이용
EMenu enum 은 Num1, Num2 를 가짐

[ObservableProperty]
private EMenu selectedMenu;

3. Converter Code

SelectedMenu 가 변경될때마다 처리할 Converter
MarkupExtension 을 이용하면 Xaml 에서 선언을 따로 안해도 사용 가능

 public class SelectedMenuToBoolConverter : MarkupExtension, IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is EMenu eMenu && parameter is EMenu eParam)
       {
           return eMenu == eParam;
       }
       return false;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is bool bValue && bValue && parameter is EMenu eParam)
       {
           return eParam;
       }
       return Binding.DoNothing;
   }

   public override object ProvideValue(IServiceProvider serviceProvider)
   {
       return this;
   }
}