C# metro app - Gridview as a child of StackPanel is not working

Question

In my metro app if I add a GridView on top of a StackPanel, then the GridView layouts the controls horizontally. But if I set the GridView as the Content of the page then it works fine. Do anyone have idea why it layouts like this.

Code in MainPage.xaml.cs:

                StackPanel panel = new StackPanel();
                this.Content = panel;                                        
                GridView gridView = new GridView();
                //this.Content = gridView; If I set grid view as page Content then it is working fine                   

                for (int i = 0; i < 6; i++)
                {
                    Canvas canvas = new Canvas();
                    canvas.Background = new SolidColorBrush(Colors.Blue);
                    canvas.Width = 300.0;
                    canvas.Height = 300.0;
                    gridView.Items.Add(canvas);
                }

                panel.Children.Add(gridView);

Answer 1

"panel.Orientation = Orientation.Horizontal" should do

Answer 2

It works fine if I set panel.Orientation = Orientation.Horizontal. But the GridView's parent StackPanel is added on a vertical StackPanel. In this case again the GridView layouts the controls vertically. How to resolve this. Please help

Answer 3

The following example [see Grid.Row=2 for the code behind implementation] meets these requirements:

- "the GridView's parent StackPanel is added on a vertical StackPanel." : done

- "In this case again the GridView layouts the controls vertically" : by setting the 'ItemsPanelTemplate' appropriately in code behind, this works

---

<Page
    x:Class="App14.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App14"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Name="rootPage">
    <Page.Resources>
        <ItemsPanelTemplate x:Key="sp3">
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <GridView Grid.Row="0">
            <!-- OPTIONAL -->
            <!--<GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="sp2" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>-->
            <Canvas Width="300" Height="300" Background="Yellow"/>
            <Canvas Width="300" Height="300" Background="Yellow"/>
            <Canvas Width="300" Height="300" Background="Yellow"/>
            <Canvas Width="300" Height="300" Background="Yellow"/>
            <Canvas Width="300" Height="300" Background="Yellow"/>
            <Canvas Width="300" Height="300" Background="Yellow"/>
        </GridView>
        
        <StackPanel x:Name="sp1" Grid.Row="1" Orientation="Vertical">
            <GridView>
                <!-- REQUIRED -->
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel x:Name="sp2" Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <Canvas Width="300" Height="300" Background="Yellow"/>
                <Canvas Width="300" Height="300" Background="Yellow"/>
                <Canvas Width="300" Height="300" Background="Yellow"/>
                <Canvas Width="300" Height="300" Background="Yellow"/>
                <Canvas Width="300" Height="300" Background="Yellow"/>
                <Canvas Width="300" Height="300" Background="Yellow"/>
            </GridView>
        </StackPanel>
        
        <ContentControl x:Name="cc" Grid.Row="2"/>
        <Button Grid.Row="2" Content="Add in code behind" Click="Button_Click_1"/>
    </Grid>
</Page>

---

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App14
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            StackPanel sp1 = new StackPanel(); sp1.Orientation = Orientation.Vertical;
            GridView gridView = new GridView();
            for (int i = 0; i < 6; i++)
            {
                Canvas canvas = new Canvas();
                canvas.Background = new SolidColorBrush(Colors.Blue);
                canvas.Width = 300.0;
                canvas.Height = 300.0;
                gridView.Items.Add(canvas);
                //
                // this is the missing piece of code [see XAML example as to why on Grid.Row='1']
                //
                gridView.ItemsPanel = rootPage.Resources["sp3"] as ItemsPanelTemplate;

            }
            // ...
            sp1.Children.Add(gridView);
            // ...
            cc.Content = sp1;
        }
    }
}