[WPF] 轮播效果,滚动块、滚动文字
控件已封装在自己写的控件库:https://github.com/LowPlayer/PP.Wpf
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>
注:接外包项目,评论区留言联系我
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)