2013-03-15 11 views
10

Ho creato una semplice applicazione di griglia C# per Windows 8.Pagine di dettaglio personalizzate nell'applicazione di griglia di Windows 8

Se si ha familiarità con questo layout, v'è una breve spiegazione qui:

Link

Quello che vorrei avere è semplice - un po 'personalizzato ItemDetailPages. Mi piacerebbe essere in grado di fare clic su alcuni articoli su GroupDetailPage e GroupedItemsPage e passare a un file personalizzato .xaml, uno in cui è possibile includere più di un'immagine.

Sono sicuro che c'è un modo semplice per farlo che ho perso, e sono anche sicuro che questa informazione sarà utile per molte persone, quindi offrirò una taglia su questo domanda.

ho lottato con il fare questo finora:

Ho creato un CustomDataItem nella classe SampleDataSource.cs:

/// <summary> 
    /// Generic item data model. 
    /// </summary> 
    public class CustomDataItem : SampleDataCommon 
    { 
     public CustomDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group) 
      : base(uniqueId, title, subtitle, imagePath, description) 
     { 
      this._content = content; 
      this._group = group; 
     } 

     private string _content = string.Empty; 
     public string Content 
     { 
      get { return this._content; } 
      set { this.SetProperty(ref this._content, value); } 
     } 

     private SampleDataGroup _group; 
     public SampleDataGroup Group 
     { 
      get { return this._group; } 
      set { this.SetProperty(ref this._group, value); } 
     } 
    } 

Tuttavia, ovviamente, aggiungendo al ObservableCollection

private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>(); 
public ObservableCollection<SampleDataGroup> AllGroups 
{ 
    get { return this._allGroups; } 
} 

è impossibile con un tipo di dati diverso. Quindi cosa posso fare in questo caso?

Grazie mille.

+0

Sono un po 'confuso su come esattamente quello che stai chiedendo qui - stai chiedendo come sarebbe la pagina xaml personalizzata per più immagini, o come navigare verso uno quando un elemento del gruppo è selezionato? –

risposta

3

Ho una semplice applicazione di rete; come faccio a rendere possibile che uno degli elementi nella pagina della voce di gruppo rimandi a una pagina dei dettagli dell'oggetto personalizzata?

Ok, lascia prendere l'app che viene generata quando si utilizza il modello "Grid App" da Visual Studio.

La classe di dati per gli elementi nella pagina degli articoli gruppo è la classe SampleDataItem. Quello che puoi fare è aggiungere qualche tipo di campo dati (bool, int o altro) che indica come gestire la navigazione. In questo esempio, lo stiamo mantenendo semplice, quindi aggiungiamo un bool per indicare se la navigazione è personalizzata o meno.

public class SampleDataItem : SampleDataCommon 
{ 
    // add flag as last param 
    public SampleDataItem(String uniqueId, String title, String subtitle, 
     String imagePath, String description, String content, SampleDataGroup group, 
     bool isCustomNav = false) 
    : base(uniqueId, title, subtitle, imagePath, description) 
    { 
     this._content = content; 
     this._group = group; 
     this.IsCustomNav = isCustomNav; 
    } 

    // to keep it simple this doesn't handle INotifyPropertyChange, 
    // as does the rest of the properties in this class. 
    public bool IsCustomNav { get; set; } 

    ... 
} 

Così, quando si aggiunge un nuovo oggetto SampleDataItem da visualizzare, è sufficiente impostare il campo isCustomNav nel costruttore.

Ora tutto quello che dobbiamo fare è cambiare il gestore di eventi click già esistente nella griglia nella pagina dell'inserzione raggruppato (GroupedItemsPage.xaml.cs):

void ItemView_ItemClick(object sender, ItemClickEventArgs e) 
{ 
    // Navigate to the appropriate destination page, configuring the new page 
    // by passing required information as a navigation parameter 
    var item = (SampleDataItem)e.ClickedItem; 
    var itemId = item.UniqueId; 

    if (item.IsCustomNav == false) 
    { 
     // default 
     this.Frame.Navigate(typeof(ItemDetailPage), itemId); 
    } 
    else 
    { 
     // custom page 
     this.Frame.Navigate(typeof(ItemDetailPage2), itemId); 
    } 
} 

Tutto quello che stiamo facendo al di sopra sta ottenendo il selezionato elemento e quindi testare il flag di navigazione che abbiamo aggiunto in precedenza. Sulla base di questo, passiamo allo ItemDetailPage o uno nuovo originale chiamato ItemDetailPage2. Come accennato in precedenza, il flag di navigazione non deve essere un bool. Può essere un int o enum o qualche altro tipo che ci dice dove navigare.

Si noti che se si desidera un comportamento simile su GroupDetailsPage, è sufficiente aggiornare il gestore di eventi click allo stesso modo.

Spero che questo aiuti.

+0

Funziona perfettamente :) –

+0

@chue x: Ciao, sto avendo una specie di problema simile. Voglio aggiungere elementi di diverso tipo al gruppo. Per es. Un gruppo mostra KPI, un gruppo mostra gli indicatori ma nel campione GridApp il SampleDataSource.cs ha una voce di un solo tipo (SampleDataItem). Come procedo? – Vanya

+0

@Vanya - Non ho fatto quello che stai chiedendo. Tuttavia, dovresti prendere in considerazione l'utilizzo di un elenco che memorizza una classe base comune. Quindi, in fase di esecuzione, utilizzare un selettore di modelli per visualizzare i dati in base al tipo di classe. Potresti ottenere una risposta migliore se fai una nuova domanda e fornisci ulteriori dettagli: http://stackoverflow.com/questions/ask –

3

Sì, dovrebbe essere possibile creare un tipo di dati personalizzato o diverso. Se crei un'app Win8 utilizzando il modello di griglia, vedi che il modello fa tre cose per te: 1) Crea tre tipi, SampleDataCommon, che è la base, SampleDataItem, che implementa SampleDataCommon e aggiunge due nuove proprietà: contenuto e group e SampleDataGroup che implementa anche SampleDataCommon, aggiunge un metodo, ItemsCollectionChanged e aggiunge due proprietà, Items e TopItems. 2) Crea una classe chiamata SampleDataSource, in cui viene creata una raccolta di SampleDataGroup e denominata AllGroups: ObservableCollection AllGroups. 3) Associa oggetti e tutti i gruppi di SampleDataSource agli oggetti nelle pagine XMAL.

Nel tuo caso, si utilizza la stessa struttura dati. In altre parole, creerai un gruppo con elementi, ecc.

Problemi correlati