您的位置:首页 > 产品设计 > UI/UE

以前经常来这里,但是很少写博客.最近在做silverlight 项目.前几天被一个 类似.netmarquee的循环滚动的功能憋了很长时间,现在和大家分享下.

2011-11-22 16:10 816 查看
下面我来说下集合滚动.在silverlght中没有html那样简单一句话就能实现循环滚动.既:marquee.

原始的例:<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="1" height="22">

要循环的信息

</marquee>

我查阅了大量的文档和帮助,我确定自己写动画.在silverlight中没有像marquee那样简单的控件.只能自己拼:正面加上反面循环.

例子如下:因为这个是实际项目中的,下面的例子我简单的注释下,有写变量和注释写的不是很全.加上时间关系.如果有不明白的直接联系我,可查看相关文档.

或者直接来联系我:xuanrui.zhao@gmail.com

// 首先简单的描述下我做的这个功能:利用silverlight自带的动画标签:animation实现.在后台动态赋值两个集合,其实两个集合的值都是一样的就是

// 为了模拟marquee的循环.让其中一个集合在正面从上倒下,一个集合从下到上.实现滚动的假象.代码如下:

<Canvas x:Name="canMain" Background="Transparent" Cursor="Hand" >

<Canvas.Clip>

<!-- 定一个循环滚动的区域 -->

<RectangleGeometry x:Name="myRectangleGeometry" RadiusX="0" RadiusY="0" Rect="0,0, 340,50" />

</Canvas.Clip>

<Canvas.Triggers>

<EventTrigger RoutedEvent="Canvas.Loaded" >

<BeginStoryboard>

          <!-- Canvas.Top :说明从下到上或者从上到下滚动 , RepeatBehavior="Forever" 为循环方式-->

<Storyboard x:Name="animation" Storyboard.TargetProperty="(Canvas.Top)" RepeatBehavior="Forever" >

<DoubleAnimation x:Name="daOne" Storyboard.TargetName="spScrollTwo" From="0" To="0" Duration="0:0:10" />

<DoubleAnimation x:Name="daTwo" Storyboard.TargetName="spScrollOne" From="0" To="0" Duration="0:0:10" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Canvas.Triggers>

<StackPanel x:Name="spScrollOne" Orientation="Vertical"></StackPanel> >//要滚动的集合一

<StackPanel x:Name="spScrollTwo" Orientation="Vertical"></StackPanel>//要滚动的集合二

</Canvas>

// 这里我采用的是后台动态赋值:

public partial class testScroll: UserControl

{

// 信息条数

int icount = 0;

// 信息显示高度

Double iRoadInforMation = 0;

public testScroll()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(testScroll_Loaded);

}

#region 页面初始化方法

/// <summary>

/// 页面初始化方法

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void testScroll_Loaded(object sender, RoutedEventArgs e)

{

//动态获取数据

getDataInfor();

}

#endregion

#region 获得信息

/// <summary>

/// 获得信息

/// </summary>

private void getDataInfor()

{

...... ......... // 连接数据库

// 返回成功信息

if (r.IsSucceed)

{

// 定义实体类的集合

List<R_Infor> _Data_InforList = r.Body.FromJsonString<List<R_Infor>>();

// 判断返回查询结果

if (null != _Data_InforList && 0 < _Data_InforList .Count)

{

// 根据查询信息给页面赋值

foreach (var _Infor in_Data_InforList )

{

          

double _fontsize = 15;

++icount;

// 定义页面滚动显示信息容器

var tbInforOne = new TextBlock();

// 设定显示信息的样式信息

tbInforOne .Text = icount + ". " + _Infor .nayiyaou(); //描述内容

tbInforOne .Tag =Infor .ID();//内容ID

tbInforOne .FontSize = _fontsize;

tbInforOne .LineHeight = _fontsize;

tbInforOne .TextWrapping = TextWrapping.Wrap; //自动换行

tbInforOne .Margin = new Thickness(3, 4, 3, 3); //位置

tbInforOne .Width = (double)325; //显示宽度

spScrollOne.Children.Add(tbTraInforOne); //显示添加上前台控件

iRoadInforMation += (tbInforOne .ActualHeight + 7); //获得实际显示高度

// 定义页面滚动显示信息容器

var tbInforTwo = new TextBlock();

tbInforTwo .Text = icount + ". " + _Infor .nayiyaou(); //描述内容

tbInforTwo .Tag =Infor .ID();//内容ID

tbInforTwo .FontSize = _fontsize;

tbInforTwo .LineHeight = _fontsize;

tbInforTwo .TextWrapping = TextWrapping.Wrap; //自动换行

tbInforOne .Margin = new Thickness(3, 4, 3, 3); //位置

tbInforTwo .Width = (double)325; //显示宽度

spScrollTwo.Children.Add(tbTraInforTwo);

}

setScrolltt();

}

}

};

_Do.Post();

}

#endregion

#region 设置滚动信息

/// <summary>

/// 设置滚动信息

/// </summary>

private void setScrolltt()

{

iRoadInforMation = iRoadInforMation + 10;

myRectangleGeometry.Rect = new Rect(0, 0, 340, iRoadInforMation);

// 控制滚动信息速度

int _marqueeTimeInSeconds = Convert.ToInt32(icount * 1.5);

spScrollOne.Height = iRoadInforMation;

spScrollTwo.Height = iRoadInforMation;

daOne.To = -iRoadInforMation;

daOne.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

daTwo.From = iRoadInforMation;

daTwo.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));

}

#endregion

//这个功能困扰了我一天.希望有很多和我一样需要这个功能的朋友和大家分享下.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐