WPF 实现精美轮播效果，滚动块与动态文字展示

小码编匠
535 阅读4分钟

前言

本篇文章将深入探讨如何在WPF环境中创建这样的轮播效果。逐步介绍实现滚动块和平滑滚动文字的关键技术和最佳实践。无论是初学者还是有一定经验的开发者，都能从中获取到有价值的信息，并通过提供的示例代码快速上手，将这些效果融入自己的项目中。

正文

控件已封装在自己写的控件库：github.com/LowPlayer/P…

RunningText：滚动文字，支持一下属性：

Text：显示的文本；

Space：首尾间距，负值或NaN时，首尾间距为整个容器宽度；

Speed：滚动速度；

Direction：滚动方向，支持四个方向；

示范代码：

<pp:RunningText x:Name="rt" Margin="6" Padding="12 6" Background="{DynamicResource PP.Brushes.Themes}" Foreground="{DynamicResource PP.Brushes.Themes.Foreground}"　　　　　　　　　 Text="WPF滚动轮播文字（走马灯效果）；可调节滚动速度、首尾间距、文字大小、颜色，以及常规的背景、边框、内外边距；文字不限长度、自动适应容器大小...">
    <pp:RunningText.Style>
        <Style TargetType="{x:Type pp:RunningText}">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Style.Triggers>
                <Trigger Property="Direction" Value="BottomToTop">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
                <Trigger Property="Direction" Value="TopToBottom">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </pp:RunningText.Style>
</pp:RunningText>

效果动图：

RunningBlock：滚动块，继承自ContentControl，支持放任何内容，继承RunningText除了Text之外的其他属性；

示范代码：

<pp:RunningBlock x:Name="rb" Margin="6" Padding="12 6" Background="{DynamicResource PP.Brushes.Themes}" Foreground="{DynamicResource PP.Brushes.Themes.Foreground}">
    <pp:RunningBlock.Style>
        <Style TargetType="{x:Type pp:RunningBlock}">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Style.Triggers>
                <Trigger Property="Direction" Value="BottomToTop">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
                <Trigger Property="Direction" Value="TopToBottom">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </pp:RunningBlock.Style>
    <StackPanel Orientation="Horizontal">
        <Path Data="{StaticResource path1}" Fill="White" Stretch="Uniform" Height="{Binding ActualHeight,ElementName=txt}" />
        <TextBlock VerticalAlignment="Center" x:Name="txt" Margin="20 0 0 0">WPF滚动块，可调节滚动速度、首尾间距...</TextBlock>
        <Path Data="{StaticResource path2}" Fill="White" Stretch="Uniform" Margin="20 0 0 0" Height="{Binding ActualHeight,ElementName=txt}" />
    </StackPanel>
</pp:RunningBlock>

效果动图：

下面展示一个外包项目--医院门诊叫号系统，展示更多的轮播滚动效果

这里用到了另外一个自定义控件--叫号队列，贴一下简短的代码：

<DockPanel>
    <Border DockPanel.Dock="Top" Height="100" Background="{StaticResource Brushes.Theme}" TextElement.Foreground="{StaticResource Brushes.IdealForeground}">
        <DockPanel>
            <TextBlock FontSize="34" VerticalAlignment="Center" Margin="50 0" Text="{Binding HospitalName}" />
            <!--时钟-->
            <ctrls:Clock DockPanel.Dock="Right" Margin="50 0" VerticalAlignment="Center" />
            <TextBlock FontSize="62" VerticalAlignment="Center" TextAlignment="Center" Text="{Binding Title}" />
        </DockPanel>
    </Border>
    <Border DockPanel.Dock="Bottom" Height="80" Background="{StaticResource Brushes.Theme.Hightlight}">
        <DockPanel>
            <Grid Panel.ZIndex="1">
                <Path Data="M0 0 H110 L90 24 L110 47 H0 Z" Fill="{StaticResource Brushes.Warning}" VerticalAlignment="Center" />
                <TextBlock FontSize="18" FontWeight="Bold" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-20 0 0 0">NEWS</TextBlock>
            </Grid>
            <!--滚动的文字-->
            <ctrls:CarouselText FontSize="24" Foreground="{StaticResource Brushes.IdealForeground}" Space="200" Speed="100" Margin="-20 0 0 0" Text="{Binding CarouselText}" />
        </DockPanel>
    </Border>
    <!--叫号队列-->
    <ctrls:CallTable Style="{StaticResource Styles.CallTable}" ItemsSource="{Binding CallQueueDatas}" HeadRowHeight="80" Interval="5000" />
</DockPanel>

总结

综上所述，在WPF应用程序中实现滚动块和动态文字的轮播效果，不仅需要掌握相关技术细节，还需要注重用户体验的设计。通过本文的介绍，我们详细讲解了如何利用WPF的强大功能来创建平滑过渡的滚动效果，包括选择合适的控件、设置动画属性以及优化性能等方面的知识点。

核心技术：我们介绍了 Storyboard、DoubleAnimation 和 TextBlock 等关键元素的应用，这些都是实现滚动效果不可或缺的部分。

布局与样式：为了保证内容布局合理且美观，我们讨论了如何运用 WPF 的布局系统（如 Grid 或 Canvas），并结合适当的样式和模板定制出符合需求的轮播组件。

性能优化：针对可能影响效率的因素，如过度复杂的动画或频繁的数据绑定更新，我们提出了若干优化建议，确保轮播效果既能满足视觉要求，又不会对应用程序的整体性能造成负面影响。

用户体验：最后但同样重要的是，我们强调了保持简洁易用的设计原则，确保轮播效果能够自然地融入用户的交互流程，而不显得突兀或干扰。

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

作者：孤独成派

出处：cnblogs.com/pumbaa/p/14298790.html

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！

avatar
文章
阅读
粉丝