学Silverlight 2系列（25）：综合实例之Live Search

修改测试页

在测试ASPX中，修改Silverlight插件的样式控制，并添加一个div用来显示搜索的结果：

<div　style="height:100%;">
　　<asp:Silverlight ID="Xaml1" runat="server"
　　　　Source="~/ClientBin/TerryLee.SilverlightGoogleSearch.xap"
　　　　Version="2.0" Width="857" Height="140" />
　　<div id="result"></div>
</div>

定义几个简单的样式：

<style type="text/css">
　　#result
　　{
　　　　margin-left:20px;
　　}
　　.urlstyle
　　{
　　　　color:#59990E;
　　}
　　.itemstyle
　　{
　　　　border-bottom:dotted 1px #59990E;
　　　　margin-bottom:20px;
　　}
</style>实现Silverlight程序

编写一个简单的Silverlight界面，使其看起来如图所示：

XAML声明如下：

<Grid x:Name="LayoutRoot" Background="White">
　　<Grid.RowDefinitions>
　　　　<RowDefinition Height="55"></RowDefinition>
　　　　<RowDefinition Height="50"></RowDefinition>
　　　　<RowDefinition Height="35"></RowDefinition>
　　</Grid.RowDefinitions>
　　<Grid.ColumnDefinitions>
　　　　<ColumnDefinition Width="*"></ColumnDefinition>
　　</Grid.ColumnDefinitions>
　　
　　<Image Source="LiveSearch.png" Grid.Column="0"></Image>
　　<StackPanel Grid.Row="1" Orientation="Horizontal">
　　　　<TextBox x:Name="txtQuery" Width="400" Height="35"
　　　　　　　　 Margin="50 0 0 0" BorderBrush="#3F7801"></TextBox>
　　　　<Button x:Name="btnSearch" Width="120" Height="35"
　　　　　　　　Background="#62A21D" Margin="20 0 0 0"
　　　　　　　　Content="Search" FontSize="16" Click="btnSearch_Click"></Button>
　　</StackPanel>
　　<TextBlock Grid.Row="2" Text="网页搜索结果" Foreground="#59990E"
　　　　　　　 FontSize="16" Margin="20 0 0 0"></TextBlock>
</Grid>

在Silverlight项目中添加对于ASMX的引用，并编写“Search”按钮的实现，对于如何调用ASMX，可以参考一步一步学Silverlight 2系列（15）：数据与通信之ASMX。动态创建DOM结构，并将结果显示出来：