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等之間工作多少。祝你好運！