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

在silverlight 2(Beta1) 中开发用户控件与我们以前在Webform中使用的方式基本上接近．

下面是一个DEMO，用于执行一个简单的查询雇员信息的操作．运行结果如下图所示:



首先我们要新建一个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查询，所以就不多做说明了．

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

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