设置一个竖形的数值条，使用 Border 只显示一个数值， 然后动画调动数值条的高低

XAML

<Grid>

        <!--  一共 10 个数值， Border 高度设置为一个数值控件的高度，然后使用动画，在这 10 个数据之间移动  -->
        <!--  程序会根据高度自动适配高度  -->
        <Border
            x:Name="NumBorder"
            Height="320"
            VerticalAlignment="Top">

            <UniformGrid Columns="1">

                <UniformGrid.RenderTransform>
                    <!--  这里设置数值列的高低位置   -->
                    <TranslateTransform x:Name="ValueIndexTransform" Y="-288" />
                </UniformGrid.RenderTransform>

                <UniformGrid.Resources>
                    <!-- 设置每个数值的属性 -->
                    <Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="TextBlock">
                        <Setter Property="VerticalAlignment" Value="Center" />
                        <Setter Property="HorizontalAlignment" Value="Center" />
                        <Setter Property="FontWeight" Value="Bold" />
                        <!-- <Setter Property="FontSize" Value="24" /> -->
                        <!-- <Setter Property="Foreground" Value="CornflowerBlue" /> -->
                    </Style>
                </UniformGrid.Resources>

                <Viewbox>
                    <TextBlock Text="0" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="1" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="2" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="3" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="4" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="5" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="6" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="7" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="8" />
                </Viewbox>
                <Viewbox>
                    <TextBlock Text="9" />
                </Viewbox>

            </UniformGrid>
        </Border>
    </Grid>

代码

        1. 在控件 NumeralScrollCtrl_OnSizeChanged 时显示数值列控件的高为当前可见高度的 10 倍,  因为 10 个数值，所以每个数值控件高度为当前显示的高度
        this.NumBorder.Height = 10 * this.ActualHeight;

        2. 显示当前值，
        // 每一个字符的高度为当前控件的显示高度       
        var numHeight = Convert.ToInt32(this.ActualHeight);

        var from = Random.Shared.Next(-9, 2) * numHeight;

        var animation = new DoubleAnimation
        {
            To = -1 * value.Value * numHeight, // 跳转到当前数值对应的高度
            // From = from, // 如果 from 使用随机值，会显示一个随机滚动，对时钟滚动效果不太好看
            Duration = new Duration(TimeSpan.FromSeconds(0.8)),
            EasingFunction = new PowerEase { EasingMode = EasingMode.EaseOut, },
        };

        this.ValueIndexTransform.BeginAnimation(TranslateTransform.YProperty, animation);