《SilverLight2快速入门》之基本控件Button

2016-08-20 10:41:05来源:http://wangjierui.blog.51cto.com/186879/117931作者:王杰瑞人点击


前面我们搭建了开发环境,并且创建了一个基本的SilverLight应用程序。本节我们开始研究界面控件的用法。
注意:
做SilverLight有一点需要记住,这是运行在客户端宿主环境中的,所以这里的控件不是服务器控件。换句话说,SilverLight的运行需要客户端安装.NET Framework 3,虽然宿主环境是浏览器,但是程序是下载到本地运行的,这和WPF机理一致,毕竟SilverLight代号是WPF/E。
我们所用到的标准控件都来自System.Windows.Controls 命名空间,具体成员说明可以查阅SDK。

Button控件绝对是最常用的控件。所以第一个讲解。其实我们在Hello程序里见过了。我们举个例子说明Button的声明和事件绑定,顺便通过演示来理解控件在本地运行的机理。


<UserControl x:Class="_51CTO.lesson02.Button" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Button Name="button1" Width="200" Height="100" Content="这是一个按钮" Click="Button_Click" ></Button> </Grid> </UserControl>
上面声明了一个Button,语法与ASP.NET控件写法基本一致。


namespace _51CTO.lesson02 { public partial class Button : UserControl { private int times=0; public Button() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { times++; MessageBox.Show(times.ToString(), "提示", MessageBoxButton.OK); } } }
这是SilverLight XAML C#代码,实现计数器累加和显示。与ASP.NET不同,我们已不需要考虑计数器状态保存的问题了。
运行结果如下:

这是个很简单的例子。说明Button控件的基本设置和Click事件处理,当然Button的属性和事件不止如此,笔者抛砖引玉,更多详细内容见SDK。

上面的控件使用用法没有新意,与传统控件不一样的是,Button属于控件内容模型,关于“控件内容模型”我们会在后期单独讲解。先看一个在Button上显示其它图形的做法:


<UserControl x:Class="_51CTO.lesson02.ButtonImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Button Height="100" Width="300" HorizontalContentAlignment="Left"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Image Source="Naruto.jpg" Grid.Column="0" Grid.Row="0"></Image> <TextBlock Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontSize="20">图片按钮</TextBlock> </Grid> </Button> </Grid> </UserControl>
这里用到了Grid布局的知识,简单的实现左右布局,我们会在后期有专门的布局学习。其实就是如下一样的按钮:

你甚至可以在Button上加其它输入控件,简直就是个容器一样,比如下面代码:


<UserControl x:Class="_51CTO.lesson02.ButtonContent" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Button Name="button1" Width="200" Height="100"> <StackPanel> <Ellipse Height="40" Width="40" Fill="Blue"/> <Slider Name="Slider1" Width="100" ValueChanged="Slider_ValueChanged"></Slider> <TextBlock Name="TextBlock1" TextAlignment="Center">按钮</TextBlock> </StackPanel> </Button> </Grid> </UserControl>
C#代码如下:


namespace _51CTO.lesson02 { public partial class ButtonContent : UserControl { public ButtonContent() { InitializeComponent(); } private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { TextBlock1.Text = ((int)Slider1.Value).ToString(); } } }
实现的效果按钮上一个滑动条,滑动式显示数值:

有兴趣的朋友可以发挥想象力将Button玩出更强大的效果来。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台