|
|
概述
Silverlight 2 Beta 1版本發(fā)布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開發(fā)
本文將綜合前面十七篇講過的界面布局、樣式、控件模板、數(shù)據(jù)綁定、網(wǎng)絡(luò)通信等幾個(gè)方面，來開發(fā)一個(gè)綜合實(shí)例——簡易R(shí)SS閱讀器。
界面布局
我們最終完成的RSS閱讀器界面如下：
定義一個(gè)三行兩列的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>
設(shè)計(jì)頂部輸入?yún)^(qū)域，對(duì)Grid第一行做合并，并且放置一個(gè)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="請(qǐng)輸入有效的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>
鑒于兩個(gè)按鈕的風(fēng)格一致，在App.xaml中定義一個(gè)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>
<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>
最后定義右邊的詳細(xì)信息區(qū)域，在StackPanel中垂直放置三個(gè)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="評(píng)論日期：" TextWrapping="Wrap" Foreground="Red" VerticalAlignment="Center"/> <TextBlock Text="{Binding PublishDate}" TextWrapping="Wrap" Foreground="Red" VerticalAlignment="Center"/> </StackPanel> </Border></StackPanel>
界面布局到此大功告成。
實(shí)現(xiàn)功能
下面實(shí)現(xiàn)數(shù)據(jù)的獲取，采用WebRequest來實(shí)現(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;}
顯示詳細(xì)信息：
/// <summary>/// 查看詳細(xì)信息/// </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;}
實(shí)現(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;}
運(yùn)行效果
運(yùn)行后界面如下：
輸入豆瓣的最新影評(píng)Feed：
選擇其中一項(xiàng)后，將顯示出詳細(xì)信息：
結(jié)束語
本文對(duì)前面十七篇內(nèi)容做了一個(gè)小結(jié)，并開發(fā)出了一個(gè)簡易R(shí)SS閱讀器，你可以從這里下載本文示例代碼。
NET技術(shù)：一步一步學(xué)Silverlight ：綜合實(shí)例之RSS閱讀器，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
