一个ListBoxItem中的不同状态之间动画 [英] Animations between different states of a ListboxItem

问题描述

我尝试实施显示所选的项目显示在比别人更详细的列表框。一种方法是由约什 - 史密斯所示的他的博客。

I try to implement a ListBox where the selected item is displayed in more detail than the others. One approach is shown by Josh Smith on his blog.

要提升用户体验，我想动画（即越来越大的项目，更多的信息淡入）的变化。
使用DataTriggers进入─或ExitActions开始故事板有disadvandates，即

To enhance the user experience, I'd like to animate the change (i.e. the item growing larger, additional information fading in). Using the DataTriggers Enter- or ExitActions to start Storyboard has the disadvandates, that

• 我有详细视图（它只是存在，作为动画的最终状态）。没有可重复使用的模板


• 要详细视图HS每一个改变都将在两个动画中工作，而不是只一次。

有另一种方法，多数民众赞成更容易维护？

Is there another approach thats more easily maintainable?

推荐答案

您可以使用此 ListBox.ItemContainerStyle 和调整您的需求。

You could use this ListBox.ItemContainerStyle and adjust it for your needs.

<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>

在这种情况下，我已宣布模板作为资源。

In this case I have declared the templates as resources.

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

不过我觉得直接结合datatemplated含量内容presenter.Content 也是可能的。

如果详情是额外的而不是替代的紧凑后，只要删除所有 DoubleAnimation是从故事板的与 Storyboard.TargetName =紧凑型。

If Details are additional and not for replacement of Compact, simply remove all DoubleAnimation from Storyboard with Storyboard.TargetName="Compact".

希望这有助于。

Hope this helps.

这篇关于一个ListBoxItem中的不同状态之间动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！