Verschiedene Elementgröße in einer gruppierten Grid

Question

habe ich einen gruppierten Gridview mit einer Elementvorlage und Header-Template. Es funktioniert gut, aber dann würde ich den ersten Artikel auf meiner Liste wie eine andere Vorlage haben (größer sein). Wie zum Beispiel die französische Anwendung "LeMonde". Ich habe keine Ahnung, wie ich die Vorlage dafür definieren könnte.

Hier ist meine aktuellen XAML-Code

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

binde ich nur meine Liste der Artikel in C# wie folgt aus:

this.cvs1.Source = ListOfArticle; 

Vielen Dank im Voraus :)

---

Thank du Iwan. Es hilft mir sehr. Doch der Code in dem gegebenen Beispiel scheint nicht auf dem neuesten Stand für Windows 8. Haben Sie Ideen, wie wir eine Vorlage definiert in den Ressourcen einer Seite zugreifen können. Die Methode FindRessources existiert nicht mehr. Ich habe versucht, mit diesem Code statt, aber es war nicht erfolgreich:

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

folgte ich den Weg, um eine benutzerdefinierte Datatemplateselector mit allen benötigten Vorlagen als Eigenschaften zu schaffen.

Declare Ressource: es

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

Verwenden

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

dass alle

Answer 2

Statt eine einzelne ItemTemplate für alle Artikel im Gridview verwenden Sie unterschiedliche ItemTemplate für erstes Element zu definieren und dann für alle die Anderen.

Damit Sie müssen Remote ItemTemplate definiert tun und benutzen ItemTemplateSelector zu verwenden, welche Art zu bestimmen.

Hier finden Sie weitere Informationen: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx

Answer 3

danken Sie

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

Jetzt können Sie es direkt in XAML wie folgt verwenden. Es funktioniert tatsächlich gut, weil es das erste Element mit einer anderen Vorlage als die andere macht. Aber es war nicht das, was ich entschuldigen wollte, es ist meine Schuld, ich war nicht klar. Da die Objektgröße in der Rasteransicht mit Ihrer Technik hat immer die gleiche Größe. Sagen wir, ich wählen myTemplate1 ein Gitter mit einer Breite von 400 und myTemplate2 ein Gitter mit einer Breite von 200 Dann haben, wenn mein erstes Element myTemplate1 folgt, die alle das Element des Gitters wird mit einer Größe von 400, auch wenn das Bild haben innen ist nur 200

ich ein Ergebnis wie in diesem Artikel erreichen wollte: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

So fand ich, was ich brauchte eigentlich ist es VariableSizedWrapGrid und eine Version eines gridView.I diesen sehr guten Artikel Gefolgt neu zu implementieren: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/966aa897-1413-46f0-bef7-663de36f9423.

Allerdings werde ich Ihre Antwort als richtig markieren, weil sie meine erste Frage beantwortet: es erlaubt, verschiedene Artikelgröße in einer Gruppenrasteransicht auszuwählen.

Vielen Dank für Ihre Zeit viel es half mir