使用Pivot控件的动态页面

时间:2014-01-08 16:26:54

标签: c# windows-phone-7 windows-phone-8

成为Windows 7/8手机开发领域的新手...我非常喜欢使用Windows手机......但是有一个学习曲线和很多东西需要了解。

话虽如此,我要做的是创建一个动态绑定到数据结构的页面,该数据结构将显示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; }
  }

我不知道在这里发布所有代码会不会更好......或者只是让大家看看Code项目的文章,我将发布我从文章中修改过的代码。希望有人可以帮我解决这个问题:

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     {         protected override void OnContentChanged(object oldContent,object newContent)         {             base.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");
            }
        }
    }
}

再次感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

正如你所说,你还在学习,让我解释为什么有多个Pivot项目是个坏主意:

  1. 由于单个页面上的内容量很多,您可能会遇到性能问题。使用列表可以虚拟化项目。 Pivot控件不支持动态添加的PivotItems的虚拟化。

  2. 当有很多PivotItem时,人们很难导航到所需的项目,因为没有办法快速找到想要的那个。假设您在枢轴中有30个项目但想要到达第15个项目。这需要大量的刷卡,如果快速完成,很容易超过想要的那个。

  3. Pivot Control旨在用于以下两个目的之一:

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

    2. 显示不同的相关数据。即,当查看单个联系人/人时,您会看到不同的相关操作和信息分组到不同的数据透视表中:“个人资料”,“新内容”,“照片”和“历史记录”。

    3. 不应将Pivot控件用作大量内容的容器,例如n个模板列表集合。
      建议数据透视表中的最大项目数应为7,以避免性能和可用性问题。

      总而言之,不以其中一种方式使用Pivot控件可能会导致作为开发人员的性能问题以及使用该应用程序的人员的可用性问题。
      这两个都是要避免的场景。

      很抱歉,这不是您问题的直接答案,但希望它可以帮助您开发更好的应用程序(或应用程序)。 ;)