Silverlight动态加载菜单和菜单动画

第一次发博文,希望大家支持

先看下实现效果:

 

 

思路:

 

动态加载数据,遍历数据加载到界面,在加载元素的按下事件中,遍历加载到界面的元素,将当前点击元素的前景色设置为白色,并执行创建动画的事件。

 

代码:

 

Xaml代码容器这里用Canvas 

 

<Canvas Margin="11,12,19,0" Width="100">

<Image Height="21" x:Name="Img_Story" Margin="0" 

Source="/UserCtrol.VMS;component/Images/sblb_roadbg.png"

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

<Canvas Name="Canvas_KayoutRoot" Margin="25,0,0,0">

</Canvas>

</Canvas>

 

Xam.cs 代码:  T代表你定义的对象

 

/// <summary>

/// 定义白色

/// </summary>

SolidColorBrush WhiteColorBrush = new SolidColorBrush();

/// <summary>

/// 定义灰色

/// </summary>

SolidColorBrush OtherColorBrush = new SolidColorBrush();

 

//设置颜色

WhiteColorBrush.Color = Color.FromArgb(255, 255, 255, 255);

OtherColorBrush.Color = Color.FromArgb(255, 61, 61, 61);

 

/// <summary>

/// 遍历返回的数据加载到页面中

/// </summary>

/// <param name="_List">菜单列表</param>

private void AddElementToPage(List<T> _List)

{

Int32 elmentNum = 0;  //当前列表的序列号

foreach (T item in _List)

{

TextBlock _TextBlock = new TextBlock();

_TextBlock.Text = item.Name;

Canvas.SetTop(_TextBlock, elmentNum * 30);

  _TextBlock.FontSize = 14;

if (elmentNum == 0)

{

_TextBlock.Foreground = WhiteColorBrush;

}

else

{

_TextBlock.Foreground = OtherColorBrush;

}

//点击事件

_TextBlock.MouseLeftButtonDown += new MouseButtonEventHandler(_TextBlock_MouseLeftButtonDown);

//将元素添加到容器中

_NewDeviceItem.Canvas_KayoutRoot.Children.Add(_TextBlock);

elmentNum++;

}

}

 

/// <summary>

/// 点击事件

/// </summary>

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

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

void _TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

TextBlock Txt_Road = sender as TextBlock;

//检索页面元素,设置文字颜色

foreach (FrameworkElement fe in _NewDeviceItem.Canvas_KayoutRoot.Children)

{

if (fe is TextBlock)    //检索TextBlock

{

TextBlock chk = (TextBlock)fe;

if (chk.Equals(Txt_Road))

{

chk.Foreground = WhiteColorBrush;   //当前点击的设为白色

}

else

{

chk.Foreground = OtherColorBrush;   //其他的改变回原来默认颜色

}

}

}

//获得元素当前x坐标

Double Txt_Road_Left = Canvas.GetLeft(Txt_Road);

//获得元素当前x坐标

Double Txt_Road_Top = Canvas.GetTop(Txt_Road);

//创建点击动画

CreateStoryBoard(Txt_Road_Left, Txt_Road_Top);

}

 

/// <summary>

/// 创建点击动画

/// </summary>

/// <param name="Txt_Road_Left">x轴位置</param>

/// <param name="Txt_Road_Top">y轴位置</param>

private void CreateStoryBoard(Double Txt_Road_Left, Double Txt_Road_Top)

{

Storyboard storyboard = new Storyboard();   //实例化Storyboard

//实例化X轴动画对象

DoubleAnimation doubleAnimationX = new DoubleAnimation();

doubleAnimationX.Duration = new Duration(TimeSpan.FromMilliseconds(500));   //设置动画延时时间

doubleAnimationX.From = Txt_Road_Left - 10;     //设置动画初始值

doubleAnimationX.To = Txt_Road_Left;    //设置动画完成值

Storyboard.SetTarget(doubleAnimationX, this.Img_Story);     //设置动画操作对象

Storyboard.SetTargetProperty(doubleAnimationX, new PropertyPath("(Canvas.Left)"));      //设置动画操作对象的属性

storyboard.Children.Add(doubleAnimationX);      //将动画加载到Storyboard

 

//实例化Y轴动画对象

DoubleAnimation doubleAnimationY = new DoubleAnimation();

doubleAnimationY.Duration = new Duration(TimeSpan.FromMilliseconds(0));     //设置动画延时时间

doubleAnimationY.From = Txt_Road_Top;   //设置动画初始值

doubleAnimationY.To = Txt_Road_Top;     //设置动画完成值

Storyboard.SetTarget(doubleAnimationY, this.Img_Story);     //设置动画操作对象

Storyboard.SetTargetProperty(doubleAnimationY, new PropertyPath("(Canvas.Top)"));   //设置动画操作对象的属性

storyboard.Children.Add(doubleAnimationY);      //将动画加载到Storyboard

 

//开始动画

storyboard.Begin();

}

 

代码到此全部完成,动画有点简单,大家可以自己做漂亮点的动画替换我的动画实现。

涉及知识点:canvas布局、容器内动态添加元素、遍历页面中的元素、故事板的使用

 

这是我后来根据需要更改的实现: Silverlight动态加载菜单和菜单动画(改良版:增加下拉条)

 

作者:彭海松

出处:http://www.cnblogs.com/haisongvip/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

posted @ 2011-12-19 20:17  彭海松  阅读(2106)  评论(2编辑  收藏  举报