开发学院图形图像Flash 学Silverlight 2系列(25):综合实例之Live Sear... 阅读

学Silverlight 2系列(25):综合实例之Live Search

 2008-10-03 11:38:41 来源:WEB开发网   
核心提示: 修改测试页在测试ASPX中,修改Silverlight插件的样式控制,学Silverlight 2系列(25):综合实例之Live Search(3),并添加一个div用来显示搜索的结果:<divstyle="height:100%;"><asp:Si

学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界面,使其看起来如图所示:

学Silverlight 2系列(25):综合实例之Live Search

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结构,并将结果显示出来:

上一页  1 2 3 4  下一页

Tags:Silverlight 系列 综合

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接