Раскадровка Silverlight DataTemplate

Question

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

Я прочитал несколько учебных пособий и могу создать простую анимацию с событиями MouseEnter и MouseLeave, однако в моей таблице данных она не работает.

ПОПЫТКА 1

<DataTemplate x:Key="StepBreadcrumbItem">
            <Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60">
                <Border.Triggers>
                    <EventTrigger RoutedEvent="Border.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.5" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                    <EventTrigger RoutedEvent="Border.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" To="60" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Border.Triggers>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text=" > " />
                    <TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/>
                    <TextBlock Text="{Binding Name, Mode=OneWay}"/>
                </StackPanel>
            </Border>
        </DataTemplate>

Чего мне не хватает? Работает нормально для одного элемента. Я получаю сообщение об ошибке Error: Unhandled Error in Silverlight Application Code: 2531<br> Category: ParserError<br> Message: Failed to assign to property 'System.Windows.EventTrigger.RoutedEvent'.

ПОПЫТКА 2 Теперь я реализовал это по-другому, используя событие MouseEnter. Поскольку попытка 1 не удалась.

<DataTemplate x:Key="StepBreadcrumbItem">
            <Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60" MouseLeave="CollapseBreadcrumb" MouseEnter="ExpandBreadcrumb">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text=" > " />
                    <TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/>
                    <TextBlock Text="{Binding Name, Mode=OneWay}"/>
                </StackPanel>
            </Border>
        </DataTemplate>

private void CollapseBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e)
        {
            var border = sender as Border;

            var duration = TimeSpan.FromMilliseconds(1000);

            var sb = new Storyboard { Duration = duration };
            var doubleAnimation = new DoubleAnimation
            {
                BeginTime = TimeSpan.FromSeconds(1),
                Duration = duration,
                To = 50
            };
            sb.Children.Add(doubleAnimation);

            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)"));
            Storyboard.SetTarget(doubleAnimation, border);

            sb.Begin();
        }

        private void ExpandBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e)
        {
            var border = sender as Border;

            var duration = TimeSpan.FromMilliseconds(1000);

            var sb = new Storyboard {Duration = duration};
            var doubleAnimation = new DoubleAnimation
            {
                BeginTime = TimeSpan.FromSeconds(0),
                Duration = duration,
                To = 100
            };

            sb.Children.Add(doubleAnimation);

            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)"));
            Storyboard.SetTarget(doubleAnimation, border);

            sb.Begin();
        }

Однако теперь он расширяется только тогда, когда на меня наведена мышь, останавливается, когда я оставляю мышь, и не запускает коллапс. Кроме того, причина, по которой я настроил раскадровку pro на грамматическом уровне, заключается в том, что когда я определил две раскадровки и просто переназначил их на другой элемент, это выглядело очень плохо, когда я перемещал мышь по всем элементам списка.

Answer 1

К сожалению, Silverlight поддерживает только Loaded EventTrigger.

Обходной путь довольно прост, используйте Behaviors.Вам просто нужно использовать ControlStoryboardAction или GoToStateAction для запуска анимации.

Примерно так:

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

Это и это может быть хорошим началом.:)

Обновление

Вам лучше сделать такую ​​анимацию в вашем xaml.По сути, вам нужно создать визуальную группу состояний, которая имеет два состояния: Normal и MouseOver.А затем активируйте их с помощью GoToStateAction.

You would have something like this,
            <Border x:Name="border" Width="60" Background="Gray">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="VisualStateGroup">
                        <VisualStateGroup.Transitions>
                            <VisualTransition/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <!-- your storyboard here -->
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeave">
                        <ei:GoToStateAction StateName="Normal"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseEnter">
                        <ei:GoToStateAction StateName="MouseOver"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>

Обновление 2

На самом деле вам даже не нужно создавать визуальную группу состояний ... Просто используйте ControlStoryboardAction, как это.

    <DataTemplate x:Key="ItemTemplate">
        <Border x:Name="border" Width="60" Background="Gray" RenderTransformOrigin="0.5,0.5">
            <Border.Resources>
                <Storyboard x:Name="expand">
                    <DoubleAnimation Duration="0:0:0.4" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                </Storyboard>
                <Storyboard x:Name="collapse">
                    <DoubleAnimation Duration="0:0:0.4" To="60" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                </Storyboard>
            </Border.Resources>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeave">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource collapse}"/>
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseEnter">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource expand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <StackPanel Height="32" Width="26">
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Order}"/>
            </StackPanel>
        </Border>
    </DataTemplate>