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

该代码在MainPage.Xaml中自己的GridView中引用 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，这可能对一些功能有所帮助

Answer 1

您只需按照以下方式重新格式化 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>

也为了消除步进行为，请删除以下代码。

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

Answer 2

尝试使用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>

GridView格式问题

2 个答案: