Silverlight 学习 实例1 DiggSample_WebService

一个调用了WebService  和 使用控件ListBox 等的实例

源码：

文件Page.xaml

<UserControl x:Class="DiggSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:Digg="clr-namespace:DiggSample">
    
    <Grid Style="{StaticResource TopGrid}">

        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Style="{StaticResource Header}">
        
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>

            <Border Style="{StaticResource TitleBorder}">
                <TextBlock Text="DIGG SEARCH" Style="{StaticResource TitleText}"  />
            </Border>

            <TextBox x:Name="txtSearchTopic" Grid.Column="1" Padding="1,3,1,1"/>

            <Button x:Name="btnSearch" 
                    Content="Search" 
                    Click="SearchBtn_Click" 
                    Style="{StaticResource SearchButton}" />

        </Grid>

        <ListBox x:Name="StoriesList" SelectionChanged="StoriesList_SelectionChanged" Style="{StaticResource StoriesList}">

            <ListBox.ItemTemplate>
                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <!-- Yellow Digg Panel with NumDiggs-->
                        <StackPanel Style="{StaticResource DiggPanel}" >
                        
                            <TextBlock Text="{Binding NumDiggs}" Style="{StaticResource NumDigsBlock}" />
                            <TextBlock Text="diggs" Style="{StaticResource NumDigsSubBlock}" />   
                                                     
                        </StackPanel>

                        <!-- Story Thumbnail Preview -->
                        <Image Source="{Binding ThumbNail}" Style="{StaticResource ThumbNailPreview}" />

                        <!-- Story Title-->
                        <TextBlock Text="{Binding Title}" Margin="5" Style="{StaticResource TitleBlock}"/>

                    </StackPanel>
                    
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox> 

        <Digg:StoryDetailsView x:Name="DetailsView" Grid.RowSpan="2" Visibility="Collapsed" />
        
    </Grid>
        
</UserControl>

文件Page.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Net;
using System.Xml.Linq;

namespace DiggSample
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        void SearchBtn_Click(object sender, RoutedEventArgs e)
        {
            // Retrieve Topic to Search for from WaterMarkTextBox
            string topic = txtSearchTopic.Text;

            // Construct Digg REST URL
            string diggUrl = String.Format("http://services.digg.com/stories/topic/{0}?count=20&appkey=http%3A%2F%2Fscottgu.com", topic);

            // Initiate Async Network call to Digg
            WebClient diggService = new WebClient();
            diggService.DownloadStringCompleted += new DownloadStringCompletedEventHandler(DiggService_DownloadStoriesCompleted);
            diggService.DownloadStringAsync(new Uri(diggUrl));
        }

        void DiggService_DownloadStoriesCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                DisplayStories(e.Result);
            }
        }

        void DisplayStories(string xmlContent)
        {
            XDocument xmlStories = XDocument.Parse(xmlContent);

            var stories = from story in xmlStories.Descendants("story")
                          where story.Element("thumbnail") != null && 
                                !story.Element("thumbnail").Attribute("src").Value.EndsWith(".gif")
                          select new DiggStory
                          {
                              Id = (int)story.Attribute("id"),
                              Title = ((string)story.Element("title")).Trim(),
                              Description = ((string)story.Element("description")).Trim(),
                              ThumbNail = (string)story.Element("thumbnail").Attribute("src").Value,
                              HrefLink = new Uri((string)story.Attribute("link")),
                              NumDiggs = (int)story.Attribute("diggs"),
                              UserName = (string)story.Element("user").Attribute("name").Value,
                          };

            StoriesList.SelectedIndex = -1;
            StoriesList.ItemsSource = stories;
        }

        void StoriesList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            DiggStory story = (DiggStory) StoriesList.SelectedItem;

            if (story != null)
            {
                DetailsView.DataContext = story;
                DetailsView.Visibility = Visibility.Visible;
            }
        }
    }
}

文件App.xaml

<Application xmlns="http://schemas.microsoft.com/client/2007"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
             x:Class="DiggSample.App">
             
    <Application.Resources>

        <Style x:Key="TitleBorder" TargetType="Border">
            <Setter Property="CornerRadius" Value="10"/>
            <Setter Property="Background" Value="#FFDEDEDE"/>
            <Setter Property="Margin" Value="0,0,5,0"/>
            <Setter Property="Grid.Column" Value="0"/>
        </Style>

        <Style x:Key="TitleText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="#FF14517B"/>
            <Setter Property="Margin" Value="10,3,0,0"/>
        </Style>

        <Style x:Key="TopGrid" TargetType="Grid">
            <Setter Property="Background" Value="#FF5C7590" />
        </Style>

        <Style x:Key="Header" TargetType="Grid">
            <Setter Property="Margin" Value="7" />
            <Setter Property="Grid.Row" Value="0"/>
        </Style>

        <Style x:Key="SearchBox" TargetType="TextBox">
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="FontSize" Value="12"/>
        </Style>

        <Style x:Key="SearchButton" TargetType="Button">
            <Setter Property="Grid.Column" Value="2"/>
        </Style>

        <Style x:Key="StoriesList" TargetType="ListBox">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Grid.Row" Value="1"/>
        </Style>
        
        <Style x:Key="DiggPanel" TargetType="StackPanel">
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Width" Value="55"/>
            <Setter Property="Height" Value="55"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFFF098"/>
                        <GradientStop Color="#FFFFF9D4" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DiggPanelDetail" TargetType="StackPanel">
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Width" Value="55"/>
            <Setter Property="Height" Value="55"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFFF098"/>
                        <GradientStop Color="#FFFFF9D4" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Grid.Row" Value="1"/>
            <Setter Property="Grid.Column" Value="0"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Top"/>

        </Style>

        <Style x:Key="NumDigsBlock" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="DarkSlateGray"/>
        </Style>

        <Style x:Key="NumDigsSubBlock" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="DarkSlateGray"/>
        </Style>

        <Style x:Key="ThumbNailPreview" TargetType="Image">
            <Setter Property="Margin" Value="7,7,5,5"/> 
            <Setter Property="Height" Value="55"/>
        </Style>

        <Style x:Key="TitleBlock" TargetType="TextBlock">
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="TextAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <Style x:Key="CloseButton" TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="25"/>

            <Setter Property="Template">
                <Setter.Value>
                
                        <ControlTemplate>
                            <Border x:Name="brd1" Width="22" Height="22" CornerRadius="15">
                                <TextBlock x:Name="txt1" Foreground="#222" TextAlignment="center" Text="r" FontSize="11" VerticalAlignment="center" FontFamily="Webdings"/>
                                <Border.Background>
                                    <RadialGradientBrush GradientOrigin=".3, .3">
                                        <GradientStop Color="#FFF" Offset=".15"/>
                                        <GradientStop Color="#777" Offset="1"/>
                                    </RadialGradientBrush>
                                </Border.Background>
                            </Border>
                        </ControlTemplate>

                </Setter.Value>
            </Setter>

        </Style>

        <Style x:Key="StoryDetailContent" TargetType="StackPanel">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
        </Style>

        <Style x:Key="TitleLink" TargetType="HyperlinkButton">
            <!--<Setter Property="TextWrapping" Value="Wrap"/>-->
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Width" Value="500"/>

            <Setter Property="Grid.Row" Value="0"/>
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="Grid.ColumnSpan" Value="2"/>
        </Style>

        <Style x:Key="DescriptionBlock" TargetType="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Foreground" Value="white"/>
            <Setter Property="Width" Value="380"/>
            <Setter Property="Grid.Row" Value="1"/>
            <Setter Property="Grid.Column" Value="1"/>
        </Style>

        <Style x:Key="PosterBlock" TargetType="TextBlock">
            <Setter Property="Foreground" Value="white"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>

        <Style x:Key="DetailsThumbNailPreview" TargetType="Image">
            <Setter Property="Margin" Value="10, 0, 10, 0"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Grid.Row" Value="1"/>
            <Setter Property="Grid.Column" Value="2"/>
        </Style>

        <Style x:Key="SubmitDetails" TargetType="StackPanel">
            <Setter Property="Grid.Row" Value="2"/>
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="Orientation" Value="Horizontal"/>
        </Style>

    </Application.Resources>

</Application>

文件StoryDetailsView.xaml

<UserControl x:Class="DiggSample.StoryDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Grid>

        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.765" Fill="#FF8A8A8A" />

        <Border CornerRadius="30" Background="#FF5C7590" Width="600" Height="250">

            <StackPanel Margin="5, 7, 0, 5">

                <!-- Top Right Close Button -->
                <Button Click="CloseBtn_Click" Content="Close" Style="{StaticResource CloseButton}"/>

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="20"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="85"/>
                        <ColumnDefinition Width="380" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>

                    <!-- Top: Story Title (hyperlink) -->
                    <HyperlinkButton Content="{Binding Title}"  NavigateUri="{Binding HrefLink}" Style="{StaticResource TitleLink}" />

                    <!-- Left: Yellow Digg Panel with NumDiggs-->
                    <StackPanel Style="{StaticResource DiggPanelDetail}" >
                        <TextBlock Text="{Binding NumDiggs}" Style="{StaticResource NumDigsBlock}" />
                        <TextBlock Text="diggs" Style="{StaticResource NumDigsSubBlock}" />   
                    </StackPanel>

                    <!-- Center: Story Description -->
                    <TextBlock Text="{Binding Description}" Style="{StaticResource DescriptionBlock}"/>

                    <!-- Right: Story Preview Picture -->
                    <Image Source="{Binding ThumbNail}" Style="{StaticResource DetailsThumbNailPreview}"/>

                    <!-- Bottom Center: Submitter Details -->
                    <StackPanel Style="{StaticResource SubmitDetails}">
                        <TextBlock Text="Submitted by: " Style="{StaticResource PosterBlock}"/>
                        <TextBlock Text="{Binding UserName}" Style="{StaticResource PosterBlock}" />
                    </StackPanel>                    
                </Grid>

            </StackPanel>


        </Border>
        
    </Grid>

</UserControl>

文件StoryDetailsView.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;

namespace DiggSample
{
    public partial class StoryDetailsView : UserControl
    {
        public StoryDetailsView()
        {
            InitializeComponent();
        }

        void CloseBtn_Click(object sender, RoutedEventArgs e)
        {
            Visibility = Visibility.Collapsed;
        }
    }
}