Windows Phone 7 中幻灯片视图的翻页效果 (Pivot)

     <p>在 iOS 中有一个 <a href="/misc/goto?guid=4959500065772903407" rel="nofollow"><code>UIPageControl</code></a> 用来进行界面的翻页处理，而 Windows Phone 7 有一个 Pivot 控件可用来对内容进行分页浏览，Pivot 控件要用在界面上具有相同的逻辑标题，例如将文章分开多页显示，如下图显示：</p>    <p><img title="Windows Phone 7 中幻灯片视图的翻页效果 (Pivot)" border="0" alt="Windows Phone 7 中幻灯片视图的翻页效果 (Pivot)" src="https://simg.open-open.com/show/89a21e9ffa8334922c2b0da5a928fbaf.png" width="630" height="222" /></p>    <p>该控件显示在 XAML 中定义的当前页，并通过一个 ElementName 的绑定来定义关联的其他内容。</p>    <pre class="brush:xml; toolbar: true; auto-links: false;"><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></pre>    <p></p>    <p>需要注意的是 Pivot 顶部有一部分空白，尽管你并没有为该控件定义头。</p>    <p>PivotLocationView 用户控件使用简单的视图模式，每个展示视图有一个 model-items 项。当一个视图关联上一个 Pivot 控件，它会为每个 Pivot Item 创建一个子视图模型，然后处理 SelectionChanged 事件用来保存选中的状态：</p>    <pre class="brush:csharp; toolbar: true; auto-links: false;">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;   } }</pre>    <p>每个 Pivot Item 关联的视图模型实现了 INotifyPropertyChanged 接口，包含一个 IsSelected 属性用来反映 Pivot 的选择状态，同时还包含一个 Color 属性可以设定每个视图的颜色：</p>    <pre class="brush:csharp; toolbar: true; auto-links: false;">/// <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");     }   } }</pre>    <p>XAML 定义非常简单，为每个 pip 设定一个 ItemsControl：</p>    <pre class="brush:xml; toolbar: true; auto-links: false;"><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></pre>    <p>注意使用设计时数据，下面文件定义一个视图模型实例：</p>    <pre class="brush:xml; toolbar: true; auto-links: false;"><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></pre>    <p></p>    <p>设计器：</p>    <p><img title="qw.jpg" border="0" alt="qw.jpg" src="https://simg.open-open.com/show/6343863efa85e47cc51f4ca850077e58.jpg" width="550" height="365" /></p>    <p>完，你可以下载完整的源码：<a href="/misc/goto?guid=4959500065861002017" rel="nofollow">SlideView.zip</a></p>    <p>本文翻译自：<a href="/misc/goto?guid=4959500065958725128" rel="nofollow" target="_blank">http://www.codeproject.com/Articles/297177/A-Windows-Phone-7-Slide-View-with-Page-Pips</a></p>    <p></p>    <p></p>