ItemTemplate 中的 WPF Stock Ticker/Animate 项

Question

我正在尝试创建类似于股票报价器的用户控件。它会缓慢地将项目滚动到左侧。到目前为止，我无法进行任何操作，因为：

我是 WPF/XAML 的新手，我搜索的所有地方似乎都适用于银光
我在 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。

所以不是;

<Grid x:Name="_panel">

我们会说；

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

因为您在情节提要中的 TargetProperty 设置不会像您认为的那样神奇地附加按需变换（至少我从未见过这样做我不知道不想想）。

所以我们有了那个，现在让我们通过你的 Storyboard 与那个 Transform 对话，让它与你的 Transform 的 一个实际的属性 对话;

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

所以我们所做的基本上是在说 "HEY _panel, guess what? You get to animate, and before you start I want you to know you're moving 360 across your X axis"

我们可以在此处添加一个关键时间，使其在更多关键帧上发生，以允许它填充实际动画序列（您的自动收报机动画，提示提示）的空白，但现在，我们只是告诉那个错误移动。

除此之外，你应该工作。希望这有帮助，干杯。

Oh 和 PS，如果您只了解基础知识，您会惊讶于 XAML 可以在 WPF/SL/WP 之间发挥多大作用，等等。祝你好运！

ItemTemplate 中的 WPF Stock Ticker/Animate 项

WPF Stock Ticker/Animate item within ItemTemplate

.net

c#

wpf

xaml