第一次发博文，希望大家支持
先看下实现效果：
思路：
动态加载数据，遍历数据加载到界面，在加载元素的按下事件中，遍历加载到界面的元素，将当前点击元素的前景色设置为白色，并执行创建动画的事件。
代码：
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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。