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。我们希望实际将其移动到此网格上的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>

所以我们所做的基本上是说＆＃34; HEY _panel，猜怎么着？你开始制作动画，在你开始之前我希望你知道你在X轴上移动360并且＃34;

我们可以在这里添加一个关键时间，让它在更多关键帧上发生，以允许它填写实际动画序列的空白（你的自动收报机动漫，提示提示）但是现在，我们只是告诉那个bugger移动。

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

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

ItemTemplate中的WPF股票代码/ Animate项目

1 个答案: