Silverlight的UIElement和Control简单应用01

1 UIElement

UIElement是Silverlight的一个类，它包含在System.Windows.UIElement命名空间中。凡是继承System.Windows.UIElement命名空间的XAML类都具有“可视性”，所以可以呈现在Silverlight的界面上。

UIElement常用事件有GotFocus和LostFocus、KeyDown和KeyUp、MouseEnter和MouseLeave等；

常用方法有CaptureMouse、ReleaseMouseCapture、AddHandler、RemoveHandler和UpdateLayout等。

2 Control

Control就Silverlight应用程序中许多控件的基类，它比UIElement和FrameworkElement更进一步，定义的属性和方法等都是完全针对XAML控件。

通常一个控件都包括最基本的鼠标和键盘输入事件，这些事件都在UIElement中定义好了，而一些布局方面的属性都在FrameworkElement定义了，剩下的除了该控件本身属性以外，就全部定义在Control类之中。

大多数控件都要包含诸如Background、BorderBrush、FontSize、Foreground、FontFamily、ControlTemplate等属性，这些在控件间具有很强的通用性，Control类中通常不包含控件某方法的具体实现。

System.Windows.Controls.Control的派生关系如下：

System.Object

   System.Windows.DependencyObject

      System.Windows.UIElement

         System.Windows.FrameworkElement

            System.Windows.Controls.Control

3 建立Silverlight应用程序

   3.1 MainPage.xaml

  1 <UserControl 
  2     xmlns:twilightBlue="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.TwilightBlue" 
  3     x:Class="button.MainPage"
  4     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  5     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  8     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  9     <twilightBlue:TwilightBlueTheme>
 10         <Grid x:Name="LayoutRoot">
 11             <Grid.Background>
 12                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 13                     <GradientStop Color="Black" Offset="0"/>
 14                     <GradientStop Color="#8D2D96EF" Offset="1"/>
 15                 </LinearGradientBrush>
 16             </Grid.Background>
 17             <Grid.RowDefinitions>
 18                 <RowDefinition Height="Auto"/>
 19                 <RowDefinition Height="Auto"/>
 20                 <RowDefinition Height="Auto"/>
 21                 <RowDefinition Height="Auto"/>
 22                 <RowDefinition Height="Auto"/>
 23                 <RowDefinition Height="Auto"/>
 24             </Grid.RowDefinitions>
 25             <Canvas Name="layoutroot1">
 26                 <Button Name="button1"
 27                         Content="第一个按钮" Canvas.Left="10" Canvas.Top="10"
 28                         Click="Button_Click"
 29                         MouseEnter="Button_MouseEnter"
 30                         MouseLeave="Button_MouseLeave"
 31                         GotFocus="Button_GotFocus"
 32                         LostFocus="Button_LostFocus"/>
 33                 <Button Name="button2"
 34                         Content="第二个按钮" Canvas.Left="100" Canvas.Top="10"
 35                         IsEnabled="False"
 36                         IsEnabledChanged="Button_IsEnabledChanged"/>
 37                 <TextBox Name="messagebox" Width="300" Height="100"
 38                          AcceptsReturn="True" FontSize="14"
 39                          Canvas.Left="10" Canvas.Top="40"></TextBox>
 40                 <TextBlock Text="超级链接按钮演示" Foreground="#FFBC1F1F" Canvas.Left="400" Canvas.Top="10"
 41                            FontSize="18"/>
 42                 <HyperlinkButton Content="在新窗口中打开：www.baidu.com" 
 43                                  NavigateUri="http://www.baidu.com"
 44                                  TargetName="_blank"
 45                                  Canvas.Top="40" Canvas.Left="400"
 46                                  FontSize="18"
 47                                  ></HyperlinkButton>
 48                 <HyperlinkButton Content="在当前窗口中打开：www.baidu.com"
 49                                  NavigateUri="http://www.baidu.com"
 50                                  TargetName=""
 51                                  Canvas.Top="80" Canvas.Left="400"
 52                                  FontSize="18"
 53                                  ></HyperlinkButton>
 54             </Canvas>
 55             <TextBlock Text="选择控件示例" Margin="5,150,10,5" FontSize="18"
 56                        FontWeight="Bold" Foreground="#FFBE4D4D" Height="30"/>
 57             <CheckBox Name="checkbox1" Content="有两种状态的选择框" FontSize="18" Grid.Row="1" 
 58                       Margin="5,0,0,5" Checked="CheckBox_Checked"
 59                       Unchecked="CheckBox_Unchecked"/>
 60             <CheckBox Name="checkbox2" Content="有三种状态的选择框" IsThreeState="True"
 61                       Grid.Row="2" Margin="5,0,0,5" Checked="CheckBox_Checked"
 62                       Unchecked="CheckBox_Unchecked" FontSize="18"
 63                       Indeterminate="CheckBox_Indeterminate"/>
 64             <TextBox Name="tbmessage" AcceptsReturn="True" VerticalAlignment="Stretch"
 65                      VerticalScrollBarVisibility="Auto" FontSize="14"
 66                      Grid.Row="3" Margin="5,0,5,5" Height="100"/>
 67             <Grid x:Name="layoutgrid" Grid.Row="4">
 68                 <Grid.RowDefinitions>
 69                     <RowDefinition Height="Auto"/>
 70                     <RowDefinition Height="Auto"/>
 71                     <RowDefinition Height="Auto"/>
 72                 </Grid.RowDefinitions>
 73                 
 74                 <TextBlock Text="选择控件示例" Margin="5,10,10,10" FontSize="18"
 75                            FontWeight="Bold" Foreground="#FFBE4D4D" Grid.Row="0"/>
 76                 
 77                 <Grid x:Name="rb_group1" Grid.Row="1">
 78                     <Grid.RowDefinitions>
 79                         <RowDefinition Height="Auto"/>
 80                         <RowDefinition Height="Auto"/>
 81                         <RowDefinition Height="Auto"/>
 82                         <RowDefinition Height="Auto"/>
 83                     </Grid.RowDefinitions>
 84                     <TextBlock Name="tb_group1_message" Grid.Row="0"
 85                                Text="加入父容器自动分组：" FontSize="18"
 86                                HorizontalAlignment="Left" Margin="5,0,0,0"/>
 87                     <RadioButton Name="rb_group1_1" Content="自动分组-选项1"
 88                                  Grid.Row="1" Margin="10,0,0,0" FontSize="18"
 89                                  Checked="RadioButton_Checked"/>
 90                     <RadioButton Name="rb_group1_2" Content="自动分组-选项2"
 91                                  Grid.Row="2" Margin="10,0,0,0" FontSize="18"
 92                                  Checked="RadioButton_Checked"/>
 93                     <RadioButton Name="rb_group1_3" Content="自动分组-选项1"
 94                                  Grid.Row="3" Margin="10,0,0,0" FontSize="18"
 95                                  Checked="RadioButton_Checked"/>
 96                 </Grid>
 97 
 98                 <Grid x:Name="rb_group2" Grid.Row="2">
 99                     <Grid.RowDefinitions>
100                         <RowDefinition Height="Auto"/>
101                         <RowDefinition Height="Auto"/>
102                         <RowDefinition Height="Auto"/>
103                         <RowDefinition Height="Auto"/>
104                         <RowDefinition Height="Auto"/>
105                     </Grid.RowDefinitions>
106                     <TextBlock Name="tb_group2_message" Grid.Row="0"
107                                Text="用GroupName属性分组：" FontSize="18"
108                                HorizontalAlignment="Left" Margin="5,0,48,0"/>
109                     <RadioButton Name="rb_group2_1" Content="第一分组-选项1"
110                                  Grid.Row="1" Margin="10,0,0,0" FontSize="18"
111                                  Checked="RadioButton_Checked"/>
112                     <RadioButton Name="rb_group2_2" Content="第一分组-选项2"
113                                  Grid.Row="2" Margin="10,0,0,0" FontSize="18"
114                                  Checked="RadioButton_Checked"/>
115                     <RadioButton Name="rb_group3_1" Content="第二分组-选项1"
116                                  Grid.Row="3" Margin="10,0,0,0" FontSize="18"
117                                  Checked="RadioButton_Checked"/>
118                     <RadioButton Name="rb_group3_2" Content="第二分组-选项2"
119                                  Grid.Row="4" Margin="10,0,0,0" FontSize="18"
120                                  Checked="RadioButton_Checked"/>
121                 </Grid>
122             </Grid>
123         </Grid>
124 
125     </twilightBlue:TwilightBlueTheme>
126 </UserControl>
127 

   3.2 MainPage.xaml.cs(C#程序)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace button
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.messagebox.Text += "触发了和一个按钮的click事件。\n";
            this.button2.IsEnabled = !this.button2.IsEnabled;
        }

        private void Button_MouseEnter(object sender, MouseEventArgs e)
        {
            this.messagebox.Text += "鼠标指针进入第一个按钮的边界区域。\n";
        }

        private void Button_MouseLeave(object sender, MouseEventArgs e)
        {
            this.messagebox.Text += "鼠标指针进入第一个按钮的边界区域。\n";
        }

        private void Button_GotFocus(object sender, RoutedEventArgs e)
        {
            this.messagebox.Text += "第一个按钮获得焦点。\n";
        }

        private void Button_LostFocus(object sender, RoutedEventArgs e)
        {
            this.messagebox.Text += "第一个按钮失去焦点。\n";
        }

        private void Button_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            this.messagebox.Text += "第二个按钮的isenable改变为" +
                ((this.button2.IsEnabled == true) ? "True" : "False") + "\n";
        }

        private void CheckBox_Checked(object sender, RoutedEventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            if (cb.Name == "checkbox1")
            {
                this.tbmessage.Text += "两态选择框被选中\n";
            }
            else
            {
                this.tbmessage.Text += "三态选择框被选中\n";
            }
        }

        private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            if (cb.Name == "checkbox1")
            {
                this.tbmessage.Text += "两态选择框被撤销选中\n";
            }
            else
            {
                this.tbmessage.Text += "三态选择框被撤销选中\n";
            }
        }

        private void CheckBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            this.tbmessage.Text += "三态选择框被切换到不确定状态\n";
        }

        private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            string groupMessage1 = "加入父容器自动分组：";
            string groupMessage2 = "用GroupName属性分组：";
            RadioButton rb = sender as RadioButton;
            switch (rb.Name)
            {
                case "rb_group1_1":
                    this.tb_group1_message.Text = groupMessage1 + "选项1被选中。";
                    break;
                case "rb_group1_2":
                    this.tb_group1_message.Text = groupMessage1 + "选项2被选中。";
                    break;
                case "rb_group1_3":
                    this.tb_group1_message.Text = groupMessage1 + "选项3被选中。";
                    break;
                case "rb_group2_1":
                    this.tb_group2_message.Text = groupMessage2 + "分组->" + rb.GroupName + "的选项1被选中。";
                    break;
                case "rb_group2_2":
                    this.tb_group2_message.Text = groupMessage2 + "分组->" + rb.GroupName + "的选项2被选中。";
                    break;
                case "rb_group3_1":
                    this.tb_group2_message.Text = groupMessage2 + "分组->" + rb.GroupName + "的选项3被选中。";
                    break;
                case "rb_group3_2":
                    this.tb_group2_message.Text = groupMessage2 + "分组->" + rb.GroupName + "的选项4被选中。";
                    break;
            }
        }

    }
}

   3.3 程序运行效果图：

 

4 总结

Button控件

Background：获取或设置按钮控件的背景。

ClickMode：获取或设置Click事件何时发生。

Foreground：获取或设置按钮控件的前景色。

Height：获取或设置按钮控件的前景色。

IsEnabled：获取或设置一个值，该值指示控件是否可以与用户交互；当值为False时，控件不响应用户的任何输入操作。

HyperLinkButton控件

NavigateUri：获取或设置单击HyperLinkButton控件时要导航到的URI。

TargetName：设置由NavigateUri属性指定的网页要导航到的目标窗口的名称，学用值为_blank、_parent、_self、_top或固定值。

CheckBox控件

IsChecked：这个属性的值为True时，表示控件被选中；否则表示控件未被选中。

IsEnabled：值为True时，控件可以与用户交互；否则控件不可用。

IsThressState：值为True时，控件支持3种状态，否则支持2种状态（选中和未选中）。