Анимации между различными состояниями ListboxItem

Question

Я пытаюсь реализовать ListBox, где выбранный элемент отображается более подробно, чем остальные.Один из подходов показан Джошем Смитом на его блоге .

. Чтобы улучшить взаимодействие с пользователем, я бы хотел оживить изменение (т. Е. Элемент становится больше, появляется дополнительная информация).Использование DataTriggers Enter- или ExitActions для запуска раскадровки имеет недостатки:

• У меня нет многократно используемого шаблона для детального просмотра (он просто существует как конечное состояние анимации).
• Каждое изменение в подробном представлении необходимо обрабатывать на двух анимациях, а не один раз.

Есть ли другой подход, который легче обслуживать?

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>

Но я думаю, что привязка контента с датой непосредственно к ContentPresenter.Content также возможна.

Если Подробности являются дополнительными и не предназначены для замены Compact , просто удалите все DoubleAnimation из Storyboard с Storyboard.TargetName="Compact".

Надеюсь, это поможет.