Picasaweb Viewer

請參考Picasaweb Viewer

這個範例讓視窗的寬、高隨著內容調整大小，其作法是在 xaml 的<window> 裡面設定 SizeToContent="WidthAndHeight"
整個視窗分成左右兩部份，左邊是取自 http://picasaweb.google.com/data/feed/api/user/USER_NAME?kind=album 的RSS feed 列表，右邊則是照片列表。因為都是清單，因此需要將新專案的 <Grid> 拿掉，放兩個 <ListBox> 上去。

Resource
在繼續修改之前，可以先將 Resource 設定好，其內容如下:

    <DockPanel.Resources >
     
      <XmlNamespaceMappingCollection x:Key="mapping">
        <XmlNamespaceMapping Uri="http://www.w3.org/2005/Atom" Prefix="default"/>
        <XmlNamespaceMapping Uri="http://schemas.google.com/photos/2007" Prefix="gphoto"/>
      </XmlNamespaceMappingCollection>
     
      <XmlDataProvider x:Key="Picasa" XmlNamespaceManager="{StaticResource mapping}" Source="http://picasaweb.google.com/data/feed/api/user/USER_NAME?kind=album">
      </XmlDataProvider>
    </DockPanel.Resources>

左半部「相簿清單」

可以注意到這邊會採用 XmlDataProvider 來做 Data Binding, 而這正是左半部的 ListBox 的資料來源，因此我們來看看左半部怎麼寫的:

      <ListBox DockPanel.Dock="Left" SelectionChanged="OnSelctionChanged" DataContext="{StaticResource Picasa}"  ItemsSource="{Binding XPath=default:feed/default:entry/default:title}">
      </ListBox>

在 DataContext 設定其值為 {StaticResource Picasa}，這樣就可以把資料 Binding 好。同時請注意到 SelectionChanged 被設定成 OnSelctionChanged，如此一來就會在左邊的「項目」被點選而改變時，會呼叫 OnSelctionChanged() 來改變右邊的圖片清單。

右半部「照片清單」

至於右邊的清單寫法清微複雜，可以分成三部份來讀:

DataContext

      <ListBox.DataContext>
        <XmlDataProvider XmlNamespaceManager="{StaticResource mapping}">
        </XmlDataProvider>
      </ListBox.DataContext>

可以注意到右半部的 DataContext 與左半部有相同的 XmlNamespaceManager, 也許你一下子沒看出來，不過可以從左半部的 DataContext 使用 Picasa 這個資源就可以追出來。而最重要的 ItemSource 屬性則必須靠使用者點選左半部來改變，因此在 OnSelectionChanged() 中我們可以看到其定義，先讓我們瞧瞧整個事件的定義:

        public void OnSelctionChanged(Object source, RoutedEventArgs args)
        {
            ListBox lb = args.Source as ListBox;
            string simplestr;
            XmlDataProvider provider = MyListBox.DataContext as XmlDataProvider;
            if (provider != null)
            {
                simplestr = lb.SelectedValue.ToString().Substring(0,lb.SelectedValue.ToString().IndexOf('-'));
                simplestr = simplestr.Replace(" ", "");
                simplestr = simplestr.Replace(",", "");
                provider.Source = new Uri(@"http://picasaweb.google.com/data/feed/api/user/wade.fs/album/" + simplestr  + "?kind=photo");
            }
        }

  透過 provider.Source 的設值來動態改變 ListBox 的 ItemSource 屬性。

ItemTemplate

那麼我們如何設定每個清單是什麼樣的元素？可以透過 ListBox 的 ItemTemplate 屬性來設定，範例如下:

      <ListBox.ItemTemplate>
        <DataTemplate>
          <Image Source="{Binding XPath=@src}" Width="300"></Image>
        </DataTemplate>
      </ListBox.ItemTemplate>

而照片的網址則來自 RSS <content> 項目裡面的 "@src" 來指定，可以從 XPath 知道此項關聯。這邊又可以見到一項 Data Binding 的用法。

ItemsPanel

最後，照片清單的顯示若太多，常常會發生把視窗擠的變形到無法接受，若我們要採用比較像瀏覽器的方式的話，可以透過 ItemsPanel 來設定其 Layout, 範例如下:

      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel/>
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>

Proxy Server

若您的環境是透過 Proxy Server 的話，又該如何在 WPF 中使用呢？可以在執行檔所在地產生一個 EXECUTE_FILE.exe.config，其內容很簡單，我們讓它使用與 IE 相同的 Proxy Server 設定值，範例如下:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.net>
    <defaultProxy useDefaultCredentials="true" enabled="true"></defaultProxy>
  </system.net>
</configuration>