Close

GridView – [Horizontal o Vertical]

<GridView />

El nuevo GridView   de windows 10 universal app tiene por defecto una distribución de los items horizontal.

Aquí les dejo un par de lineas de código para poner la distribución en horizontal o vertical

  • GridView Items Vertical.

 <GridView IsSwipeEnabled="False" SelectionMode="Single"  
           ItemTemplate="{StaticResource ItemBusLine}"
           ItemsSource="{Binding ListOfBusLine}">
      <GridView.ItemsPanel>
           <ItemsPanelTemplate>
               <WrapGrid Orientation="Vertical" />
            </ItemsPanelTemplate>
      </GridView.ItemsPanel>
 </GridView>

Ahora tenemos pequeño problema, no se puede hacer el scroll, vamos a solucionarlo con un par de atributos de GridView

<GridView IsSwipeEnabled="False" SelectionMode="Single"  
          ScrollViewer.HorizontalScrollMode="Auto" 
          ScrollViewer.VerticalScrollMode="Disabled"
           ItemTemplate="{StaticResource ItemBusLine}"
           ItemsSource="{Binding ListOfBusLine}">
      <GridView.ItemsPanel>
           <ItemsPanelTemplate>
               <WrapGrid Orientation="Vertical" />
            </ItemsPanelTemplate>
      </GridView.ItemsPanel>
 </GridView>
  • GridView Items Horizontal.

 <GridView IsSwipeEnabled="False" SelectionMode="Single"  
           ScrollViewer.HorizontalScrollMode="Disabled" 
          ScrollViewer.VerticalScrollMode="Auto"
           ItemTemplate="{StaticResource ItemBusLine}"
           ItemsSource="{Binding ListOfBusLine}">
      <GridView.ItemsPanel>
           <ItemsPanelTemplate>
               <WrapGrid Orientation="Horizontal" />
            </ItemsPanelTemplate>
      </GridView.ItemsPanel>
 </GridView>
  • WrapGrid

El atributo WrapGrid puede ayudarnos a definir también el número máximo de items por filas o columnas (dependerá siempre del tamaño del GridView).

<WrapGrid MaximumRowsOrColumns="10" Orientation="Horizontal" />

 

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2021 vladymix | WordPress Theme: Annina Free by CrestaProject.