Silverlight动态加载菜单和菜单动画（改良版：增加下拉条）

最新推荐文章于 2024-09-06 09:38:08 发布

weixin_30480075

最新推荐文章于 2024-09-06 09:38:08 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/haisongvip/archive/2011/12/23/2300021.html

版权

　　前几天发过一篇Silverlight动态加载菜单和菜单动画的文章，当时界面布局用的控件是Canvas，由于要对不同屏幕尺寸适应，所以需要更换布局元素，今天我就把我更改布局元素的代码分享一下，也算是对今天工作的一个总结吧！

　　代码部分：

　　Xaml代码：容器这里改用StackPanel，外面嵌套ScrollViewer，内容超出后可以下拉

以前的页面：

更改后的代码：

　　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();
}

更改后的代码：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;

namespace PhoneTest1
{
     public partial class MaainPage : PhoneApplicationPage
    {
         /// <summary>
         /// 记录最后一次点击
         /// </summary>
        Canvas _LastCanvas = new Canvas();

         /// <summary>
         /// 动画图片
         /// </summary>
        Image Img_Story = new Image();

         /// <summary>
         /// 定义白色
         /// </summary>
        SolidColorBrush WhiteColorBrush = new SolidColorBrush();

         /// <summary>
         /// 定义灰色
         /// </summary>
        SolidColorBrush OtherColorBrush = new SolidColorBrush();

         public MainPage()
        {
            InitializeComponent();
             this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

         void MainPage_Loaded( object sender, RoutedEventArgs e)
        {
             // 设置颜色
            WhiteColorBrush.Color = Color.FromArgb( 255, 255, 255, 255);
            OtherColorBrush.Color = Color.FromArgb( 255, 61, 61, 61);
            Boolean _IsFirstAddElement = false;
             for ( int i = 0; i < 10; i++)
            {
                Canvas _Canvas = new Canvas();
                _Canvas.Height = 60;
                TextBlock _TextBlock = new TextBlock();
                _TextBlock.Text = i.ToString() + " ：测试程序 "; // 你自己重命名
                Canvas.SetLeft(_TextBlock, 30); // 30是距canvas左边，你自己可以调整
                Canvas.SetZIndex(_TextBlock, 100); // 设置图层，防止文本被遮盖
                _TextBlock.FontSize = 30;
                _Canvas.Children.Add(_TextBlock);
                 if (!_IsFirstAddElement)
                {
                    _IsFirstAddElement = true;
                     this.Img_Story.Source = new BitmapImage( new Uri( " /PhoneTest1;component/Image/Test.PNG ", UriKind.RelativeOrAbsolute));
                    Canvas.SetLeft(Img_Story, 0); // 30是距canvas左边，你自己可以调整
                    Canvas.SetZIndex(Img_Story, 0); // 设置图层，防止文本被遮盖
                    _Canvas.Children.Add( this.Img_Story);
                     this._LastCanvas = _Canvas;
                    _TextBlock.Foreground = WhiteColorBrush;
                }
                 else
                {
                    _TextBlock.Foreground = OtherColorBrush;
                }
                 // 点击事件
                _TextBlock.MouseLeftButtonDown += new MouseButtonEventHandler(_TextBlock_MouseLeftButtonDown);
                 // 将元素添加到容器中
                 this.Panel_Element.Children.Add(_Canvas);
            }
        }

         /// <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 this.Panel_Element.Children)
            {
                 if (fe is Canvas)     // 检索TextBlock
                {
                    Canvas _Canvas = (Canvas)fe;
                    TextBlock chk = (TextBlock)_Canvas.Children[ 0];
                     if (chk.Equals(Txt_Road))
                    {
                        _LastCanvas.Children.Remove( this.Img_Story);
                        _Canvas.Children.Add( this.Img_Story);
                         this._LastCanvas = _Canvas;
                        chk.Foreground = WhiteColorBrush;    // 当前点击的设为白色
                        CreateStoryBoard();
                    }
                     else
                    {
                        chk.Foreground = OtherColorBrush;    // 其他的改变回原来默认颜色
                    }
                }
            }
        }

         /// <summary>
         /// 创建点击动画
         /// </summary>
         private void CreateStoryBoard()
        {
            Storyboard storyboard = new Storyboard();    // 实例化Storyboard
             // 实例化X轴动画对象
            DoubleAnimation doubleAnimationX = new DoubleAnimation();
            doubleAnimationX.Duration = new Duration(TimeSpan.FromMilliseconds( 500));    // 设置动画延时时间
            doubleAnimationX.From = 0;      // 设置动画初始值
            doubleAnimationX.To = 10;     // 设置动画完成值
            Storyboard.SetTarget(doubleAnimationX, this.Img_Story);      // 设置动画操作对象
            Storyboard.SetTargetProperty(doubleAnimationX, new PropertyPath( " (Canvas.Left) "));       // 设置动画操作对象的属性
            storyboard.Children.Add(doubleAnimationX);       // 将动画加载到Storyboard
             // 开始动画
            storyboard.Begin();
        }
    }
}

　　后台逻辑实现是我回家后自己重新写的，那些代码在公司忘记带回了，如果有问题大家可以留言，我一定尽快改正!

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

作者：彭海松

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

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

转载于:https://www.cnblogs.com/haisongvip/archive/2011/12/23/2300021.html