GridView 格式问题

Question

我的 GridView 的整体格式设置有问题。我正在尝试将其格式化为漂亮的正方形。我还不确定它们的确切宽度/高度。我遇到的问题是我当前的 XAML，C# 代码产生以下结果：

请原谅文本的糟糕格式，我很欣赏它不是最好的选择。

我想要得到的信息如下。我不得不手绘这个，因为我真的不能把它放到代码中，我还需要这些方块不与他们目前一直在做的导航视图菜单按钮重叠。我正在考虑添加边距以防止重叠，但我不确定这是否是最佳实践？这是期望的结果：

目前我相信我只有代码设置来显示其中之一 "Squares"。每个方块都有自己独立于其他方块的信息。此处信息仅供测试。

我在名为 "Data" 的文件夹中构建了 UserData.cs 文件，其中包含用户的信息。该代码是：

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; }
    }
}

此代码在其自己的 GridView 中被引用 MainPage.Xaml GridView代码如下：

<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>

现在，我知道这可能无法提供所有必要的格式来帮助解决此问题，因此如果需要，这里是完整的 Mainpage.Xaml 代码。很抱歉这有点沉重：

<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>

感谢您为此付出的所有时间和耐心。如果这方面有任何需要澄清的地方，请告诉我。我是运行 17723 的内部 vuild 目标版本，它可能有助于一些功能

Answer 1

尝试使用 ItemsControl 而不是 GridView。喜欢，

<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>

Answer 2

您只需按照以下方式重新格式化您的 DataTemplate :-

<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>

GridView 格式问题

GridView formatting issues

c#

xaml

uwp

uwp-xaml