这次分享一个类似新闻公告板的无缝循环滚动效果，相信很多项目都会应用到这个效果。之前我也百度了一下，网上的一些Silverlight的文字或图片滚动效果，都是一次性滚动的，如果要做到无缝循环滚动，多数要去调用JS代码来完成，如何使用Blend和VS来完成无缝滚动效果呢?先说一下制作思路：将新闻公告文字作为数据源绑定给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
