Solent

Hi,

I am trying to develop a rolling counter, similar to that found on a mileometer of a car, where the numbers scroll around. Has anyone seen a sample of such a thing in WPF or anything similar or any ideas where I could start.

Thanks in advance



Re: Windows Presentation Foundation (WPF) Counter

Solent

Well I have managed to create something similar in the code below, however there seems to be a delay in going back to 0 after the nine. Can anybody improve the code or make recommendations, Thanks

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Border BorderBrush="Black" BorderThickness="2,2,2,2" Canvas.Top="50" Canvas.Left="50" ClipToBounds="True" Width="30" Height="30" Background="Black">

<Canvas Canvas.Top="60" Canvas.Left="60" Height="20">
<Canvas.RenderTransform>
<TranslateTransform Y="50"/>
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.RenderTransform).(TranslateTransform.Y)" To="-700" RepeatBehavior="Forever" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>

<TextBlock FontSize="30" FontWeight="Bold" FontFamily="Ariel" Foreground="White" TextWrapping="Wrap" Margin="5" VerticalAlignment="Center">0
<LineBreak/> 1
<LineBreak/> 2
<LineBreak/> 3
<LineBreak/> 4
<LineBreak/> 5
<LineBreak/> 6
<LineBreak/> 7
<LineBreak/> 8
<LineBreak/> 9
</TextBlock>
</Canvas>

</Border>

</Canvas>





Re: Windows Presentation Foundation (WPF) Counter

Steve Galic - MSFT

Setting the To value to -365 will get you closer

But the problem with doing things this way is that you essentially need to have 2 animations going at all times. Since you are translating the list up, when you get to 9, you need to start the animation over so that it begins again while 9 is moving through the border. I was able to get this to work by creating 2 textboxes and begining the second one at the right time:

Code Snippet

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Border BorderBrush="Black" BorderThickness="2,2,2,2" Canvas.Top="50" Canvas.Left="50" ClipToBounds="True" Width="30" Height="30" Background="Black">

<Canvas Canvas.Top="60" Canvas.Left="60" Height="20">

<TextBlock Name="tb1" FontSize="30" FontWeight="Bold" FontFamily="Ariel" Foreground="White" TextWrapping="Wrap" Margin="5" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform Y="50"/>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(TextBlock.RenderTransform).(TranslateTransform.Y)" To="-670" Duration="0:0:20" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
0
<LineBreak/> 1
<LineBreak/> 2
<LineBreak/> 3
<LineBreak/> 4
<LineBreak/> 5
<LineBreak/> 6
<LineBreak/> 7
<LineBreak/> 8
<LineBreak/> 9

</TextBlock>

<TextBlock Name="tb2" FontSize="30" FontWeight="Bold" FontFamily="Ariel" Foreground="Red" TextWrapping="Wrap" Margin="5" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform Y="50"/>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(TextBlock.RenderTransform).(TranslateTransform.Y)" BeginTime="0:0:10" To="-670" Duration="0:0:20" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
0
<LineBreak/> 1
<LineBreak/> 2
<LineBreak/> 3
<LineBreak/> 4
<LineBreak/> 5
<LineBreak/> 6
<LineBreak/> 7
<LineBreak/> 8
<LineBreak/> 9
</TextBlock>

</Canvas>

</Border>

</Canvas>






Re: Windows Presentation Foundation (WPF) Counter

Solent

Hi, thanks for the code. That was a great help