设计一个silverlight的Button控件--silverlight(银光)学习(1)

       在www.silverlight.net上看到了制作一个silverlight 控件的视频,遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码,结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。
     效果如下:
     
     在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件,后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件,后台逻辑代码可以用.js文件,也可以用.cs 文件。
   
    废话不多说了,我们动手设计吧。首先建立一个silverlight 类库项目:
 

 项目建好后,删除里面默认的一个Class1.cs文件,添加一个silverlight控件。


然后把下列代码粘贴到.xaml文件里。
xaml代码

这段代码在vs2008里直接看不到效果,用blend2可以看到效果。


 熟悉"Flash"设计的朋友会发现这个界面是有几个层组成的,包括了黑色的底色,白色的边框层,还有玻璃效果的一层,还有个文本层,还有一起上下分割两个色彩的层。

 后台的核心逻辑代码如下:
   
  /// <summary>
        
/// 根据文本的长度,重新绘制控件的大小
        
/// </summary>

        private void ResizeControl()
        
{
            
double left;
            
double top;
            TextBlock tb 
= actControl.FindName("GlassButtonText"as TextBlock;
            tb.Text 
= txtbutton;
            
if (autoSize)//如果控件的长度根据文本的长度自动调整
            {
                actControl.Height 
= tb.ActualHeight + 8 ;

                actControl.Width 
= tb.ActualWidth + 16;

                OuterBorder.Width 
= tb.ActualWidth + 20;

                OuterBorder.Height 
= tb.ActualHeight + 10;

                InnerBorder.Width 
= tb.ActualWidth + 16;

                InnerBorder.Height 
= tb.ActualHeight + 8;

                GlassButtonGlowEffect.Width 
= tb.ActualWidth + 16;

                GlassButtonGlowEffect.Height 
= tb.ActualHeight + 8;

                ButtonReflex.Width 
= tb.ActualWidth + 16;

                ButtonReflex.Height 
= tb.ActualHeight + 8;

                ReflexClip.Rect 
= new Rect(new Point(00), new Point(tb.ActualWidth + 16, (tb.ActualHeight + 8)/2));

             
            }

            
else//根据传入的参数设定控件的长度
            {

                actControl.Height 
= this.Height;

                actControl.Width 
= this.Width;
            
            }

            left 
= (actControl.Width - tb.ActualWidth) / 2;

            top 
= (actControl.Height - tb.ActualHeight) / 2;

            tb.SetValue
<double>(Canvas.TopProperty, top);//设定文本在绘制面板中的坐标,也就是要使其在控件的中间位置。

            tb.SetValue
<double>(Canvas.LeftProperty, left);
        
        
        }


  这样一个控件就设计好了,那么如果使用这个控件呢?
 我们再添加一个 silverlight Project 。
 
 我们在这个项目添加上先前建的控件库项目的引用。
 然后打开page.xaml文件对应的后台文件page.xaml.cs文件,在page_loaded事件里
 加上如下代码:
 
 1 double top = 100;
 2            
 3            double left = 20;
 4
 5            SilverControls.txtBoxControl txtbox = new SilverControls.txtBoxControl();
 6
 7            txtbox.ButtonText = "Hello!";
 8
 9            txtbox.SetValue<double>(Canvas.TopProperty, top);
10
11            txtbox.SetValue<double>(Canvas.LeftProperty, left);
12
13            this.Children.Add(txtbox);
14


然后保存,在浏览器里查看textpage.html页面就可以了。
源代码如下:
/Files/wangergo/silverlightControlSample.rar

 www.80back.com版权所有,首发cnblogs.com转载请著名出处。

posted @ 2007-09-19 20:42  王传炜  阅读(5019)  评论(8编辑  收藏  举报