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

转载 2007年09月20日 09:37:00
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转载请著名出处。
 

相关文章推荐

silverlight中TextBox控件的使用

silverlig提供了TextBox和PasswordBox编辑控件。     TextBox控件用来接收用户通过键盘等输入设备输入的数据,     PasswordBox控件用来接收用户输入的...

Silverlight/wpf DataGrid TextBox 等控件内容 Binding 中日期格式 StringFormat

One of the new features in 3.5 SP1 is stringformat. The usage is pretty simple. So following are sim...

Silverlight中设计焦点和文本框回车到下一个控件

1.想在Silverlight首次启动让某个文本框获取焦点,使用Loaded事件中txt.Focus()是不起做用的,要完成这功能只要添加一句代码即可:  private void La...

在Telerik for silverlight控件radtreeview、textBox、RadGridView中实现拖拉控件的操作

效果图: 1.首先构造实体类Team view plain public class Team       {     &...

Silverlight 写的一个带自定义验证的TextBox

/// /// 验证类型枚举 /// public enum ValidateTypeEmnu { /// /// 必填项目验证 ...

修复WPF Silverlight ListBox控件的一个Bug

先来看这样演示程序。在修复前,选择重复的数字会导致选中状态混乱,出现多个数字莫名其妙被选中的状况。   刨根问题,此问题最终定位到如下代码(WPF 项目,Silverlight项目类似): 01/* ...

Silverlight自定义控件系列 – TreeView (1)

很多人都对MS自带的控件不太满意(虽然MS走的是简约风格),都会试图去修改或创建让自己满意的控件,当然我也不例外。 同时,这个系列只是为了记录我学习Silverlight的过程。   新建一个C...
  • wlanye
  • wlanye
  • 2012-02-16 17:51
  • 1368

Silverlight之UI设计学Blend五【基本布局控件3】-----------ScrollViewer\Border\Viewbox

4、ScrollViewer 只能嵌入一个子控件,onlyOne!如果想要多个控件,可以先放入一个容器。 所以在多数情况下,ScrollViewer控件都会和Stackpanel,Canvas...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)