vs2010 学习Silverlight学习笔记(3):一些控件的基本应用

概要:

  Silverlight3提供了一些控件,现在我们学习一下这些控件的应用。在TerryLee的《一步一步学Silverlight 2系列(2):基本控件》里,介绍一些用法,但是过于简单。
不过《Silverlight 2完美征程》一书中有更多更详细的用法。现在我对一些简单的控件用法,做扩展。

ToggleButton:

  ToggleButton属于Button控件的一种,在Ajax中有广范的应用。具有翻转效果,选定效果等。在vs2010中控件工具箱我并没找到此控件,但是可以手打出来。
ToggleButton具有翻转效果,仔细观察会发现点击之后控件颜色(原是下色重上色轻)会翻转过来。
IsThreeState此属性,默认为false,即控件有选中/非选中两个状态。改为true后,会增加一个Null状态。(个人认为最重要的属性)
Cursor - 鼠标移动到ToggleButton上面时,鼠标指针的样式
            Arrow - 箭头
            Hand - 手形
            Wait - 沙漏
            IBeam - “I”字形
            Stylus - 点
            Eraser - 橡皮
            None - 无
 ClickMode - 触发单击事件的类型 [System.Windows.Controls.ClickMode枚举]
            ClickMode.Press - 鼠标左键单击
            ClickMode.Release - 鼠标左键单击并放开
            ClickMode.Hover - 鼠标经过
为控件加图片
   <ToggleButton x:Name="btn3" ClickMode="Hover" Margin="226,156,39,47">
            <ToggleButton.Content>
                <Image Source="/SilverlightAppDemo2;component/aspxba8205_20081025143826_2.jpg" Height="100" Width="100"></Image>
            </ToggleButton.Content>
        </ToggleButton>
下面是示例的代码:
代码
     
       
< Grid x:Name ="LayoutRoot" Background ="#46461F" >
< ToggleButton x:Name ="btn1" Background ="Red" Content ="两种状态,会变漏斗" Cursor ="Wait" Margin ="42,12,208,176" ></ ToggleButton >

< ToggleButton x:Name ="btn2" Background ="Red" Content ="三种状态" IsThreeState ="True" Margin ="226,12,36,176" ></ ToggleButton >

< ToggleButton x:Name ="btn3" ClickMode ="Hover" Margin ="226,156,39,47" >
< ToggleButton.Content >
< Image Source ="/SilverlightAppDemo2;component/aspxba8205_20081025143826_2.jpg" Height ="100" Width ="100" ></ Image >
</ ToggleButton.Content >
</ ToggleButton >
< Button Content ="ToggleButton的选中状态" HorizontalAlignment ="Left" Click ="Button_Click" Margin ="42,156,0,45" Width ="130" />
</ Grid >

 

.cs代码,引入空间using System.Windows.Browser;
代码
     
       
private void Button_Click( object sender, RoutedEventArgs e)
{
HtmlWindow html
= HtmlPage.Window;
html.Alert(
string .Format( " btn1: {0}\r\nbtn2: {1}\r\nbtn3: {2} " ,
btn1.IsChecked, btn2.IsChecked, btn3.IsChecked));
}

运行效果:

vs2010 学习Silverlight学习笔记(3):一些控件的基本应用

WatermarkedTextBox:

在这个版本中已经没有了,据说是考虑到与WPF兼容问题才删除的,不过网上有下载的此控件的,也有用法。有兴趣的自己去弄试试,我就不说了。

ToolTip:

试了半天总是不成功,后来到网上查了一下,才发现Silverlight3与以前有很大变化了!
以前是<Button.ToolTip>,现在改成了<ToolTipService.ToolTip>
代码
    
      
< Grid x:Name ="LayoutRoot" Background ="#46461F" >
< Button x:Name ="myButton" Content ="Text Tooltip"
Canvas.Top
="80" Canvas.Left ="130"
Width
="240" Height ="100"
FontSize
="20" Background ="Red" >
< ToolTipService.ToolTip >
< ToolTip Content ="终于成功了!" >
</ ToolTip >
</ ToolTipService.ToolTip >
</ Button >

</ Grid >

 

运行一下:
vs2010 学习Silverlight学习笔记(3):一些控件的基本应用
来个更漂亮点的:
代码
    
      
< ToolTipService.ToolTip >
< ToolTip Content ="这个更漂亮点!" >
< ToolTip.Background >
< LinearGradientBrush StartPoint ="0,1" EndPoint ="0,0" >
< GradientStop Color ="ForestGreen" Offset ="0.8" />
< GradientStop Color ="White" Offset ="0" />
</ LinearGradientBrush >
</ ToolTip.Background >
</ ToolTip >
</ ToolTipService.ToolTip >

 

vs2010 学习Silverlight学习笔记(3):一些控件的基本应用

这次就学了两个控件的简单使用,但是这两个控件的用处非常大。比如ToolTip可以用来做WPF游戏中的说明。。。潜力在您的挖掘中。
今天做的时候发现,布局排版不好弄。尤其是第一个例子,浏览器放大后图像完全走样。那么明天就来学习一下排版吧。

总目录
上一篇:vs2010 学习Silverlight学习笔记(2):创建一个基本的Silverlight应用
下一篇:vs2010 学习Silverlight学习笔记(4):界面布局

你可能感兴趣的:(silverlight)