WPF C#中ComboBox切换时StackPanel动画异常的解决问询

在WPF C#中为StackPanel和ComboBox创建了滑入、滑出动画资源及样式，通过ComboBox的SelectedPanel绑定值控制对应StackPanel的显示。最初实现时，面板滑入后会自动消失；修改配置后面板可停留，但动画效果丢失。现需实现：切换ComboBox选中项时，对应StackPanel正常滑入并停留，切换其他选项时滑出，且每次选中目标项都能触发动画。

原始代码 #

动画资源字典 #

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Storyboard x:Key="SlideInStoryboard" FillBehavior="Stop">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                         From="100" To="0" Duration="0:0:5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>

        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="SlideOutStoryboard" FillBehavior="Stop">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                         From="0" To="100" Duration="0:0:5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="1" To="0" Duration="0:0:5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Style x:Key="AnimatedPanelStyle" TargetType="StackPanel">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Opacity" Value="0"/>
        <Style.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource SlideInStoryboard}"/>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

ComboBox 代码 #

<ComboBox x:Name="SelectionSelector" Grid.Column="1" 
 HorizontalAlignment="Stretch" 
 VerticalAlignment="Center"
 Width="Auto" Height="25" 
 Background="White" 
 Margin="93,0,5,0" ItemsSource="{Binding ConfigOptions}"
 DisplayMemberPath="Name" SelectedValuePath="Tag"
 SelectedValue="{Binding SelectedPanel}"/>

StackPanel 代码 #

<StackPanel Grid.Row="1">
    <StackPanel.Style>
        <Style TargetType="StackPanel" BasedOn="{StaticResource AnimatedPanelStyle}">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedPanel}" Value="Selection1">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>

                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource SlideInStoryboard}"/>
                    </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="Visibility" Value="Collapsed">
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource SlideOutStoryboard}"/>
                    </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="Visibility" Value="Hidden">
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource SlideOutStoryboard}"/>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Content="Text:" FontWeight="Bold"/>
        <TextBox Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="Auto" Height="25" Background="White" Margin="100,0,5,0"/>
    </Grid>
</StackPanel>

修改后的代码 #

StackPanel 代码 #

<StackPanel x:Name="Selection1Panel" Grid.Row="1">
    <StackPanel.Style>
        <Style TargetType="StackPanel" BasedOn="{StaticResource AnimatedPanelStyle}">
            <Setter Property="Visibility" Value="Collapsed" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedPanel}" Value="Selection1">
                    <Setter Property="Visibility" Value="Visible" />
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource SlideInStoryboard}" />
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource SlideOutStoryboard}" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Style>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Content="Path:" FontWeight="Bold"/>
        <TextBox Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="Auto" Height="25" Background="White" Margin="100,0,5,0"/>
    </Grid>
</StackPanel>

动画资源字典 #

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Storyboard x:Key="SlideInStoryboard" FillBehavior="HoldEnd">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                         From="100" To="0" Duration="0:0:1.5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>

        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:1.5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="SlideOutStoryboard" FillBehavior="Stop">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                         From="0" To="100" Duration="0:0:1.5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="1" To="0" Duration="0:0:1.5">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Style x:Key="AnimatedPanelStyle" TargetType="StackPanel">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="100"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Opacity" Value="0"/>
        <Style.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource SlideInStoryboard}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.Unloaded">
                <BeginStoryboard Storyboard="{StaticResource SlideOutStoryboard}"/>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

内容的提问来源于stack exchange，提问作者NeoGenesis521