GridView formatting issues

Question

Ive got an issue with the overall formatting for my GridView. I am trying to get it to format in nice squares. im not sure of their exact width / height as yet. The issue im having is my current XAML and C# code produces the following result:

Please excuse the terrible formatting for the text, i appreciate its not the best looks wise.

What im trying to get is for the information to come up as follows. Ive had to hand draw this because I literally cant put it into code, I also need these square to not overlap with the navigation view menu button which they keep doing currently. I was looking at adding a margin to prevent the overlap, although im not sure if this is best practive or not? Heres the desired result:

Currently I believe I only have the code setup to display one of these "Squares". Each square will have its own seperate information from the others. The info here is purely for testing purposes.

I have build UserData.cs file within a folder named "Data" that holds the information for the users. That code is:

using System.Collections.ObjectModel;

namespace BudgetSheet.Data
{
    class UserDataCollection: ObservableCollection<UserData>
    {
        public UserDataCollection()
        {

            // Placeholder, needs to be replaced with CSV or Database information
            this.Add(new UserData()
            {
                Name = "Selected Username"
            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {
                PayDate = "Friday"
            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {
                NumberOfItems = "ItemAmount Placeholder"
            });
        }
    }

    public class UserData
    {
        public string Name { get; set; }
        public string PayDate { get; set; }
        public string NumberOfItems { get; set; }
    }
}

This code is there referenced within its own GridView within MainPage.Xaml The GridView code is as follows:

<Frame x:Name="ContentFrame">        
    <Frame.ContentTransitions>
        <TransitionCollection>
            <NavigationThemeTransition/>
        </TransitionCollection>
    </Frame.ContentTransitions>

    <GridView ItemsSource="{StaticResource userDataCollection}"
              IsItemClickEnabled="True"
              SelectionMode="Single">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <!-- This is the column definitions, every column needs defining -->
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="220"/>
                        <ColumnDefinition Width="220"/>
                        <ColumnDefinition Width="220"/>
                        <ColumnDefinition Width="220"/>
                    </Grid.ColumnDefinitions>

                    <!-- This Is the contents of the Grid -->
                    <TextBlock Grid.Column="0" Text="{Binding Name}"/>
                    <TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
                    <TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>                 
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Frame>

Now, i appreciate that this may not give all of the formatting necessary in order for help on this, so here is the full Mainpage.Xaml Code if necessary. I apologise this is a bit hefty:

<Page   x:Class="BudgetSheet.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:Microsoft.UI.Xaml.Controls"
        xmlns:local="using:BudgetSheet"
        xmlns:mux="using:Windows.UI.Xaml.Controls"
        xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
        xmlns:data="using:BudgetSheet.Data"
        RequestedTheme="Dark">

        <Page.Resources>
            <data:UserDataCollection x:Key="userDataCollection"/>
        </Page.Resources>

        <Frame Background="{StaticResource CustomAcrylicDarkBackground}"> 
            <mux:NavigationView IsSettingsVisible="False" 
                                PaneTitle=" Budget Sheet Menu "                            
                                x:Name="NavView"                             
                                IsBackButtonVisible="Collapsed" 
                                PaneDisplayMode="LeftMinimal" 
                                AlwaysShowHeader="True"        
                                SelectionChanged="NavView_SelectionChanged">
            <mux:NavigationView.MenuItems>
                <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                    <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync"/>
                    <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_ClickAsync"/>
                    <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync"/>
                    <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click"/>
                    <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync"/>
                </StackPanel>

                <mux:NavigationViewItemSeparator/>
                <mux:NavigationViewItem Name="HomeItem" 
                                        Content="HOME" 
                                        Tag="HOME_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>

                <mux:NavigationViewItem Name="OverviewItem" 
                                        Content="ACCOUNT OVERVIEW" 
                                        Tag="OverView_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="BillsItem" 
                                        Content="BILLS" 
                                        Tag="Bills_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PeopleItem" 
                                        Content="BILL PAYERS" 
                                        Tag="BillPayer_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="TransfersItem" 
                                        Content="BANK TRANSFERS" 
                                        Tag="Transfers_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PayDatesItem" 
                                        Content="PAY DATES" 
                                        Tag="PayDates_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
            </mux:NavigationView.MenuItems>

            <Frame x:Name="ContentFrame">                
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition/>
                        </TransitionCollection>
                    </Frame.ContentTransitions>
                    <GridView ItemsSource="{StaticResource userDataCollection}"
                              IsItemClickEnabled="True"
                              SelectionMode="Single">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <!-- This is the column definitions, every column needs defining -->
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="220"/>
                                        <ColumnDefinition Width="220"/>
                                        <ColumnDefinition Width="220"/>
                                        <ColumnDefinition Width="220"/>
                                    </Grid.ColumnDefinitions>

                                    <!-- This Is the contents of the Grid -->
                                    <TextBlock Grid.Column="0" Text="{Binding Name}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
                                    <TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>

                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                </Frame>
            <NavigationView.PaneFooter>
                <Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
                    <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                        <SymbolIcon Symbol="Contact" Margin="8"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Text="Change User"/>
                    </StackPanel>
                </Button>
            </NavigationView.PaneFooter>
        </mux:NavigationView>
    </Frame>
</Page>

I appreciate all your time and patience with this. If anything on this needs clarifying please let me know. I am running an insider vuild target version of 17723 which may help with a couple of features

Answer 1

you just need to reformat your DataTemplate in the following way :-

<DataTemplate>
    <Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center">       
            <!--you need rows instead of columns because as you show in the picture you need your textblocks Stacked over each other. -->     
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

        <!-- This Is the contents of the Grid -->
        <!-- you can style the textblock properties for example fontsizes to set the desired look for each one of them -->

        <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
        <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
        <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>

        <!-- Any other content u want to put will come here and it should be marked with Grid.Row="3" so that it can come into last (4th) row at the very bottom. -->

    </Grid>
</DataTemplate>

also in order to remove the stepping behaviour please remove following code.

<GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
</GridView.ItemsPanel>

Answer 2

Try using ItemsControl instead of GridView . Like,

<ItemsControl ItemsSource="{StaticResource userDataCollection}">
   <!-- Changing Orientation of VirtualizingStackPanel -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

   <!-- To scroll horizontally -->
   <ItemsControl.Template>
       <ControlTemplate TargetType="ItemsControl">
           <ScrollViewer HorizontalScrollBarVisibility="Visible">
               <ItemsPresenter/>
           </ScrollViewer>
       </ControlTemplate>
   </ItemsControl.Template>

   <!-- Template for each card-->
   <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="220"/>
                    <ColumnDefinition Width="220"/>
                    <ColumnDefinition Width="220"/>
                    <ColumnDefinition Width="220"/>
                </Grid.ColumnDefinitions>    

                <TextBlock Grid.Column="0" Text="{Binding Name}"/>
                <TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
                <TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>    
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>