在Silverlight中创建和使用/重用用户控件

• 下载源代码 - 113.71 KB

在Silverlight中创建和使用/重用用户控件

此场景的需求是在Silverlight中创建一个搜索文本框，该文本框可以潜在地用于不同的页面甚至其他项目。

为了实现这个目标，您将创建一个Silverlight应用程序并将其命名为ReusingUserControl。您不会使用RIA服务，因此只需接受此练习的默认设置即可。您的页面看起来应该如下所示，对吧？

在您的Silverlight项目中添加一个名为CommonControls的新文件夹。然后，右键单击该新文件夹并创建一个新项，选择Silverlight用户控件并将其命名为UCSearch。您的屏幕应该如下所示，对吧？

对于此控件，我们将使用水印和工具提示以及图像，最终结果如下所示

为了使水印正常工作，您需要引用System.Windows.Interactivity。此外，您需要使用名为Watermark.cs的CSharp类，这是我从网上一些优秀的开发者那里借鉴的。您还需要一个如上所示或类似的图像，并将其添加到您的项目中。最终的Xaml如下所示。请注意，高度和宽度仅适合文本区域。

<UserControl x:Class="SilverlightApplicationSideBar.CommonControls.UCSearch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Watermark"
    xmlns:Interactivity=
        "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    mc:Ignorable="d"
    d:DesignHeight="32" d:DesignWidth="172">

    <StackPanel Orientation="Horizontal">
        <TextBox Height="23" Name="tbSearch" Width="160" 
                                       HorizontalAlignment="left" Margin="8,6,2,2" 
                                       VerticalAlignment="Top" 
                                       TextWrapping="Wrap"   >
            <Interactivity:Interaction.Behaviors>
                <local:Watermark Text="Search Area"  Foreground="LightGray" />             
            </Interactivity:Interaction.Behaviors>
            <ToolTipService.ToolTip>
                <ToolTip >
                    <Image Source="/ ReusingUserControl;component/Images/zoomtxt.jpg">
                    </Image>
                </ToolTip>
            </ToolTipService.ToolTip>
        </TextBox>       
    </StackPanel>
</UserControl>

观察

1. 引用命名空间System.Windows.Interactivity。
2. 声明水印及其相关内容。
3. 工具提示服务，其中引用了项目zoomtxt.jpg图像。

那么，后台代码呢？

在后台代码中，您将有一个KeyUp事件，您将在其中捕获用户按下键盘Enter键的时间。当用户按下Enter键时，代码将检查文本中是否有任何内容，如果有，则代码会将公共属性text设置为该文本的值。稍后，使用您的控件的页面将读取该公共属性。现在，请查看下面的后台代码

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 SilverlightApplicationSideBar.CommonControls
{
    public partial class UCSearch : UserControl
    {
        public UCSearch()
        {
            InitializeComponent();
        }

        protected void txtSearchArea_KeyUp(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Enter)
            {
                if (tbSearch.Text != null && tbSearch.Text != "")
                {
                    Text = tbSearch.Text;
                }
                else
                {
                    Text = "";
                }
            } 
        }

        public string Text
        {
            get { return tbSearch.Text; }
            set
            {
                Text = value;
            }

        }

    }
}

请记住，您需要Watermark.cs才能编译您的项目。

到目前为止一切顺利，您已准备好将您的用户控件用于Silverlight项目的其他部分。

为此，您需要声明该用户控件。由于在此示例中它位于同一项目中，因此您无需声明程序集，只需声明命名空间即可，如下所示

     xmlns:uc="clr-namespace:ReusingUserControl.CommonControls"

接下来，像下面这样在您的新页面上引用您的用户控件

 <uc:UCSearch Grid.Row="2" Margin="0,15,0,0" x:Name="txtSearch"  
                     KeyUp="txtSearchArea_KeyUp"></uc:UCSearch>

主页的完整xaml如下所示

<UserControl x:Class="ReusingUserControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:uc="clr-namespace:ReusingUserControl.CommonControls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <uc:UCSearch Grid.Row="2" Margin="0,15,0,0" x:Name="txtSearch"  
                     KeyUp="txtSearchArea_KeyUp"></uc:UCSearch>
    </Grid>
</UserControl>

如果您查看代码，您会看到我正在引用一个由keyup触发的事件，对吧？

好的，后台代码如下所示

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;
using System.Windows.Navigation;

namespace SilverlightApplicationSideBar
{
    public partial class Page2 : Page
    {
        public Page2()
        {
            InitializeComponent();
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        protected void txtSearchArea_KeyUp(object sender, KeyEventArgs e)
        {       

            if (e.Key == Key.Enter)
            {
                if (txtSearch.Text != null && txtSearch.Text != "")
                {
                    MessageBox.Show(txtSearch.Text);
                }
            }
        }

    }
}

请注意，在keyup时，我正在检查keyup完成的时间。完成后，我实际上正在读取我之前添加到UCSearch控件的名为text的公共属性。BOOMMMM！您现在可以获取文本框的值。

在这个简单的演示中，什么内容是相关的？

1. 创建包含水印、工具提示和可在应用程序的许多区域重复使用的用户控件。
2. 这里的概念是获取输入的文本并将其传递给数据库以过滤项目返回的数据。

注意：为了节省时间并提高生产力，构建可重用的用户控件似乎是一个不错的选择。您怎么看？

我包含了源代码，以便您可以从中开始。

尽情享用！

Marcio Coelho