Expression Blend4经验分享:文字公告无缝循环滚动效果

简介: 原文:Expression Blend4经验分享:文字公告无缝循环滚动效果 这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果。之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要去调用JS代码来完成,如何使用Blend和VS来完成无缝滚动效果呢?先说一下制作思路:将新闻公告文字作为数据源绑定给ListBox,再将Listbox动态添加到Scrollviewer里,在后台代码中定义计时器,循环更改Scrollviewer的垂直偏移量,达到滚动ListBox的目的。
+关注继续查看
原文:Expression Blend4经验分享:文字公告无缝循环滚动效果

这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果。之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要去调用JS代码来完成,如何使用BlendVS来完成无缝滚动效果呢?先说一下制作思路:将新闻公告文字作为数据源绑定给ListBox,再将Listbox动态添加到Scrollviewer里,在后台代码中定义计时器,循环更改Scrollviewer的垂直偏移量,达到滚动ListBox的目的。

1、  在项目的页面编辑模式中,拖入一个Scrollviewer控件,名称:sv1,宽度为Auto,高度为200(以项目需求为准),在它的属性面板里的布局内容里对垂直和水平滚动条做设置如下:

垂直滚动条一定要设置为隐藏,如果设置为Disabled,改变垂直偏移量也无法滚动其内容。

 

2、在sv1里放入一个StackPanel,名称:sp,宽度和高度都是Auto,再给这个容器赋予FluidMoveBehavior流体移动行为,行为的公共属性里的应用对象设置为“Self”,如下图:

这个行为可以让sp容器在Scrollviewer容器里滚动显的更平滑。

 

3、在页面上添加一个ListBox控件,编辑其他副本—编辑生成的项目容器—编辑副本

创建Style资源,名称:ListBoxItemStyle1,位置:应用程序

进入模板编辑模式,添加一个TextBlock,居中布局,它的Text绑定到“news”字段(后台代码将定义一个含news字段的文本数据源),如下图

 

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding news}" VerticalAlignment="Center" FontSize="16"/>

 

 

Listbox的样式编辑完成后,可以删除页面上这个ListBox控件了,我们只需要在后台动态应用这个样式即可。

 

4、在页面上添加一个按钮,名称:btn1,作为启动滚动效果的执行按钮,添加btn1_Click事件。

 

5、使用VS编辑后台代码,代码如下:

public partial class UserControl3 : UserControl
    {
        //定义新闻公告集合
        List<News> newlist = new List<News>();
        public UserControl3()
        {
            // 为初始化变量所必需
            InitializeComponent();

            newlist.Add(new News { news = "1111111111111" });
            newlist.Add(new News { news = "2222222222222" });
            newlist.Add(new News { news = "3333333333333" });
            newlist.Add(new News { news = "4444444444444" });
            newlist.Add(new News { news = "5555555555555" });
            newlist.Add(new News { news = "6666666666666" });
            newlist.Add(new News { news = "7777777777777" });
            newlist.Add(new News { news = "8888888888888" });
            newlist.Add(new News { news = "9999999999999" });
            
            //动态添加2个ListBox到sp容器中,以超出sp容器的高度为宜
            for (int i = 1; i <=2; i++)
            {
                ListBox lb = new ListBox();
                lb.ItemsSource = newlist;
                //应用ListBoxItemStyle1资源样式
                lb.ItemContainerStyle = App.Current.Resources["ListBoxItemStyle1"] as Style;
                //sp容器添加ListBox
                this.sp.Children.Add(lb);

            }
        }
        //新闻公告类
        public class News
        {
            //定义字段
            public string news{ get; set; }
        }


        private void btn1_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            double Offset = 0;//定义垂直偏移量计数器
            int listboxNum = 0;//定义ListBox计数器

            DispatcherTimer timer = new DispatcherTimer();//定义计时器
            timer.Interval = TimeSpan.FromMilliseconds(1000);//定义时间间隔为1秒
            timer.Tick += (s, ee) =>
            {
                sv1.ScrollToVerticalOffset(sv1.VerticalOffset + 40);//每秒垂直偏移40
                Offset = Offset+40;//计数器跟随偏移40
                if (Offset> sp.ActualHeight/sp.Children.Count )//当计数器超过ListBox的高度时
                {   
                    //获取sp容器里已显示过的ListBox,并隐藏,以降低CPU
                    ListBox lb_Collapsed = this.sp.Children[listboxNum] as ListBox;
                    lb_Collapsed.Visibility = Visibility.Collapsed;

                    //添加新的ListBox
                    ListBox lb = new ListBox();
                    lb.ItemsSource = newlist;
                    lb.ItemContainerStyle = App.Current.Resources["ListBoxItemStyle1"] as Style;
                    this.sp.Children.Add(lb);

                    listboxNum = listboxNum++;//ListBox计数器累计
                    Offset= 0;//重新初始化垂直偏移量计数器
                }
            };
            timer.Start();//启动计时器

        }
    }

 

 

Expression Blend的经验分享会持续推出,欢迎关注我的博客!

我个人的小作品展示平台 :http://raimon.6.gwidc.com/

欢迎有志于钻研Blend的朋友加入我们的Blend美工群QQ:152049269

相关实践学习
部署高可用架构
本场景主要介绍如何使用云服务器ECS、负载均衡SLB、云数据库RDS和数据传输服务产品来部署多可用区高可用架构。
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
目录
相关文章
|
前端开发
CSS布局解决方案(终结版) 下
CSS布局解决方案(终结版) 下
86 0
|
前端开发
CSS布局解决方案(终结版) 上
CSS布局解决方案(终结版) 上
62 0
|
前端开发
如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1110 0
零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ...
1132 0
|
存储
Expression Blend4经验分享:制作一个简单的文字按钮样式
原文:Expression Blend4经验分享:制作一个简单的文字按钮样式   首先在Grid里放一个TextBlock,对象时间线窗口的结构树如下 右键点击grid,选择构成控件 会弹出构成控件的对话框,选择你要构成的控件类型,控件名称,控件样式存储位置 这里我们...
1049 0
|
容器 iOS开发
Expression Blend4经验分享:制作一个简单的图片按钮样式
原文:Expression Blend4经验分享:制作一个简单的图片按钮样式 这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.
909 0
|
容器 内存技术
【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条
原文:【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条   这一章讲解FluidMoveBehavior的另一个应用,这是一个绝对原创的做法,目前已经被微软收录在silverlight.net,作者就是烤地瓜本人^^ 。
1017 0
|
程序员 容器 C#
【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动
原文:【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动   好久没更新博客了,今天如果没急事,准备连发三篇,完全讲解Blend最牛的元素-“FluidMoveBehavior”。
1032 0
【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton
原文:【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton   在实际项目中,使用blend做的最多的一定是各种自定义Button。
926 0
|
开发者 前端开发
【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法
原文:【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法 从设计者到开发者  设计师创建一个应用程序的布局然后让开发者去实现。 从开发者到设计者   开发者创建应用程序的函数功能部分,设计者完成样式部分。
836 0