设计一个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代码
 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 。
 

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