Páginas dinámicas con control de pivote.

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

Pregunta

Siendo nuevo en el ámbito de desarrollo de Windows 7/8 ... Estoy disfrutando de trabajar con el teléfono de Windows enormemente ... Sin embargo, ha habido una curva de aprendizaje y mucho para conocer.

Con Dicho Dicho esto, lo que estoy tratando de hacer es crear una página que está unida dinámicamente a una estructura de datos que mostrará N número de páginas de pivote, y cada página de pivote tendrá diferentes XAML para mostrar el contenido.

Miré por encima del artículo del proyecto de código ( http://www.codeproject.com/articles/113152/applying-data-templates-dynamally-by-type-in-wp7 ) y utiliza un cuadro de lista para controlar la pantalla ... pero Lo que estoy interesado es hacer lo mismo, pero con una página de pivote.

Aprendo mejor con el ejemplo ... Aquí están las clases para vincular los datos a los controles, que me gustaría usar ... 

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

No sé si sería mejor publicar todo el código aquí ... o simplemente para que todos miren el artículo sobre el proyecto de código, publicaré el código que modificé del artículo. . Con la esperanza de que alguien pueda ayudarme a resolver esto:

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>

Aquí está la clase DataTemplatesElector 

public static class DataTemplateSelector
{

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

Aquí está el control de contenido dinámico: Clase pública DynamicContentControl: ContentControl { Anulación protegida Void OncontentChanged (Objeto OldContent, Object NewContent) { base.OncontentChanged (OldContent, NewContent); esto.contenttemplate= msator.model.datatemplateselector.gettemplate (NewContent como ViewModelBase); }

}

Aquí está la primera vista XAML: 

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

(la segunda vista XAML puede ser la primera vista, simplemente cambie el color)

Aquí está la clase de FirstViewModel (del artículo) 

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

}

Aquí está la clase de modelo seleccionable 

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

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

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

Aquí está la clase principal Modelo Clase: 

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

¡Gracias de nuevo por ayudar!

¿Fue útil?

Solución

Como dices que todavía estás aprendiendo, déjame explicar por qué tener n Número de elementos pivotes es una mala idea:

  1. Es probable que se encuentre con problemas de rendimiento debido a la cantidad de contenido en una sola página. Con una lista los artículos pueden ser virtualizados. El control de pivote no admite la virtualización de pivotitems agregados dinámicamente.

  2. Es difícil para las personas navegar a un elemento deseado cuando hay muchos pivotitemas, ya que no hay una manera de llegar rápidamente a la que se busca. Digamos que tenías 30 artículos en el pivote, pero quería llegar al 15. Eso requeriría un montón de deslizamiento y si lo hace rápidamente, sería fácil pasar más allá de la que se buscó.

    3. El control de pivote está destinado a ser utilizado para uno de dos propósitos:

    1. para mostrar diferentes vistas de un conjunto de datos. I.E. La aplicación de correo electrónico muestra diferentes vistas de un buzón en cada pivotitem, filtrado para "todos", "ileso", "marcado" y "urgente".

    2. para mostrar diferentes piezas de datos relacionados. I.E. Cuando vea un contacto individual / persona que vea diferentes acciones e información relacionadas agrupadas en los diferentes pivotitems: "Perfiles", "Novedades", "Fotos" y "Historia".

      3. No es la intención de que el control de pivote se utilice como un contenedor para grandes cantidades de contenido, como n colecciones de listas de plantillas.
      Se sugiere que el número máximo de elementos en un pivote debe ser 7 para evitar problemas con el rendimiento y la facilidad de uso.

      En general, no usar el control de pivote en una de las formas en que se destinó puede causar problemas de rendimiento para usted como un desarrollador y problemas de usabilidad para las personas que utilizan la aplicación.
      Ambos de los cuales son escenarios a evitar.

      Lo siento, no es una respuesta directa a su pregunta, pero con suerte, le ayude a desarrollar una mejor aplicación (o aplicaciones). ;)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top