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

概述在 www.silverlight.net上看到了制作一个silverlight 控件的视频，遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码，结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。      效果如下:            在讲怎么设计这个控件前，我把这个silverlight控件和asp.net里用户自定义控件做下类 在 www.silverlight.net上看到了制作一个silverlight 控件的视频，遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码，结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。
     效果如下:
     

     在讲怎么设计这个控件前，我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件，后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件，后台逻辑代码可以用.Js文件，也可以用.cs 文件。
   
    废话不多说了，我们动手设计吧。首先建立一个silverlight 类库项目:
 

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

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

xaml代码
 1

<Canvas
 2

    xmlns="http://schemas.microsoft.com/clIEnt/2007"
 3

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4

    x:name="Glassbutton" Height="34" WIDth="120" RendertransformOrigin="0.5,0.5">
 5

  <Canvas.Resources>
 6

    <Storyboard x:name="GlassbuttonGlow">
 7

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="GlassbuttonGlowEffect" Storyboard.TargetProperty="(UIElement.Opacity)">
 8

        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
 9

      </DoubleAnimationUsingKeyFrames>
10

    </Storyboard>
11

    <Storyboard x:name="Glassbuttonnormal">
12

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="GlassbuttonGlowEffect" Storyboard.TargetProperty="(UIElement.Opacity)">
13

        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
14

      </DoubleAnimationUsingKeyFrames>
15

    </Storyboard>
16

    <Storyboard x:name="GlassbuttonDown">
17

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="Glassbutton" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Scaletransform.ScaleX)">
18

        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/>
19

      </DoubleAnimationUsingKeyFrames>
20

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="Glassbutton" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Scaletransform.ScaleY)">
21

        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/>
22

      </DoubleAnimationUsingKeyFrames>
23

    </Storyboard>
24

    <Storyboard x:name="GlassbuttonUp">
25

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="Glassbutton" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Scaletransform.ScaleX)">
26

        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
27

      </DoubleAnimationUsingKeyFrames>
28

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="Glassbutton" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Scaletransform.ScaleY)">
29

        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
30

      </DoubleAnimationUsingKeyFrames>
31

    </Storyboard>
32

  </Canvas.Resources>
33

  <Canvas.Rendertransform>
34

    <transformGroup>
35

      <Scaletransform ScaleX="1" ScaleY="1"/>
36

      <Skewtransform AngleX="0" AngleY="0"/>
37

      <Rotatetransform Angle="0"/>
38

      <Translatetransform X="0" Y="0"/>
39

    </transformGroup>
40

  </Canvas.Rendertransform>
41

  <!-- Outer border of the button

 just the stroke of the rectangle -->
42

  <Rectangle WIDth="180" Height="34" RadiusX="5" RadiusY="5" strokeThickness="1" stroke="#FFFFFFFF" x:name="Outerborder"/>
43

  <!-- Next in black border, and a somewhat opaque fill -->
44

  <Rectangle Canvas.top="1" Canvas.left="1" WIDth="178" Height="32" RadiusX="4" RadiusY="4" Fill="#7F000000" stroke="#FF000000" strokeThickness="1" x:name="Innerborder" />
45

  <!-- Radial gradIEnt to give a glow to the button when rolled over -->
46

  <Rectangle x:name="GlassbuttonGlowEffect" Canvas.top="2" Canvas.left="2" WIDth="176" Height="30" RadiusX="3" RadiusY="3" Opacity="0" >
47

    <Rectangle.Fill>
48

      <RadialGradIEntBrush>
49

        <RadialGradIEntBrush.relativetransform>
50

          <transformGroup>
51

            <Scaletransform ScaleX="1.702" ScaleY="2.243"/>
52

            <Translatetransform X="-0.368" Y="-0.152"/>
53

          </transformGroup>
54

        </RadialGradIEntBrush.relativetransform>
55

        <GradIEntStop color="#B28DBDFF" Offset="0" />
56

        <GradIEntStop color="#008DBDFF" Offset="1" />
57

      </RadialGradIEntBrush>
58

    </Rectangle.Fill>
59

  </Rectangle>
60

  <TextBlock x:name="GlassbuttonText" Canvas.left="8" Canvas.top="5" Foreground="#FFFFFFFF" Text="Click Me" Cursor="Hand" RendertransformOrigin="0.5,0.5" FontFamily="Verdana" FontSize="16" >
61

    <TextBlock.Rendertransform>
62

      <transformGroup>
63

        <Scaletransform ScaleX="1" ScaleY="1"/>
64

        <Skewtransform AngleX="0" AngleY="0"/>
65

        <Rotatetransform Angle="0"/>
66

        <Translatetransform X="0" Y="0"/>
67

      </transformGroup>
68

    </TextBlock.Rendertransform>
69

  </TextBlock>
70

  <!-- over the top of part of the text is a lighter opaque gradIEnt, clipped to the top half of the button -->
71

  <Rectangle Canvas.left="2" Canvas.top="2" WIDth="176" Height="30" RadiusX="3" RadiusY="3" x:name="buttonReflex">
72

    <Rectangle.Fill>
73

      <linearGradIEntBrush StartPoint="0.494,0.028" EndPoint="0.494, 0.889" >
74

        <GradIEntStop color="#99FFFFFF" Offset="0" />
75

        <GradIEntStop color="#33FFFFFF" Offset="1" />
76

      </linearGradIEntBrush>
77

    </Rectangle.Fill>
78

    <Rectangle.Clip>
79

      <RectangleGeometry x:name="ReflexClip" Rect="0,176,15"/>
80

    </Rectangle.Clip>
81

  </Rectangle>
82

</Canvas>
这段代码在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 。
 

@H_410_2404@

 我们在这个项目添加上先前建的控件库项目的引用。
 然后打开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转载请著名出处。 

总结

以上是内存溢出为你收集整理的设计一个silverlight的textbox控件--silverlight(闪光)学习（1）全部内容，希望文章能够帮你解决设计一个silverlight的textbox控件--silverlight(闪光)学习（1）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。