Databases
StackOverflow2013
Postsdbo
POChanging gridview's item wrapping order in XAML
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging gridview's item wrapping order in XAML
    primarykey
    data
    text
    <p>I've Windows 8 Metro app that has gridview that has items &amp; groups within.</p> <p>I want my gridview's wrap order to be left to right instead of top-down as seen in the screenshot.</p> <p><img src="https://i.stack.imgur.com/v45lG.png" alt="enter image description here"></p> <p>Is it possible and how?</p> <p><strong>Update:</strong> Here's the related code I'm using;</p> <p><em>Gridview xaml</em></p> <pre><code> &lt;!-- Horizontal scrolling grid used in most view states --&gt; &lt;local:MyGridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.RowSpan="2" Padding="116,137,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource VariableSizedTileItem}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"&gt; &lt;GridView.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;VirtualizingStackPanel Orientation="Horizontal"/&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GridView.ItemsPanel&gt; &lt;GridView.GroupStyle&gt; &lt;GroupStyle&gt; &lt;GroupStyle.HeaderTemplate&gt; &lt;DataTemplate&gt; &lt;Grid Margin="1,0,0,6"&gt; &lt;Button AutomationProperties.Name="Group Title" Click="Header_Click" Style="{StaticResource TextPrimaryButtonStyle}" &gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /&gt; &lt;TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/&gt; &lt;/StackPanel&gt; &lt;/Button&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/GroupStyle.HeaderTemplate&gt; &lt;GroupStyle.Panel&gt; &lt;ItemsPanelTemplate&gt; &lt;VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GroupStyle.Panel&gt; &lt;/GroupStyle&gt; &lt;/GridView.GroupStyle&gt; &lt;/local:MyGridView&gt; &lt;DataTemplate x:Key="VariableSizedTileItem"&gt; &lt;Grid&gt; &lt;Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"&gt; &lt;Image Source="{Binding Image}" Stretch="UniformToFill"/&gt; &lt;/Border&gt; &lt;StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"&gt; &lt;TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="20" Margin="15,0,15,0"/&gt; &lt;TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; </code></pre> <p><em>Custom variable sized gridview</em></p> <pre><code>public class MyGridView : GridView { private List&lt;Size&gt; _sequence; public MyGridView() { _sequence = new List&lt;Size&gt; { LayoutSizes.PrimaryItem, LayoutSizes.SecondarySmallItem, LayoutSizes.SecondarySmallItem, LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem, // 5 LayoutSizes.OtherSmallItem, LayoutSizes.SecondaryTallItem, // 7 LayoutSizes.OtherSmallItem, LayoutSizes.SecondarySmallItem, // 9 LayoutSizes.OtherSmallItem, LayoutSizes.SecondarySmallItem, // 11 LayoutSizes.SecondarySmallItem, LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem }; } protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { var dataItem = item as SyndicatedDataItem; int index = -1; if(dataItem != null) { index = dataItem.Group.Items.IndexOf(dataItem); } int colVal; int rowVal; if (index &gt;= 0 &amp;&amp; index &lt; _sequence.Count) { colVal = (int)_sequence[index].Width; rowVal = (int)_sequence[index].Height; } else { colVal = (int)LayoutSizes.OtherSmallItem.Width; rowVal = (int)LayoutSizes.OtherSmallItem.Height; } VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal); VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal); base.PrepareContainerForItemOverride(element, item); } /* 14 items style */ public static class LayoutSizes { public static Size PrimaryItem = new Size(6, 2); public static Size SecondarySmallItem = new Size(3, 1); public static Size SecondaryTallItem = new Size(2, 2); public static Size OtherSmallItem = new Size(2, 1); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHuseyinUslu
    1. USHuseyinUslu
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POChanging gridview's item wrapping order in XAML
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POChanging gridview's item wrapping order in XAML
      1. USetragu
      1. VTFavorite
    3. VO
      singulars
      1. POChanging gridview's item wrapping order in XAML
      1. USSujith
      1. VTFavorite
    1. COWhat code do you have already?
      singulars
      1. POChanging gridview's item wrapping order in XAML
      1. USChrisF
    2. COadded the related code.
      singulars
      1. POChanging gridview's item wrapping order in XAML
      1. USHuseyinUslu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload