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

时间:2024-05-14 12:04:44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" });
newlist.Add(new News { news = "" }); //动态添加2个ListBox到sp容器中,以超出sp容器的高度为宜
for (int i = ; i <=; 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 = ;//定义垂直偏移量计数器
int listboxNum = ;//定义ListBox计数器 DispatcherTimer timer = new DispatcherTimer();//定义计时器
timer.Interval = TimeSpan.FromMilliseconds();//定义时间间隔为1秒
timer.Tick += (s, ee) =>
{
sv1.ScrollToVerticalOffset(sv1.VerticalOffset + );//每秒垂直偏移40
Offset = Offset+;//计数器跟随偏移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= ;//重新初始化垂直偏移量计数器
}
};
timer.Start();//启动计时器 }
}

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

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

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