У меня есть ListBox с элементами, которые будут привязаны к источнику данных, а ItemTemplate будет пользовательским элементом управления. Мне нужно добавить новые элементы в коллекцию источников данных для анимации / перемещения из поля зрения в поле зрения.

Вот что у меня есть. (пожалуйста, не обращайте внимания на отсутствие привязки данных / ItemTemplate) Я хочу сосредоточиться на анимации.

<ListBox Width="350" Height="125">
   <ListBox.ItemContainerStyle>
      <Style TargetType="{x:Type ListBoxItem}">
         <Setter Property="LayoutTransform">
            <Setter.Value>
               <ScaleTransform x:Name="transform"/>
            </Setter.Value>
         </Setter>
         <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" />
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" To="-0"/>
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Style.Triggers>
      </Style>
   </ListBox.ItemContainerStyle>
   <ListBoxItem>
      <Rectangle Width="320" Height="50" Fill="Green">
         <Rectangle.RenderTransform>
            <TranslateTransform X="-50"/>
         </Rectangle.RenderTransform>
      </Rectangle>
   </ListBoxItem>
</ListBox>

Если вы запустите это, вы увидите, что изменение прозрачности работает. Однако элемент не анимируется до 0. Это не сработает, если я добавлю длительность.

1
Sean Hobbs 12 Май 2014 в 18:36

2 ответа

Лучший ответ

Анимация применяется к ListBoxItem благодаря TargetType="{x:Type ListBoxItem}" однако трансформация происходит на Rectangle.RenderTransform. Переместите <TranslateTransform x="-50"> в элемент ListBoxItem RenderTransform.

1
MHollis 12 Май 2014 в 14:45

Вот как я делаю восходящую слайд-анимацию для элементов списка:

<ListBox DataContextChanged="klantListBox_DataContextChanged" Name="klantListBox" Width="380" Height="255" Margin="0 10 10 0" ItemsSource="{Binding}" SelectionChanged="klantListBox_SelectionChanged">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <TranslateTransform Y="230" X="0"  />
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>

                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" To="0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
2
Steven Meiresonne 3 Окт 2014 в 07:35