XAML DoubleAnimation not fully rending items

Question

I'm trying to create a scrolling news feed purly using XAML and am having some trouble with the feed being cut off. right now I'm just using some fake news headlines in my XmlDataProvider, but they will be coming from an RSS feed.

<Window.Resources>
    <XmlDataProvider x:Key="NewsFeed" XPath="/rss/Channel/Item">
        <x:XData>
            <rss xmlns="">
                <Channel>
                    <Item>
                        <Headline>Cash-Strapped Oklahoma To Conduct Executions By Hammering Squad</Headline>
                    </Item>
                    <Item>
                        <Headline>PetSmart Manager Does Morning Sweep Of Enclosures For Dead Ones Before Opening Doors For Day</Headline>
                    </Item>
                    <Item>
                        <Headline>Lovestruck Arabian Princess Begs Father To Spare John Kerry’s Life</Headline>
                    </Item>
                    <Item>
                        <Headline>Frantic Joe Biden Searching Dog Shelter For Bo Look-Alike</Headline>
                    </Item>
                    <Item>
                        <Headline>Pope Tweets Picture Of Self With God</Headline>
                    </Item>
                    <Item>
                        <Headline>Wes Welker Fielding Offers From Numerous Concussion Researchers</Headline>
                    </Item>
                </Channel>
            </rss>
        </x:XData>
    </XmlDataProvider>
</Window.Resources>

Here is the grid with the Item control that contains the animated text.

    <Grid Background="Gray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Label Content="RSS" FontSize="16" Margin="10,0,0,0" FontStyle="Italic" Foreground="White" />
    <ItemsControl Grid.Row="0" Grid.Column="1" Margin="10,0,10,0" Height="35" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Padding="0" DataContext="{Binding Source={StaticResource NewsFeed}, XPath=/rss/Channel/Item}" ItemsSource="{Binding XPath=//Headline}">
        <!-- -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <Border BorderBrush="CadetBlue" BorderThickness="2" Height="Auto" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" ClipToBounds="True">
                    <StackPanel ClipToBounds="True">
                        <StackPanel.RenderTransform>
                            <TranslateTransform x:Name="translate" />
                        </StackPanel.RenderTransform>
                        <StackPanel.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimation From="1000" To="-1000" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </StackPanel.Triggers>
                        <ItemsPresenter />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Background="CadetBlue" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" ClipToBounds="True" Margin="3">
                    <TextBlock VerticalAlignment="Center" Foreground="Black" Text="//" Margin="0,0,8,0" ClipToBounds="True" />
                    <TextBlock VerticalAlignment="Center" Foreground="LightYellow" Text="{Binding Path=InnerText}" Margin="0,0,8,0" ClipToBounds="True" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Control.Margin" Value="5" />
                <Setter Property="Control.VerticalAlignment" Value="Stretch" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

The animation is working, but is cutting off the third headline. Right now it shows about 3 of the 6 headlines. Why aren't all the headlines being rendered?

third headline is cut off, as well as the rest of the feed

score 0 · Answer 1 · answered Apr 22 '15 at 15:44

Something like this should work:

<ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
        <Border BorderBrush="CadetBlue" BorderThickness="2" Height="Auto"
                HorizontalAlignment="Stretch" VerticalAlignment="Center"
                ClipToBounds="True">
            <ItemsPresenter />
        </Border>
    </ControlTemplate>
</ItemsControl.Template>

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal">
            <StackPanel.RenderTransform>
                <TranslateTransform />
            </StackPanel.RenderTransform>
            <StackPanel.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation 
                                Storyboard.TargetProperty="RenderTransform.X"
                                From="1000" To="-1000" Duration="0:0:25" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </StackPanel.Triggers>
        </StackPanel>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

XAML DoubleAnimation not fully rending items

1 Answers1