Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。本文將綜合前面十七篇講過的界面布局、樣式、控件模板、數據綁定、網絡通信等幾個方面，來開發一個綜合實例——簡易RSS閱讀器。

概述

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" Margin="10 0 10 0"></Image>
    <Border Style="{StaticResource titleBorder}">
        <TextBlock Text="基于Silverlight的RSS閱讀器" Foreground="#FFFFFF"
                   VerticalAlignment="Center" Margin="12 0 0 0"></TextBlock>
    </Border>
    <WatermarkedTextBox x:Name="feedAddress" Width="300" Height="35"
                        FontSize="16" 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"
         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" 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" Margin="10 5 10 10"
            Width="540" Height="300">
        <TextBlock Text="{Binding Summary.Text}"  TextWrapping="Wrap"/>
    </Border>
    <Border CornerRadius="10" Background="#CDFCAE" 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;
}

運行效果

運行后界面如下：

 

輸入豆瓣的最新影評Feed：

選擇其中一項后，將顯示出詳細信息：

 

結束語

本文對前面十七篇內容做了一個小結，并開發出了一個簡易RSS閱讀器，你可以從這里下載本文示例代碼。

下一篇：一步一步學Silverlight 2系列（19）：如何在Silverlight中與HTML DOM交互（上）