选定项目更改后的WPF动画（滑入和滑出）

Question

我在一列中有一个带有列表框的网格，在另一列中有一个列表框的选定项目。我想在更改所选工具时添加动画。并要求动画滑出上一个选定的项目并在当前所选项目中滑动。这可能只是使用简单的XAML吗？

现在，我只能添加动画从左侧滑动，这也超出边距。

是否可以建立像this link这样的动画（即）之前选择的项目必须滑出并消失，同时当前所选项目必须滑入并占据整个空间？

以下是我的代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SubtoolSection_TargetUpdated(object sender, DataTransferEventArgs e)
    {

            var sb = (Storyboard)FindResource("FlowRight");
            sb.Begin();
    }
}

public class ViewModel
{

    public ObservableCollection<ItemClass> ListSource { get; set; }

    public ItemClass SelectedItem { get; set; }
    public ViewModel()
    {
        ListSource = new ObservableCollection<ItemClass>();
        ListSource.Add(new ItemClass() { ItemName = "Item1", Background = new SolidColorBrush(Colors.SkyBlue) });
        ListSource.Add(new ItemClass() { ItemName = "Item2", Background = new SolidColorBrush(Colors.Silver) });
        ListSource.Add(new ItemClass() { ItemName = "Item3", Background = new SolidColorBrush(Colors.SlateBlue) });
        ListSource.Add(new ItemClass() { ItemName = "Item4", Background = new SolidColorBrush(Colors.SpringGreen) });
        SelectedItem = ListSource[0];
    }
}

public class ItemClass
{
    public string ItemName { get; set; }
    public SolidColorBrush Background { get; set; }

}

我的XAML代码，

<Window x:Class="SlideSelectedToolAnimation.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SlideSelectedToolAnimation"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Window.Resources>
    <Storyboard x:Key="FlowRight" Storyboard.TargetProperty="Margin" Storyboard.TargetName="SubtoolSection">
        <ThicknessAnimation From ="-200,0,0,0" To="0 , 0 , 0, 0" Duration="0:0:0.2"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"/>
        <ColumnDefinition Width="50*"/>
    </Grid.ColumnDefinitions>
    <ListBox Grid.Column="0" x:Name="myList" ItemsSource="{Binding ListSource}" SelectedItem="{Binding SelectedItem}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding ItemName}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
     </ListBox>
    <Border Grid.Column="1" Background="{Binding SelectedItem.Background}"  x:Name="SubtoolSection"  >
        <TextBlock TargetUpdated="SubtoolSection_TargetUpdated" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding SelectedItem.ItemName, NotifyOnTargetUpdated=True}"/>
    </Border>
</Grid>