分类导航

silverlight 发布时间：2022-05-04 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

概述 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic,Visual C#,IronRuby,Ironpython，对JSON、Web service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入silverlight 2开发

本文将综合前面十七篇讲过的界面布局、样式、控件模板、数据绑定、网络通信等几个方面，来开发一个综合实例――简易RSS阅读器。

界面布局

我们最终完成的RSS阅读器界面如下：

定义一个三行两列的Grid，分别放置顶部信息、分割线和下面的内容区：

<Grid.RowDeFinitions>
    <RowDeFinition Height="50"></RowDeFinition>
    <RowDeFinition Height="20"></RowDeFinition>
    <RowDeFinition Height="*"></RowDeFinition>
</Grid.RowDeFinitions>
<Grid.columnDeFinitions>
    <columnDeFinition Width="240"></columnDeFinition>
    <columnDeFinition Width="*"></columnDeFinition>
</Grid.columnDeFinitions>

设计顶部输入区域，对Grid第一行做合并，并且放置一个StackPanel：

<StackPanel x:Name="Header" Orientation="Horizontal"
             Grid.Row="0" Grid.column="0" Grid.columnSpan="2">
    <Image source="RSS.png" Width="32" Height="32" @H_412_46@margin="10 0 10 0"></Image>
    <Border Style="{Staticresource titleBorder}">
        <TextBlock Text="基于Silverlight的RSS阅读器" Foreground="#FFFFFF"
                   VerticalAlignment="Center" @H_412_46@margin="12 0 0 0"></TextBlock>
    </Border>
    <WatermarkedTextBox x:Name="FeedAddress" Width="300" Height="35"
                        FontSize="16" @H_412_46@margin="10 0 10 0">
        <WatermarkedTextBox.Watermark>
            <TextBlock Text="请输入有效的RSS地址" VerticalAlignment="Center"
                       Foreground="#FBA430" FontSize="16"></TextBlock>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    <Button x:Name="displayButton" Style="{Staticresource button}"
            Content="显 示" Click="displayButton_Click"></Button>
    <Button x:Name="fullScreenButton" Style="{Staticresource button}"
            Content="全 屏" Click="fullScreenButton_Click"></Button>
</StackPanel>

鉴于两个按钮的风格一致，在App.xaml中定义一个button样式：

<Style x:Key="button" TargetType="Button">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="35"></Setter>
    <Setter Property="BACkground" Value="#FBA430"></Setter>
    <Setter Property="Foreground" Value="#FBA430"></Setter>
    <Setter Property="FontSize" Value="16"></Setter>
</Style>
<Style x:Key="titleBorder" TargetType="Border">
    <Setter Property="CornerRadius" Value="10"></Setter>
    <Setter Property="Width" Value="220"></Setter>
    <Setter Property="Height" Value="40"></Setter>
    <Setter Property="BACkground">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0">
                <GradientStop Color="#FBA430" Offset="0.0" />
                <GradientStop Color="#FEF4E7" Offset="0.5" />
                <GradientStop Color="#FBA430" Offset="1.0" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

定义分割线，用Rectangle来表示：

<StackPanel Grid.Row="1" Grid.column="0" Grid.columnSpan="2" VerticalAlignment="Center">
    <Rectangle Style="{Staticresource rectangle}"/>
</StackPanel>

为了显示出渐变的样式，我们定义样式如下：

<Style x:Key="rectangle" TargetType="Rectangle">
    <Setter Property="Width" Value="780"></Setter>
    <Setter Property="Height" Value="5"></Setter>
    <Setter Property="RadiusX" Value="3"></Setter>
    <Setter Property="RadiusY" Value="3"></Setter>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0">
                <GradientStop Color="#FEF4E7" Offset="0.0" />
                <GradientStop Color="#FBA430" Offset="1.0" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

定义左边的列表区，用ListBox来显示，并且定义ItemTemplate：

<ListBox x:Name="PostsList" Grid.column="0" Grid.Row="2"
         @H_412_46@margin="10 5 5 10" SELEctionChanged="PostsList_SELEctionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding title.Text}" 
                           textwrapping="Wrap" Width="200"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

最后定义右边的详细信息区域，在StackPanel中垂直放置三个Border：

<StackPanel x:Name="Detail" Grid.column="1" Grid.Row="2">
    <Border CornerRadius="10" BACkground="#CDFCAE" @H_412_46@margin="10 5 10 10"
            Width="540" Height="40">
        <TextBlock Text="{Binding title.Text}"  textwrapping="Wrap"
                   VerticalAlignment="Center" Foreground="Red"/>
    </Border>
    <Border CornerRadius="10" BACkground="#CDFCAE" @H_412_46@margin="10 5 10 10"
            Width="540" Height="300">
        <TextBlock Text="{Binding SumMary.Text}"  textwrapping="Wrap"/>
    </Border>
    <Border CornerRadius="10" BACkground="#CDFCAE" @H_412_46@margin="10 5 10 10"
            Width="540" Height="40">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="评论日期："  textwrapping="Wrap"
                       Foreground="Red" VerticalAlignment="Center"/>
            <TextBlock Text="{Binding PublishDate}"  textwrapping="Wrap"
                       Foreground="Red" VerticalAlignment="Center"/>
        </StackPanel>
    </Border>
</StackPanel>

界面布局到此大功告成。

实现功能

下面实现数据的获取，采用Webrequest来实现，也可以使用其他方式。

/// <sumMary>
/// 显示列表
/// </sumMary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void displayButton_Click(object sender,RoutedEventArgs E)
{
    Uri uri = new Uri(FeedAddress.Text);
    Webrequest request = (Webrequest)Webrequest.Create(uri);
    request.beginGetResponse(new AsyncCallBACk(responseReady),request);
}
void responseReady(IAsyncResult asyncResult)
{
    Webrequest request = (Webrequest)asyncResult.AsyncState;
    WebResponse response = (WebResponse)request.EndGetResponse(asyncResult);
    XmlReader reader = XmlReader.Create(response.GetResponseStream());
    SynDicationFeed Feed = SynDicationFeed.Load(reader);
    PostsList.Itemssource = Feed.Items;
}

显示详细信息：

/// <sumMary>
/// 查看详细信息
/// </sumMary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PostsList_SELEctionChanged(object sender,SELEctionChangedEventArgs E)
{
    SynDicationItem item = PostsList.SELEctedItem as SynDicationItem;
    Detail.DataContext = item;
}

实现全屏按钮的代码：

/// <sumMary>
/// 全屏显示
/// </sumMary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void fullScreenButton_Click(object sender,RoutedEventArgs E)
{
    Content contentObject = Application.Current.Host.Content;
    contentObject.IsFullScreen = !contentObject.IsFullScreen;
}