概述

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

界面布局

我們最終完成的RSS閱讀器界面如下： 定義一個三行兩列的Grid，分別放置頂部信息、分割線和下面的內(nèi)容區(qū)： <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> 設計頂部輸入?yún)^(qū)域，對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> 定義左邊的列表區(qū)，用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> 最后定義右邊的詳細信息區(qū)域，在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> 界面布局到此大功告成。

實現(xiàn)功能

下面實現(xiàn)數(shù)據(jù)的獲取，采用WebRequest來實現(xiàn)，也可以使用其他方式。 /// <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; } 實現(xiàn)全屏按鈕的代碼： /// <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： 選擇其中一項后，將顯示出詳細信息：

結束語

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

本文出自 “TerryLee技術專欄” 博客，請務必保留此出處http://terrylee.blog.51cto.com/342737/67256

本文出自 51CTO.COM技術博客

轉載于:https://www.cnblogs.com/GT_Andy/archive/2009/07/28/1922018.html

總結

以上是生活随笔為你收集整理的（18）：Silverlight 2 综合实例之RSS阅读器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。