关闭

设计一个silverlight的textbox控件--silverlight(闪光)学习(1)

标签: silverlighttextboxblendasp.net浏览器flash
960人阅读 评论(0) 收藏 举报
分类:
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转载请著名出处。
 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:157667次
    • 积分:2480
    • 等级:
    • 排名:第14914名
    • 原创:63篇
    • 转载:106篇
    • 译文:0篇
    • 评论:38条