locked
What governs the 2x3 layout of items in the first page of the Split App Template? RRS feed

  • Question

  • I'm examining the details of a new app created from the Split App Template.

    The start page shows 2 rows of items in 3 columns and I want to know what governs this, how can I make it span 4 colums instead of just 3?

    I can see this:

            <GridView
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemsGridView"
                AutomationProperties.Name="Items"
                TabIndex="1"
                Grid.RowSpan="1"
                Padding="116,136,116,46"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                SelectionMode="None"
                IsSwipeEnabled="false"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="250" Height="250">
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                            <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                <TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                <TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

    But nothing jumps out at me, I tried varying Grid.RowSpan to "1" but when I do that no items at all get displayed, and that isn't making sense to me.

    Also what governs the ordering of the displayed items? I'd prefer to see the items listed 1,2,3 horizontally rather that 1 above 2 then 3 above 4, where is this defined?

    Thanks

    Cap'n


    Tuesday, October 22, 2013 4:45 PM

Answers

  • The tiles you are looking at are the GridView items. They aren't a constant 2x3 layout: that is based on the sizes of the items used and the size of the control. If you run in the simulator set to a different screen size or in portrait mode then you'll get a different layout. The GridView doesn't provide a way to specify the order it displays its items. If you need a more specific layout then you will need to use a different control.

    --Rob

    Tuesday, October 22, 2013 8:16 PM
    Moderator
  • The FlowDirection property isn't relevant. It controls the direction the entire element flows so it can be set appropriately for Right-to-Left languages as well as for Left-to-Right languages. See http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.flowdirection.aspx

    It is not GridView specific and doesn't have anything to do with ordering Vertically before Horizontally.

    --Rob

    • Marked as answer by Anne Jing Tuesday, October 29, 2013 9:12 AM
    • Unmarked as answer by Anne Jing Tuesday, October 29, 2013 9:13 AM
    • Marked as answer by Anne Jing Tuesday, October 29, 2013 9:13 AM
    Monday, October 28, 2013 8:44 PM
    Moderator

All replies

  • The tiles you are looking at are the GridView items. They aren't a constant 2x3 layout: that is based on the sizes of the items used and the size of the control. If you run in the simulator set to a different screen size or in portrait mode then you'll get a different layout. The GridView doesn't provide a way to specify the order it displays its items. If you need a more specific layout then you will need to use a different control.

    --Rob

    Tuesday, October 22, 2013 8:16 PM
    Moderator
  • The tiles you are looking at are the GridView items. They aren't a constant 2x3 layout: that is based on the sizes of the items used and the size of the control. If you run in the simulator set to a different screen size or in portrait mode then you'll get a different layout. The GridView doesn't provide a way to specify the order it displays its items. If you need a more specific layout then you will need to use a different control.

    --Rob

    Oh OK but it just looked odd because on my Surface Pro it draws the six blocks but leaves a lot of empty space on the right hand side of the screen, easily enough space for 4 columns in total rather than 3. Why is it leaving all that right hand space empty?

    See my point? I can't see any obvious reason for what seems to be the "reserved" space on the right, if the controls were simply filling up the available space as you say then I'd expect to see it four items wide.

    It's questions like this that come up all the time with these technologies and I instinctively like to understand what I'm seeing, I think you'll agree that it's a reasonable question.

    Cap'n

    Hold - on - I see now! Because it draws the items row 1, row 2, row 1, row 2 then it will draw it this way and because there are only six items we get this space on the right, I can see that now - it makes sense! Are you 100% certain Rob that this drawing order is not controllable in any way?




    Wednesday, October 23, 2013 3:58 AM
  • OK There actually is a GridView property that has some relevance here - FlowDirection - although it doesn't influence the top/bottom ordering I'm seeing.

    In fact I'd go far as to say it's buggy - the default (LeftToRight) should - intuitively - draw items left to right one row at a time.

    What we're actually seeing is a FlowDirection of TopToBottom (although this isn't supported).

    The behavior I see is actually top to bottom first with left to right second - so the control could (should?) expose PrimaryFlowDirection and SecondaryFlowDirection then we'd have 100% control over the geometrics ordering of contained items.

    Cap'n

    Thursday, October 24, 2013 12:29 AM
  • In any way? I'm 100% certain that this drawing order is controllable. In the general case it's a very bad idea: the GridView scrolls horizontally and is logically infinitely wide but of limited height. Filling the limited height before the infinite width will work much better than the reverse.

    That said, in specific limited scenarios where you have a known small number of items in each group here's what you can do:

    Override the GroupStyle.Panel to use a Horizontal Orientation control instead of a Vertical one.

                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>

    Now you'll have the problem that the GridView scrolls horizontally, so unlimited items will fit and not wrap. You can fix this by setting the VariableSizedWrapGrid's MaxRowsOrColumns property:

           <VariableSizedWrapGrid MaximumRowsOrColumns="6" Orientation="Horizontal" Margin="0,0,80,0"/>
                         

    But now you'll always wrap at 6 columns and extend to unlimited rows. Since the GridView scrolls horizontally and not vertically you can easily get into a state where items are below the screen and not reachable.

    I don't have a ready fix here beyond "don't do that". It may be possible to do some dynamic calculations to extend the MaximumRowsOrColumns depending on the number of items and screen size. If you can limit your items and if you can test to make sure they don't slip off screen in small screens or "Make everything on your screen bigger" modes then give this a try.

    --Rob

    Thursday, October 24, 2013 12:42 AM
    Moderator
  • In any way? I'm 100% certain that this drawing order is controllable. In the general case it's a very bad idea: the GridView scrolls horizontally and is logically infinitely wide but of limited height. Filling the limited height before the infinite width will work much better than the reverse.

    That said, in specific limited scenarios where you have a known small number of items in each group here's what you can do:

    Override the GroupStyle.Panel to use a Horizontal Orientation control instead of a Vertical one.

                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Horizontal" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>

    Now you'll have the problem that the GridView scrolls horizontally, so unlimited items will fit and not wrap. You can fix this by setting the VariableSizedWrapGrid's MaxRowsOrColumns property:

           <VariableSizedWrapGrid MaximumRowsOrColumns="6" Orientation="Horizontal" Margin="0,0,80,0"/>
                         

    But now you'll always wrap at 6 columns and extend to unlimited rows. Since the GridView scrolls horizontally and not vertically you can easily get into a state where items are below the screen and not reachable.

    I don't have a ready fix here beyond "don't do that". It may be possible to do some dynamic calculations to extend the MaximumRowsOrColumns depending on the number of items and screen size. If you can limit your items and if you can test to make sure they don't slip off screen in small screens or "Make everything on your screen bigger" modes then give this a try.

    --Rob

    Thanks Rob that's very interesting, I'd never have dug that idea up any time soon! Actually this ordering question isn't a big deal for me, its not significant functionally. I was simply trying to tie up observed appearance with the XAML code, since I'm new to this I strive to try and understand as much as I can with simple examples.

    I note that you revealed the GridView scrolls horizontally and that point actually explains a great deal. But it begs the question, couldn't Microsoft have made that a runtime property ScrollingPolicy or something, with Horizontal and Vertical being the choices?

    Anyway thanks for sharing these insights, its greatly appreciated.

    Cap'n

    Thursday, October 24, 2013 7:16 AM
  • The design language calls for GridViews to be oriented horizontally and to be read top to bottom before left to right. The recommendation for vertical is to use a ListView.

    See Grid view and list view for more information on the design.

    --Rob

    Thursday, October 24, 2013 11:32 PM
    Moderator
  • The FlowDirection property isn't relevant. It controls the direction the entire element flows so it can be set appropriately for Right-to-Left languages as well as for Left-to-Right languages. See http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.flowdirection.aspx

    It is not GridView specific and doesn't have anything to do with ordering Vertically before Horizontally.

    --Rob

    • Marked as answer by Anne Jing Tuesday, October 29, 2013 9:12 AM
    • Unmarked as answer by Anne Jing Tuesday, October 29, 2013 9:13 AM
    • Marked as answer by Anne Jing Tuesday, October 29, 2013 9:13 AM
    Monday, October 28, 2013 8:44 PM
    Moderator