Windows Phone 7 中幻燈片視圖的翻頁效果 (Pivot)

在 iOS 中有一個 UIPageControl 用來進行界面的翻頁處理，而 Windows Phone 7 有一個 Pivot 控件可用來對內容進行分頁瀏覽，Pivot 控件要用在界面上具有相同的邏輯標題，例如將文章分開多頁顯示，如下圖顯示：

該控件顯示在 XAML 中定義的當前頁，并通過一個 ElementName 的綁定來定義關聯的其他內容。

<local:PivotLocationView Source="{Binding ElementName=pivot}"
                          HorizontalAlignment="Center"

                          VerticalAlignment="Bottom"
                          Margin="0,0,0,10"/>

<controls:Pivot Margin="0,-30,0,40" 
                x:Name="pivot">
  <controls:PivotItem>

    ...
  </controls:PivotItem>
  <controls:PivotItem>
    ...
  </controls:PivotItem>
  <controls:PivotItem>
    ...
  </controls:PivotItem>

</controls:Pivot>

需要注意的是 Pivot 頂部有一部分空白，盡管你并沒有為該控件定義頭。

PivotLocationView 用戶控件使用簡單的視圖模式，每個展示視圖有一個 model-items 項。當一個視圖關聯上一個 Pivot 控件，它會為每個 Pivot Item 創建一個子視圖模型，然后處理 SelectionChanged 事件用來保存選中的狀態：

public class PivotLocationViewModel
{
  private Pivot _pivot;

  public PivotLocationViewModel()
  {
  }

  public PivotLocationViewModel(Pivot pivot)
  {
    PivotItems = new PivotItemViewModelCollection();
    SetPivot(pivot);
  }

  /// <summary>
  /// Gets or sets the collection of child view-models
  /// </summary>
  public PivotItemViewModelCollection PivotItems { get; set; }

  private void SetPivot(Pivot pivot)
  {
    _pivot = pivot;

    // handle selection changed
    pivot.SelectionChanged += Pivot_SelectionChanged;

    // create a view model for each pivot item.
    for(int i=0;i<pivot.Items.Count;i++)
    {
      PivotItems.Add(new PivotItemViewModel());
    }

    // set the initial selection
    PivotItems[_pivot.SelectedIndex].IsSelected = true;
  }

  /// <summary>

  /// Handle selection changes to update the view model
  /// </summary>
  private void  Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
  {
      var selectedModel = PivotItems.SingleOrDefault(p => p.IsSelected);
    if (selectedModel != null)
      selectedModel.IsSelected = false;

    PivotItems[_pivot.SelectedIndex].IsSelected = true;
  }
}

每個 Pivot Item 關聯的視圖模型實現了 INotifyPropertyChanged 接口，包含一個 IsSelected 屬性用來反映 Pivot 的選擇狀態，同時還包含一個 Color 屬性可以設定每個視圖的顏色：

/// <summary>
/// A view model for each 'pip'
/// </summary>

public class PivotItemViewModel : INotifyPropertyChanged
{
  // ... INotifyPropertyChanged implementation

  private bool _isSelected;

  public bool IsSelected
  {
    get { return _isSelected; }
    set
    {
      if (_isSelected == value)
        return;

      _isSelected = value;
      OnPropertyChanged("IsSelected");
      Color = IsSelected ? Colors.Black : Colors.White;
    }
  }

  private Color _color;

  public Color Color
  {
    get { return _color; }
    set
    {
      _color = value;
      OnPropertyChanged("Color");
    }
  }
}

XAML 定義非常簡單，為每個 pip 設定一個 ItemsControl：

<UserControl ...
    d:DataContext="{d:DesignData Source=PivotLocationViewModel.xml}">

  <Grid x:Name="LayoutRoot">

    <ItemsControl ItemsSource="{Binding PivotItems}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>

      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Ellipse Width="12" Height="12" Margin="15,0,15,0"

                   Stroke="Black"
                   StrokeThickness="0.5">
            <Ellipse.Fill>
              <SolidColorBrush Color="{Binding Color}"/>
            </Ellipse.Fill>

          </Ellipse>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Grid>
</UserControl>

注意使用設計時數據，下面文件定義一個視圖模型實例：

<PivotLocationViewModel xmlns="clr-namespace:SlideView">
  <PivotLocationViewModel.PivotItems>
    <PivotItemViewModelCollection>
      <PivotItemViewModel IsSelected="False" Color="Red"/>

      <PivotItemViewModel IsSelected="True"  Color="Green"/>
      <PivotItemViewModel IsSelected="False"  Color="Red"/>
      <PivotItemViewModel IsSelected="False"  Color="Red"/>

    </PivotItemViewModelCollection>
  </PivotLocationViewModel.PivotItems>
</PivotLocationViewModel>

設計器：

完，你可以下載完整的源碼：SlideView.zip

本文翻譯自：http://www.codeproject.com/Articles/297177/A-Windows-Phone-7-Slide-View-with-Page-Pips