Tamaño de elemento diferente en una cuadrícula agrupadaVer

Question

Creé una GridView agrupada con una plantilla de elemento y una plantilla de encabezado. Funciona bien, pero me gustaría que el primer artículo de mi lista tenga una plantilla diferente (para ser más grande). Como la aplicación francesa "LeMonde", por ejemplo. No tengo idea de cómo podría definir la plantilla para lograr eso.

Aquí está mi actual código XAML

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

acabo ato mi lista de elemento en C# como esto:

this.cvs1.Source = ListOfArticle; 

gracias de antemano :)

---

Gracias tu Iván. Me ayuda mucho. Sin embargo, el código proporcionado en el ejemplo no parece estar actualizado para Windows 8. ¿Tiene alguna idea de cómo podemos acceder a una plantilla definida en los recursos de una página? El método FindRessources ya no existe. Probé con este código en su lugar, pero no fue exitosa:

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

he seguido el camino de la creación de un DataTemplateSelector personalizado con todas las plantillas necesarias como propiedades.

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

Ahora puede utilizar directamente en XAML como esto:

recursos declaran:

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

Utilícelo

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

Eso es todo

Answer 2

En lugar de utilizar un solo ItemTemplate para todos los elementos en el GridView tiene que definir diferentes ItemTemplate para la primera parte y luego para todos los demás.

Para hacer eso, tiene que definir ItemTemplate a distancia y usar ItemTemplateSelector para determinar qué estilo usar.

Aquí puede encontrar más información: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx

Answer 3

Gracias. De hecho, funciona bien porque hace que el primer elemento tenga una plantilla diferente a la otra. Sin embargo, no era lo que quería, lo siento, es mi culpa, no estaba claro. Porque con su técnica, el tamaño del elemento en la vista de cuadrícula siempre tiene el mismo tamaño. Digamos que elijo myTemplate1 para tener una cuadrícula con un ancho de 400 y myTemplate2 una cuadrícula con un ancho de 200. Entonces, si mi primer elemento sigue myTemplate1, todo el elemento de la vista de cuadrícula tendrá un tamaño de 400 incluso si la imagen en el interior es única 200.

que quería lograr un resultado como en este artículo: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

Así que me encontré lo que realmente se necesita es VariableSizedWrapGrid y volver a implementar una versión de un gridView.I seguido este artículo muy bueno: http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/966aa897-1413-46f0-bef7-663de36f9423.

Sin embargo, marcaré su respuesta como correcta porque responde a mi pregunta inicial: permite seleccionar un tamaño de elemento diferente en una vista de cuadrícula de grupo.

Muchas gracias por su tiempo me ha ayudado mucho