Pages dynamiques utilisant le contrôle de pivot

StackOverflow https://stackoverflow.com//questions/21001163

Question

Être nouveau à l'arène de développement de téléphone Windows 7/8 ... J'apprécie de travailler avec le téléphone Windows énormément ... Cependant, il y a eu une courbe d'apprentissage et tellement à faire connaissance.

Avec cela dit, ce que j'essaie de faire est de créer une page qui est dynamiquement liée à une structure de données qui affichera N nombre de pages de pivotement, et chaque page de pivot aura différemment XAML pour afficher le contenu.

J'ai regardé cet article de projet ( http://www.codeproject.com/articles/113152/applying-Data-Templates-dynamiquement-by-type-in-wp7 ) et il utilise une zone de liste pour contrôler l'affichage ... mais Ce que je suis intéressé, c'est faire la même chose, mais avec une page pivot.

J'apprends mieux par exemple ... Voici les classes pour lier les données aux commandes que je voudrais utiliser ... 

  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; }
  }

Je ne sais pas si il serait préférable de poster tout le code ici ... ou de vous aider à tous regarder l'article sur le projet de code, je posterai le code que j'ai modifié de l'article .. . Dans l'espoir que quelqu'un puisse m'aider à comprendre cela:

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>

Voici la classe de dataMplateselector 

public static class DataTemplateSelector
{

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

Voici le contrôle de contenu dynamique: Classe publique DynamicContentControl: ContentControl { Protégé substituré Void OnContentChanged (Object OldContent, Objet NewContent) { base.onContentchangned (vieillissement, NewContent); ceci.contenttemplate= msator.model.dataTemplateselector.gettemplate (NewContent en tant que vueModelbase); }
}

Voici la première vue XAML: 

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

(la deuxième vue XAML peut être la première vue, changez simplement la couleur)

Voici la classe FirstViewModel (de l'article) 

    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");
            }
        }
    }

}

Voici la classe de modèle sélectionnableview 

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

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

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

Voici la classe de modèle principale de la vue: 

    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");
            }
        }
    }
}

Merci encore pour avoir aidé!

Était-ce utile?

La solution

Comme vous dites que vous apprenez toujours, laissez-moi vous expliquer pourquoi le nombre de notes de pivot est une mauvaise idée:

  1. Vous courrez probablement dans des problèmes de performances en raison de la quantité de contenu sur une seule page. Avec une liste, les articles peuvent être virtualisés. La commande de pivot ne prend pas en charge la virtualisation des pivotatems ajoutés dynamiquement.

  2. Il est difficile pour les gens de naviguer dans un article souhaité lorsqu'il y a beaucoup de pivotatems car il n'y a pas de moyen d'accéder rapidement à celui qui est recherché. Dites que vous aviez 30 articles dans le pivot, mais je voulais arriver au 15ème. Cela nécessiterait beaucoup de glisser et si le fait rapidement, il serait facile de passer devant celui qui était recherché.

    3. Le contrôle pivot est destiné à être utilisé pour l'une des deux fins:

    1. Pour montrer différentes vues d'un ensemble de données. I.E. L'application de messagerie affiche des vues différentes d'une boîte aux lettres dans chaque pivotatem, filtré pour "tous", "non lu", "marquage" et "urgent".

    2. montrer différentes pièces de données connexes. I.e. Lors de la visualisation d'un contact individuel / personne, vous voyez des actions et des informations différentes regroupées dans les différents pivotatems: "profils", "Quoi de neuf", "Photos" et "Histoire".

      3. Ce n'est pas l'intention que la commande de pivot soit utilisée comme conteneur pour de grandes quantités de contenu, telles que N collections de listes de modèles.
      Il est suggéré que le nombre maximum d'articles dans un pivot doit être 7 pour éviter les problèmes de performance et de convivialité.

      Dans l'ensemble, n'utilisez pas le contrôle de pivot de l'une des façons dont il était destiné peut entraîner des problèmes de performance pour vous en tant que problèmes de développeur et de convivialité pour les personnes utilisant l'application.
      Qui sont tous deux des scénarios à éviter.

      Désolé, ce n'est pas une réponse directe à votre question, mais j'espère que cela vous aidera à développer une meilleure application (ou des applications). ;)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top