使用Pivot控件的动态页面

Question

作为Windows 7/8手机开发领域的新手......我非常喜欢与windows phone一起工作......但是，学习曲线已经有了很大的发展。

就这样说，我正在做的是创建一个页面，它将动态绑定到一个数据结构，该数据结构将显示n个数据透视页面，并且每个数据透视页面将具有不同的XAML来显示内容。

我查看了这个代码项目文章（http://www.codeproject.com/Articles/113152/Applying-Data-Templates-Dynamically-by-Type-in-WP7），它使用一个列表框来控制显示......但我感兴趣的是做同样的事情，但有一个数据透视页。

我学习最好的例子......这里是类的数据绑定控件，我想用...

public class ParkingLot : List<Car> 
    { 
    public ParkingLot() { } 

    // this will be the pivot page title 
    public string Lot { get; set; } 

    // the list of cars will be displayed on the page 
    } 
    public class Car 
    { 
    public Car() { } 

    // this will be the data that is displayed in the pivot page for each car 
    public string Width { get; set; } 
    public string Length { get; set; } 
    } 


    public class Library : List<Book> 
    { 
    public Library() { } 

    // this will be the pivot page title 
    public string Location { get; set; } 

    // the list of books will be displayed on the page 
    } 
    public class Book 
    { 
    public Book() { } 

    // this is the data that will be displayed for each book 
    public string ISBN { get; set; } 
    public string Title { get; set; } 
    } 

我不知道这是否会更好在这里发布所有的代码......或者只是为了让大家看看代码项目的文章，我会发布我从文章中修改的代码......希望有人能帮我弄清楚这一点：

XAML：

<phone:PhoneApplicationPage x:Class="dynDataTemplateTest.MainPage" 
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
         xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
         xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:loc="clr-namespace:dynDataTemplateTest.View" 

         xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 

         FontFamily="{StaticResource PhoneFontFamilyNormal}" 
         FontSize="{StaticResource PhoneFontSizeNormal}" 
         Foreground="{StaticResource PhoneForegroundBrush}" 
         SupportedOrientations="Portrait" 
         Orientation="Portrait" 
         mc:Ignorable="d" 
         d:DesignWidth="480" 
         d:DesignHeight="768" 
         shell:SystemTray.IsVisible="True" 
         DataContext="{Binding Main, Source={StaticResource Locator}}"> 

<!--LayoutRoot contains the root grid where all other page content is placed--> 
<Grid x:Name="LayoutRoot" 
     Background="Transparent"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <!--TitlePanel contains the name of the application and page title--> 
    <StackPanel x:Name="TitlePanel" 
       Grid.Row="0" 
       Margin="24,24,0,12"> 
     <TextBlock x:Name="ApplicationTitle" 
        Text="{Binding ApplicationTitle}" 
        Style="{StaticResource PhoneTextNormalStyle}" /> 
     <TextBlock x:Name="PageTitle" 
        Text="{Binding PageName}" 
        Margin="-3,-8,0,0" 
        Style="{StaticResource PhoneTextTitle1Style}" /> 
    </StackPanel> 

    <!--ContentPanel - place additional content here--> 
    <Grid x:Name="ContentGrid" 
      Grid.Row="1"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <loc:DynamicContentControl Content="{Binding SelectedItem}" 
          HorizontalContentAlignment="Stretch" 
          VerticalContentAlignment="Stretch" /> 

     <controls:Pivot ItemsSource="{Binding Path=Items}" SelectedItem="{Binding Path=SelectedItem}" > 

      <controls:Pivot.HeaderTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Path=DisplayName}" FontSize="30" FontWeight="Bold" Margin="5"/> 
       </DataTemplate> 
      </controls:Pivot.HeaderTemplate> 


      <controls:Pivot.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"></StackPanel> 
       </ItemsPanelTemplate> 
      </controls:Pivot.ItemsPanel> 

     </controls:Pivot> 

    </Grid> 
</Grid> 

这里是DataTemplateSelector类

public static class DataTemplateSelector 
{ 

    public static DataTemplate GetTemplate(ViewModelBase param) 
    { 
     Type t = param.GetType(); 
     return App.Current.Resources[t.Name] as DataTemplate; 
    } 
} 

这里是动态内容控制： 公共类DynamicContentControl：ContentControl中 { 保护覆盖无效OnContentChanged（对象oldContent，对象newContent） { 基。 OnContentChanged（oldContent，newContent）; this.ContentTemplate = mSator.Model.DataTemplateSelector.GetTemplate（newContent as ViewModelBase）; }
}

这里是第一视图XAML：

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> 
    <TextBlock Margin="20" Foreground="Green" FontSize="32" 
      FontWeight="Bold" Text="{Binding Path=FirstProperty}" 
      ></TextBlock> 
</Grid> 

（第二视图XAML可以在第一视图中，只是改变颜色）

这里是FirstViewModel类（来自文章）

public class FirstViewModel : SelectableViewModel 
{ 
    public FirstViewModel() 
    { 
     DisplayName = "First"; 
     FirstProperty = "this is the first property"; 
    } 


    private string firstProp; 
    public string FirstProperty 
    { 
     get { return firstProp; } 
     set 
     { 
      if (firstProp != value) 
      { 
       firstProp = value; 
       RaisePropertyChanged("FirstProperty"); 
      } 
     } 
    } 

} 

这里是SelectableView Model类

public class SelectableViewModel : ViewModelBase 
{ 
    public SelectableViewModel() 
    { 
    } 

    string dispName; 
    public string DisplayName 
    { 
     get { return dispName; } 

     set 
     { 
      if (dispName != value) 
      { 
       dispName = value; 
       RaisePropertyChanged("DisplayName"); 
      } 
     } 
    } 
} 

这里是主视图模型类：

public class MainViewModel : ViewModelBase 
{ 
    public string ApplicationTitle 
    { 
     get 
     { 
      return "Dynamic Data Templates"; 
     } 
    } 

    public string PageName 
    { 
     get 
     { 
      return "Main page"; 
     } 
    } 

    private List<SelectableViewModel> viewModels; 
    public MainViewModel() 
    { 
     viewModels = new List<SelectableViewModel>(); 

     viewModels.Add(new FirstViewModel()); 
     viewModels.Add(new SecondViewModel()); 

     SelectedItem = viewModels[0]; 
    } 

    public List<SelectableViewModel> Items 
    { 
     get 
     { 
      return viewModels; 
     } 
    } 

    SelectableViewModel selItem; 
    public SelectableViewModel SelectedItem 
    { 
     get { return selItem; } 
     set 
     { 
      if (selItem != value) 
      { 
       selItem = value; 
       RaisePropertyChanged("SelectedItem"); 
      } 
     } 
    } 
} 

再次感谢您的帮助！

Answer 1

正如你说你还在学习，让我解释为什么枢纽项目具有n个号码是一个坏主意：

1. 您可能会遇到由于内容上的金额性能问题单页。通过列表可以虚拟化项目。 Pivot控件不支持动态添加的PivotItems的虚拟化。

2. 当有许多PivotItems时，人们很难导航到所需的项目，因为没有办法快速找到想要的项目。假设你有30个项目在关键点，但想要到达第15个项目。这将需要大量的刷卡，如果快速进行，很容易超过想要的。

摆动控制旨在被用于两个目的之一：

1. 要显示的一组数据的不同视图。即电子邮件应用程序显示每个数据透视项中的邮箱的不同视图，筛选为“全部”，“未读”，“标记”和“紧急”。

2. 为了显示不同部分的相关数据。即查看个人联系人/个人时，您会看到分组到不同PivotItems中的不同相关操作和信息：“个人资料”，“新增功能”，“照片”和“历史记录”。

这并不意味着Pivot控件应该用作大量内容的容器，例如n个模板列表的集合。
为了避免性能和可用性方面的问题，建议一个数据透视表中的项目的最大数量应该是7。

总而言之，不使用在它的用意可能会导致性能问题，你作为使用应用程序的人的开发商和可用性问题的途径之一Pivot控件。
这两个都是需要避免的场景。

对不起，这不是直接回答你的问题，但希望它会帮助你开发出更好的应用程序（或应用）。 ;）