WPF股票代码/ ItemTemplate内的动画项目

Question

我正在尝试创建类似于股票行情的用户控件。它会慢慢地将项目向左滚动。到目前为止，我无法得到的东西会因为：

• 我是新来WPF/XAML和我到处寻找似乎适用于 silvelight
• 我用的是ItemsControl的内一个ItemTemplate，并不能找到任何 显示如何为项目模板中的项目添加故事板的示例。

这里是我的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。我们希望实际将其移至此Grid上的RenderTransform，该RenderTransform充当您的父级。

所以不是;

<Grid x:Name="_panel"> 

我们会说;

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

因为在你的故事板的TargetProperty设置不会神奇地追加需求是变换像它看起来你在想它可能（至少我从来没有见过它这样做的方式我不认为）。

因此，我们现在让我们通过您的Storyboard与该变换进行交谈，并与讨论变形的实际属性。

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

所以我们正在做的基本上是说“嘿_panel，你猜怎么着？你到动画，并且开始之前，我想让你知道，你在你的X轴移动360”

我们可以在这里添加一个关键时刻，使其发生在更多的关键帧上，以允许它填充实际动画序列的空白（您的动态链接动画，提示提示），但现在，我们只是告诉那个动作者要移动。

除此之外，你应该工作。希望这有助于，欢呼。

哦，PS，如果你只知道基础知识，你会惊讶XAML可以在WPF/SL/WP等之间工作多少。祝你好运！