c# - ListboxItem 不同状态之间的动画

Question

我尝试实现一个 ListBox，其中所选项目比其他项目更详细地显示。 Josh Smith 在 his blog 上展示了一种方法.

为了增强用户体验，我想对变化进行动画处理(即项目变大，附加信息淡入)。使用 DataTriggers Enter- 或 ExitActions 启动 Storyboard 有缺点，即

• 我没有可重复使用的详细 View 模板(它只是作为动画的结束状态存在)。
• 详细 View 的每次更改都将在两个动画中起作用，而不是一次。

还有其他更易于维护的方法吗？

Answer 1

您可以使用此 ListBox.ItemContainerStyle 并根据您的需要进行调整。

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">                                
                <Border>
                    <StackPanel>
                        <ContentPresenter x:Name="Compact"
                                Opacity="1"
                                ContentTemplate="{StaticResource UnselectedDataTemplate}">
                            <ContentPresenter.LayoutTransform>
                                <ScaleTransform ScaleY="1" />
                            </ContentPresenter.LayoutTransform>
                        </ContentPresenter>

                        <ContentPresenter x:Name="Details"
                                Opacity="0"
                                ContentTemplate="{StaticResource SelectedDataTemplate}">
                            <ContentPresenter.LayoutTransform>
                                <ScaleTransform ScaleY="0" />
                            </ContentPresenter.LayoutTransform>
                        </ContentPresenter>
                    </StackPanel>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="SelectionStates">
                            <VisualState Name="Unselected">
                                <Storyboard SpeedRatio="2">
                                    <DoubleAnimation To="1"
                                            Storyboard.TargetName="Compact"
                                            Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation To="1"
                                            Storyboard.TargetName="Compact"
                                            Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                    <DoubleAnimation To="0"
                                            Storyboard.TargetName="Details"
                                            Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation To="0"
                                            Storyboard.TargetName="Details"
                                            Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                </Storyboard>
                            </VisualState>

                            <VisualState Name="Selected">
                                <Storyboard SpeedRatio="2">
                                    <DoubleAnimation To="0"
                                            Storyboard.TargetName="Compact"
                                            Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation To="0"
                                            Storyboard.TargetName="Compact"
                                            Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                    <DoubleAnimation To="1"
                                            Storyboard.TargetName="Details"
                                            Storyboard.TargetProperty="Opacity" />
                                    <DoubleAnimation To="1"
                                            Storyboard.TargetName="Details"
                                            Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>                            
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这种情况下，我已将模板声明为资源。

<DataTemplate x:Key="UnselectedDataTemplate">
    /* your controls for unselected state */
</DataTemplate>
<DataTemplate x:Key="SelectedDataTemplate">
    /* your controls for selected state */
</DataTemplate>

但我认为将数据模板化的内容直接绑定(bind)到 ContentPresenter.Content 也是可能的。

如果 Details 是额外的并且不是为了替换 Compact，只需从 Storyboard 中删除所有 DoubleAnimation 和 Storyboard .TargetName="Compact".

希望这会有所帮助。