波斯马BOSSMA Information Technology

Silverlight事件处理和动态创建控件

发布时间:2008年11月20日 / 分类:ASP.NET, Silverlight / 17,509 次浏览 / 评论

[源自Silverlight tutorial]
这篇文章,介绍Silverlight应用中的事件处理和动态创建控件。

1、我们先来看一个例子:

<UserControl x:Class="SLDemo.EventDemo"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="400" Height="300">
 <Canvas Loaded="Canvas_Loaded">
 <Button x:Name="myButton" Content="Hello" Canvas.Left="10" Canvas.Top="10"></Button>
 </Canvas>
</UserControl>

注意以x:作为前缀的属性,如:x:Class、x:Name,这些都是编程构造,也就是说他们都可以进行相关的程序编码。
x:Class:配置 XAML 编译以便在标记与代码隐藏之间联接分部类,它由命名空间和类名组成,所有的事件处理都在这个对应的文件中进行。
x:Name:控件的唯一标记。

在这个例子中,我们通过XAML为Canvas控件定义了一个事件处理,实际上这是一个事件委托,我们将Canvas_Loaded绑定到Loaded事件。

然后看一下在cs文件中的处理(在XAML文件中选择事件名称,右键就可以定位到事件处理):

private void Canvas_Loaded(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Please Click Me";
        }

这段代码的意思是,当Canvas加载的时候,将myButton控件的Content设置为Please Click Me。
在设计时的时候我们可以看到,myButton控件上显示的是Hello,但当我们运行这个程序的时候,显示已经变为Please Click Me,并且控件能够自动适应文本的内容,显示良好的界面。

在这种事件声明方式中,在XAML文件中,指定了方法的名称(没有参数),以及绑定到的事件。
同时在对应的cs文件中,添加了符合.NET事件处理格式的方法,这个方法对应XAML文件中指定的方法名。
第一个参数指定了触发这个事件的对象,第二个参数是一个EventArgs类型或者一个继承了EventArgs的类型,这里是RoutedEventArgs。

2、除了这种定义事件处理的方式,还可以在代码中直接定义
在xaml中定义如下:

<UserControl x:Class="SLDemo.EventDemo"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="400" Height="300">
 <Canvas>
 <Button x:Name="myButton" Content="I'm Indented!" Canvas.Left="150" Canvas.Top="20" />
 </Canvas>
</UserControl>

一个Button控件。

接下来,在CS文件中添加事件委托,可以使用代码提示功能来完成输入。

    public partial class EventDemo : UserControl
    {
        public EventDemo()
        {
            InitializeComponent();
            //绑定一个方法EventDemo_Loaded到Loaded事件
            Loaded += new RoutedEventHandler(EventDemo_Loaded);
        }

        //在这个方法中,为myButton控件的Click事件做了一个绑定
        void EventDemo_Loaded(object sender, RoutedEventArgs e)
        {
            myButton.Click += new RoutedEventHandler(myButton_Click);
        }

        //Click后要执行的方法,已绑定
        void myButton_Click(object sender, RoutedEventArgs e)
        {
            myButton.Content = "Have Clicked!";
        }
    }

现在可以运行以查看效果。

3、在Silverlight 2中,所有的XAML控件与CLR对象同构,所以完全可以在代码中来创建这些控件。
我们在XAML中可以这样写:

<Button x:Name="myButton" Content="Hello" />

在代码中,可以这样定义:

Button myButton = new Button();
myButton.Content = "Hello";

它们的效果是一样的。

大多数情况下,推荐使用XAML来定义控件,可以更方便的创建、修改和控制。
当你在设计时不清楚将创建哪些控件时,你可以使用动态创建控件。
看一个例子:

    public partial class EventDemo : UserControl
    {
        private int newButtonPosition = 100;

        public EventDemo()
        {
            InitializeComponent();
            //Anthor按钮单击事件
            Another.Click += new RoutedEventHandler(Another_Click);
        }

        //Anthor按钮单击后,执行方法
        void Another_Click(object sender, RoutedEventArgs e)
        {
            //创建一个Button
            Button b = new Button();
            //显示内容
            b.Content = "I live!";
            //为新创建的控件新建Thickness对象,用来设置Button控件的位置
            //原文中使用了Canvas.LeftProperty和Canvas.TopProperty
            Thickness tn = new Thickness(10,this.newButtonPosition,0,0);
            b.SetValue(Canvas.StyleProperty, tn);
            //到顶部的距离递增
            this.newButtonPosition += 30;
            b.Width = 100;
            b.Height = 20;
            //给这个新建的按钮的Click事件添加一个处理方法
            b.Click += new RoutedEventHandler(b_Click);
            //添加到父控件,并显示
            myCanvas.Children.Add(b);
        }

        //点击添加的控件触发
        void b_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            btn.Content = "Don't do that!";
            btn.IsEnabled = false;
        }
    }

由于没有截图,请自己运行查看效果。
OK,这篇文章到此结束。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Silverlight事件处理和动态创建控件

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有2 条评论

  1. ghx88 0楼:

    this.newButtonPosition += 30;
    ==========================
    这一步不明白, 这个可以设置按钮的位置吗?

    • Thickness用来描述矩形周围框架的粗细,我理解为margin,四个值分别为left、top、right、bottom。
      这里使用:
      Thickness tn = new Thickness(10,this.newButtonPosition,0,0);
      然后设置:
      this.newButtonPosition += 30;

      意思是这个新按钮的top margin在当前点击按钮的基础上在加30。

发表评论