Question

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

为了增强用户体验，我想对更改进行动画处理（即项目越来越大，其他信息逐渐消失）。使用DataTriggers Enter-或ExitActions启动Storyboard有disadvandates，

我没有详细视图的可重用模板（它只是作为动画的结束状态存在）。
详细视图的每次更改都要在两个动画中进行，而不是只进行一次。

还有另一种方法更易于维护吗？

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>

但我认为将datatemplated内容直接绑定到ContentPresenter.Content也是可能的。

如果详细信息是额外的，而不是替换压缩，则只需使用DoubleAnimation从Storyboard删除所有Storyboard.TargetName="Compact"。

希望这会有所帮助。

ListboxItem的不同状态之间的动画

1 个答案: