WPF Stock Ticker/Анимация элемента в ItemTemplate

Question

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

• Я новичок в WPF/XAML и везде я ищу, кажется, относится к silvelight
• Я использую ItemTemplate в ItemsControl, и не могу найти какой-либо примеры, показывающие, как добавить раскадровку для элемента в шаблоне элемента.

вот моя XAML:

<UserControl x:Class="WpfApplication.Ctrls.MessageTicker" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     xmlns:ctrls="clr-namespace:WpfApplication.Ctrls" 
     d:DesignHeight="300" d:DesignWidth="300"> 
<Grid Background="Honeydew"> 
    <ItemsControl ItemsSource="{Binding}" Name="_items"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid x:Name="_panel"> 
        <Grid.Triggers> 
         <EventTrigger RoutedEvent="Grid.Loaded"> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation 
         Storyboard.TargetProperty="(Grid.RenderTransform).(TranslateTransform.X)" 
         Storyboard.TargetName="_panel" 
         From="0" 
         To="360"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
        </Grid.Triggers> 

        <Grid.ColumnDefinitions> 
         <ColumnDefinition></ColumnDefinition> 
         <ColumnDefinition></ColumnDefinition> 
         <ColumnDefinition></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding Path=Word}" Grid.Column="0" Margin="0" FontWeight="Normal" FontFamily="Segoe UI Semibold"/> 
        <TextBlock Text="{Binding Path=Percent}" Grid.Column="1" Margin="5,0,3,0" FontFamily="Segoe UI Mono" Foreground="Blue"/> 
        <Polygon Points="0,10 5,0 10,10" Stroke="Black" Fill="Green" Grid.Column="2" Margin="0,3,10,0"/> 
        <Polygon Points="5,10 10,0 0,0" Stroke="Black" Fill="Red" Grid.Column="2" Visibility="Collapsed"/> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 
</UserControl> 

Из того, что я прочитал, я должен положить раскадровку в шаблоне. Когда я добавляю новый элемент в ItemsControl, ничего не происходит. Мне нужно запустить его в конце элемента ItemsControl и прокрутить вправо до самого начала ItemsControl.

Answer 1

Итак, вы близко, но вам не хватает некоторых ключевых моментов, которые могли бы объяснить, почему он не стреляет, как вы ожидали.

Итак, ваша первая проблема заключается в том, как вы используете _panel. Мы действительно хотим перенести это на RenderTransform на эту грид, которая действует как ваш родитель.

Итак, вместо;

<Grid x:Name="_panel"> 

Мы скажем;

<Grid> 
    <Grid.RenderTransform> 
    <TranslateTransform x:Name="_panel"> 
    </Grid.RenderTransform> 
... 

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

Итак, мы имеем, что теперь давайте говорить к этому Transform через ваш Storyboard и он поговорить с фактическое свойство вашей Transform константы выглядит;

<Storyboard> 
    <DoubleAnimation Storyboard.TargetProperty="X" 
        Storyboard.TargetName="_panel"> 
     <SplineDoubleKeyFrame KeyTime="0:0:0" Value="360" /> 
    </DoubleAnimation> 
</Storyboard> 

Итак, что мы делаем, в основном говорят «ЭЙ _panel, угадайте, что? Вы анимировать, и, прежде чем начать, я хочу, чтобы вы знали, вы двигаетесь 360 по вашей оси X»

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

Помимо этого, вы должны работать. Надеюсь, это поможет, ура.

О, и PS, вы будете удивлены, сколько XAML может работать между WPF/SL/WP и т. Д. И т. Д., Если вы просто знаете основы. Удачи!