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

设计一个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(0, 0), 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转载请著名出处。

   本文版权属于王传炜所有，首发http://www.cnblogs.com/，转载请注明出处。
相关阅读:
nginx使用vhost子目录
 nginx服务报错解决
 反向代理远端单台tomcat 使用域名代理
 反向代理远端单台tomcat 使用ip+端口
 nginx反向代理本地两台web负载均衡使用域名代理
 nginx反向代理本地两台web负载均衡使用ip+端口代理
 nginx反向代理本地单台wed -使用域名代理
 nginx反向代理本地单台wed -使用ip+端口代理
 php 在函数内引用全局变量讲解引用
 Xdebug的安装与使用
原文地址：https://www.cnblogs.com/wangergo/p/899091.html