WPF实现非连续跑马灯效果及动态管理

82 浏览量更新于2024-08-31 2 收藏 75KB PDF 举报

在WPF中实现一个不连续的跑马灯效果，这篇文章将带你了解如何通过详细的步骤来创建这种独特的视觉效果。首先，我们将使用`ViewBox`作为容器，其`Stretch`属性确保了元素能自适应父控件的大小。`ViewBox`的`MouseLeave`和`MouseMove`事件处理程序有助于跟踪鼠标动作，以便控制跑马灯的动态行为。 1. 定义核心组件: - `ViewBox`：命名为`viewbox_main`，其高度和宽度与实际父控件尺寸绑定，并监听鼠标离开(`MouseLeave`)和移动(`MouseMove`)事件。 - `Canvas`：作为跑马灯的核心容器，设置为`VerticalAlignment`和`HorizontalAlignment`都为`Stretch`，使其能填充Canvas。`Width`和`Height`根据`ViewBox`的大小设定，并启用`ClipToBounds`属性以确保元素不超出边界。 2. 数据结构与变量: - `Count`：表示要显示的`UserControl`数量，默认为4，可以根据需求调整。 - `List<Grid>`：用于存储展示的UI元素，每个元素代表一个跑马灯中的位置。 - `List<UserControl>`：存放所有可能的跑马灯UI元素。 3. 动态管理跑马灯： - 当`Count`值改变时，动态添加或删除`UserControl`到`Canvas`中。不连续效果通过在4个预设位置之间循环显示实现。 - 用户点击后，移除对应位置的`UserControl`，并更新`Count`以反映当前展示的数量。 4. 事件处理与逻辑： - 在`MouseLeave`事件中，可能需要停止当前的动画，或者切换到下一个元素。 - `MouseMove`事件用于检测鼠标位置，从而决定哪个元素应该显示或者隐藏。通过这些步骤，你可以创建出一个WPF应用中不连续滚动的跑马灯效果，它不仅满足了项目需求，而且提供了良好的用户体验。在实际操作中，你可能还需要调整动画效果、时间间隔以及用户交互的响应性，以达到最佳的视觉呈现和性能。这个教程提供了一个基础框架，但具体实现可能会因项目需求和设计风格而有所不同。

WPF实现简单的跑马灯效果实现简单的跑马灯效果

主要为大家详细介绍了WPF实现简单的跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近项目上要用到跑马灯的效果，和网上不太相同的是，网上大部分都是连续的，而我们要求的是不连续的。

也就是是，界面上就展示4项（展示项数可变），如果有7项要展示的话，则不断的在4个空格里左跳，当然，衔接上效果不是很好

看。

然后，需要支持点击以后进行移除掉不再显示的内容。

效果如下：

思路大致如下：

1、最外层用一个ViewBox，为了可以填充调用此控件的地方，这样可以方便自动拉伸

复制代码代码如下:

<Viewbox x:Name="viewbox_main" Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}"

MouseLeave="grid_main_MouseLeave" MouseMove="grid_main_MouseMove" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" Stretch="Fill"/>

2、定义三个变量，一个是Count值，是为了设定要展示的UserControl的个数的，例如默认是4个，如效果图，当然，设置成5的

话，就是5个了；一个List<Grid>是为了放入展示控件的列表，一个List<UserControl>是用来放所有要用于跑马灯里的控件的。

3、设置一个Canvas，放入到最外层的Viewbox中，用于跑马灯时候用（这也是常用的跑马灯控件Canvas）

//给Canvas设置一些属性

canvas_board.VerticalAlignment = VerticalAlignment.Stretch;

canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch;

canvas_board.Width = this.viewbox_main.ActualWidth;

canvas_board.Height = this.viewbox_main.ActualHeight;

canvas_board.ClipToBounds = true;

//用viewbox可以支持拉伸

this.viewbox_main.Child = canvas_board;

4、将要循环的Grid放入到Canvas里，这里的Grid的个数，要比展示的个数大一个，也就是Count+1个值，因为滚动的时候，其实

是在最外面有一个的，这样保证了循环的走动。至于两个控件之间的Margin这个就是要设置Grid的了，到时候控件是直接扔进Grid

里的

//循环将Grid加入到要展示的列表里

for (int i = 0; i < Uc_Count + 1; i++)

{

Grid grid = new Grid();

grid.Width = canvas_board.Width / Uc_Count - 10;

grid.Height = canvas_board.Height - 10;

grid.Margin = new Thickness(5);

this.canvas_board.Children.Add(grid);

grid.SetValue(Canvas.TopProperty, 0.0);

grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10));

UcListForShow.Add(grid);

}

5、给每个Grid增加一个动画效果，就是向左移动的效果

for (int i = 0; i < UcListForShow.Count; i++)

{

//设置滚动时候的效果

DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();

LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));

LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)));

daukf_uc.KeyFrames.Add(k1_uc);

daukf_uc.KeyFrames.Add(k2_uc);

storyboard_imgs.Children.Add(daukf_uc);

Storyboard.SetTarget(daukf_uc, UcListForShow[i]);

Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)"));

}

6、滚动的时候，要计算UserControl到底是添加到了哪个Grid里面，也就是哪个控件作为了第一位。

我们设置一个索引值scroll_index，默认的时候，scroll_index=0，这是初始的状态，当滚动起来以后，scroll_index = scroll_index +

1 - Uc_Count;

然后，判断，循环的时候，是否是展示列表的末尾了，如果是的话，则要填充的控件是scroll_index %UcListSum.Count（滚动索

引，对总数直接取余数），如果不是的话则是scroll_index++ % UcListSum.Count（滚动索引++，对总数直接取余数）

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38705873

粉丝: 7
资源: 926

WPF实现非连续跑马灯效果及动态管理

WPF/UWP文字跑马灯

wpf在一定区域内循环滚动文字

WPF版的Marquee

用WPF实现跑马灯效果

WPF实现不连续跑马灯效果

WPF 定点跑马灯效果

WPF 跑马灯

跑马灯效果

C#跑马灯效果ScrollingTextControl

DrawingVisual绘制跑马灯效果的简单实例

最新资源