在silverlight中开发User Control(用户控件)

在silverlight 2(Beta1) 中开发用户控件与我们以前在Webform中使用的方式基本上接近．
下面是一个DEMO，用于执行一个简单的查询雇员信息的操作．运行结果如下图所示:

在silverlight中开发User Control(用户控件)

     首先我们要新建一个Silverlight Application , 名称为：SearchUserControl
     在该项目中添加一个Silverlight User Control , 名称为：EmployeeSearch

     然后我们在该用户控件的CS代码中添加一个类用于描述雇员信息，如下：

public class EmployeeInfo
{
public string EmployeeNo { get ; set ; }
public string EmployeeName { get ; set ; }
}

另外还有一个EmployeeNameEventArgs类，用于当点击查询时，将要查询的雇员姓名以事件
参数方式传递到Page页面中，如下：

public class EmployeeNameEventArgs : EventArgs
{
public string EmployeeName { get ; set ; }
}

到这里准备工作就绪，下面是相应的控件xaml代码，请将其粘贴到EmployeeSearch.xaml中:

< Grid x:Name ="LayoutRoot" Background ="White" >
     < Grid.RowDefinitions >
         < RowDefinition Height ="200" />
         < RowDefinition Height ="100" />
         < RowDefinition Height ="50" />
     </ Grid.RowDefinitions >

     < ListBox Margin ="10" x:Name ="EmployeeList" />

     < StackPanel   Grid.Row ="1" Margin ="12" >
         < TextBlock > 输入要查询的名称： </ TextBlock >
         < TextBox x:Name ="Search" Margin ="10" Text ="james" />
     </ StackPanel >
     < Button Margin ="10" Content ="获取Employee信息" Grid.Row ="2" Click ="OnGetEmployee"
    Width ="120" />
</ Grid >

然后将下面的cs代码复制到EmployeeSearch.xaml.cs中，相关内容参见注释:

public partial class EmployeeSearch : System.Windows.Controls.UserControl
{

     #region 使用依赖属性从PAGE页面传参到当前用户控件,详情参见Page.xaml页面
     public static DependencyProperty SearchEmployeeNameProperty =
             DependencyProperty.Register( " SearchEmployeeName " , typeof ( string ),
              typeof (EmployeeSearch), null );


     public string SearchEmployeeName
    {
         get
        {
             return (( string ) base .GetValue(SearchEmployeeNameProperty));
        }
         set
        {
             base .SetValue(SearchEmployeeNameProperty, value);
        }
    }
     #endregion

     /// <summary>
     /// 声明查询单击事件
     /// </summary>
     public event EventHandler < EmployeeNameEventArgs > SearchClick;

     public EmployeeSearch()
    {
        InitializeComponent();
         this .Loaded += OnLoaded;
    }

     void OnLoaded( object sender, RoutedEventArgs e)
    {
        Search.Text = SearchEmployeeName;
    }


     void OnGetEmployee( object o, EventArgs e)
    {
         // 当有事件绑定时(参见page.xaml中的 SearchClick="OnSearch" 属性)
         if (SearchClick != null )
        {
            SearchEmployeeName = Search.Text;
             // 运行绑定的单击事件代码
            SearchClick( this , new EmployeeNameEventArgs()
            {
                EmployeeName = Search.Text
            });
        }
    }

     // 将ListBox的ItemsSource属性开放给Page页面，以便进行数据绑定
     public System.Collections.IEnumerable ItemsSource
    {
         get
        {
             return EmployeeList.ItemsSource;
        }
         set
        {
            EmployeeList.ItemsSource = value;
        }
    }
}

这样控件的开发就完成了，下面是在page.xaml中声明并设置这个控件相应属性的代码：

< UserControl x:Class ="SearchUserControl.Page"
    xmlns ="http://schemas.microsoft.com/client/2007"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width ="400" Height ="400" xmlns:local ="clr-namespace:SearchUserControl" >
     < UserControl.Resources >
         < local:EmployeeInfo EmployeeName ="王五" x:Key ="myEmployee" />
     </ UserControl.Resources >

     < StackPanel   x:Name ="LayoutRoot" Background ="White" >
         < local:EmployeeSearch x:Name ="SearchControl" SearchClick ="OnSearch"
                 SearchEmployeeName = "{Binding EmployeeName}"
                 DataContext = "{StaticResource myEmployee}" />

         < TextBlock x:Name ="txtEmployeeName" Text ="暂无" FontSize ="16" Margin ="10" TextAlignment ="Center" />
     </ StackPanel >
</ UserControl >

其中的xmlns:local="clr-namespace:SearchUserControl"为控件的名空间的引用，类似于我们
以前写用户控件时的：

< %@ Register TagPrefix ="" Namespace ="" Assembly ="" % >

而下面代码即是我们引用该控件并进行属性设置的声明：

< local:EmployeeSearch x:Name ="SearchControl" SearchClick ="OnSearch"
SearchEmployeeName = " {Binding EmployeeName} "
DataContext = " {StaticResource myEmployee} " />

StaticResource myEmployee会使用本地绑定的静态资源中所指向的数据，如下：

< UserControl.Resources >
< local:EmployeeInfo EmployeeName ="王五" x:Key ="myEmployee" />
</ UserControl.Resources >

     这样就会将控件中的搜索框绑定到该初始值（资源）上．

     而下面就是实际运行这个控件执行查询操作时CS代码（page.xaml.cs）：

void OnSearch( object sender, EmployeeNameEventArgs e)
{
    List < string > employeeList = new List < string > ();
     foreach (EmployeeInfo en in GetData(e.EmployeeName))
    {
        employeeList.Add(en.EmployeeNo + " " + en.EmployeeName);
    }

    SearchControl.ItemsSource = employeeList;

    txtEmployeeName.Text = " 查询有关 """ + SearchControl.SearchEmployeeName + """ Employee信息 " ;
}

private List < EmployeeInfo > GetData( string value)
{
    Dictionary < string , string > employee = new Dictionary < string , string > (){  { " 10001 " , " 张三 " },
                                                                             { " 10002 " , " 李四 " },
                                                                             { " 10003 " , " 王五 " },
                                                                             { " 10004 " , " 马六 " },
                                                                             { " 10005 " , " 王大麻子 " },
                                                                             { " 10006 " , " 王宝强 " },
                                                                             { " 10007 " , " 王蛋蛋 " },
                                                                             { " 10008 " , " 王五强 " }
                                          };

     return (from e in employee
             where e.Value.Contains(value.Trim())
            select new EmployeeInfo
            {
                EmployeeNo = e.Key,
                EmployeeName = e.Value
            }).ToList();
}

     因为代码比较简单，基本上就是一个linq to object查询，所以就不多做说明了．

     好了，今天的内容就先到这里，有兴趣的朋友可以在回复中进行讨论．

     源码下载地址，请点击这里:)

秒客网

在silverlight中开发User Control(用户控件)

相关文章