Windows Phone 7 中幻灯片视图的翻页效果 (Pivot)
openkk
12年前
<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>