Dimensioni oggetto diverse in una griglia raggruppataView

Question

Ho creato una GridView raggruppata con un modello di elemento e un modello di intestazione. Funziona bene, ma poi vorrei che il primo articolo della mia lista avesse un modello diverso (per essere più grande). Come l'applicazione francese "LeMonde" per esempio. Non ho idea di come potrei definire il modello per ottenerlo.

Ecco il mio codice XAML corrente

<Page.Resources> 
<CollectionViewSource x:Name="cvs1" IsSourceGrouped="True" /> 
</Page.Resources> 

<Grid Background="White"> 

    <GridView x:Name="PicturesGridView" SelectionMode="None" 
ItemsSource="{Binding Source={StaticResource cvs1}}"IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel x:Name="RectanglesStackPanel" Margin="8" Orientation="Vertical" Width="242"> 

        <Image Source="{Binding imageUrl}" Height="180" Width="225" Stretch="UniformToFill" /> 

        <Border Background="Gray" Opacity="1" Width="225" Height="115"> 
         <TextBlock Text="{Binding title}" 
      Foreground="White" TextWrapping="Wrap" Width="215" FontSize="18" /> 
        </Border> 
       </StackPanel> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button>  
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid Orientation="Vertical" /> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 


</Grid> 

Ho appena legano mia lista di elemento in C# come questo:

this.cvs1.Source = ListOfArticle; 

Grazie in anticipo :)

---

Grazie tu Ivan. Mi aiuta molto. Tuttavia, il codice fornito nell'esempio non sembra aggiornato per Windows 8. Avete qualche idea su come possiamo accedere a un modello definito nelle risorse di una pagina. Il metodo FindRessources non esiste più. Ho provato con questo codice, invece, ma non ha avuto successo:

public class AuctionItemDataTemplateSelector : DataTemplateSelector 
{ 
    protected override DataTemplate SelectTemplateCore(object item, 
                DependencyObject container) 
    { 
     FrameworkElement element = container as FrameworkElement; 

     if (element != null && item != null && item is Article) 
     { 
      Article auctionItem = item as Article; 

      DataTemplate mySmallTemplate = element.FindName("SmallTemplate") as DataTemplate; 

      switch (auctionItem.isFirstItem) 
      { 
       case true: 
        return 
        element.FindName("BigTemplate") as DataTemplate; 

       case false: 
        return 
        element.FindName("SmallTemplate") as DataTemplate; 
      } 
     } 

     return null; 
    } 
} 

'

Answer 1

ho seguito la via della creazione di un DataTemplateSelector personalizzato con tutti i modelli necessari come proprietà.

namespace Helper 
{ 
    public class CustomSampleDataTemplateSelector : DataTemplateSelector 
    { 
     public DataTemplate FirstDataTemplate { get; set; } 

     public DataTemplate SecondDataTemplate { get; set; } 

     protected override DataTemplate SelectTemplateCore(object item, 
        DependencyObject container) 
     { 
      if (item is FirstItemType) 
       return FirstDataTemplate ; 
      if (item is SecondItemType) 
       return SecondDataTemplate; 
      else 
       return FirstDataTemplate ; 
     } 
    } 
} 

Ora è possibile utilizzare direttamente in XAML come questo:

risorsa Declare:

<UserControl.Resources> 
    <DataTemplate x:Key="myTemplate1"> 
     <Border Background="White"> 
      <TextBlock Text="{Binding Name}" 
         FontSize="40" 
         Foreground="Black" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" /> 
     </Border> 
    </DataTemplate> 
    <DataTemplate x:Key="myTemplate2"> 
     <Border Background="Orange"> 
      <Grid> 
       <Image Source="{Binding Image}"></Image> 
       <TextBlock Text="{Binding ShopName}" 
          FontSize="64" 
          Foreground="LightBlue" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" /> 
      </Grid> 
     </Border> 
    </DataTemplate> 
    <Common:CustomSampleDataTemplateSelector x:Key="mySelector" 
            FirstDataTemplate="{StaticResource myTemplate1}" 
            SecondDataTemplate="{StaticResource myTemplate2}"> 
    </Common:CustomSampleDataTemplateSelector > 
</UserControl.Resources> 

Utilizzare lo

<GridView x:Name="PicturesGridView" ItemTemplateSelector="{StaticResource mySelector}"> 

Questo è tutto

Answer 2

Invece di utilizzare un unico ItemTemplate per tutti gli elementi nella GridView è necessario definire ItemTemplate diverso per primo elemento e poi per tutti gli altri.

Per fare ciò è necessario definire ItemTemplate remoto e utilizzare ItemTemplateSelector per determinare quale stile utilizzare.

Qui trovi maggiori informazioni: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx

Answer 3

Grazie. In realtà funziona bene perché rende il primo oggetto con un modello diverso rispetto all'altro. Comunque non era quello che volevo scusare è colpa mia non ero chiaro. Perché con la tua tecnica la dimensione dell'oggetto nella vista griglia ha sempre le stesse dimensioni. Diciamo che scelgo myTemplate1 per avere una griglia con una larghezza di 400 e myTemplate2 una griglia con una larghezza di 200. Quindi se il mio primo elemento segue myTemplate1, tutto l'elemento della vista griglia avrà una dimensione di 400 anche se l'immagine all'interno è solo 200.

ho voluto ottenere un risultato come in questo articolo: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

Così ho trovato quello che mi serviva in realtà è VariableSizedWrapGrid e reimplementare una versione di un gridView.I seguito questo ottimo articolo: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/966aa897-1413-46f0-bef7-663de36f9423.

Tuttavia contrassegnerò la risposta come corretta perché risponde alla mia domanda iniziale: consente di selezionare diverse dimensioni dell'elemento in una vista griglia di gruppo.

Grazie mille per il tuo tempo mi ha aiutato molto