GridView格式问题
问题描述 投票：1回答：2
我的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的内部vuild目标版本，这可能有助于提供一些功能
2个回答
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>
0
投票
投票
尝试使用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>
最新问题
- Jenkinsfile：使用groovy调用GitHub API
- 使用 Tailwind CSS 放大图像并在悬停时淡入淡出颜色叠加
- 如何使用 Gitlab Webhook 触发 Jenkins 多分支管道
- MongoDB 对于许多传感器的最佳实践（+50k）但更新缓慢（每 12 小时）
- 为什么要存储解压数据的哈希值？
- 包含 STL 中的 `<cctype>` 时的 C2039 和 C2873
- Verilog 函数可以访问功能块外部声明的变量吗？
- 通过bash调用涂鸦API
- 如何以编程方式删除 woocommerce 订单？
- 如何在 Windows 上使用 Native AOT 发布 .NET 应用程序而不使用 Visual Studio？
- 多个 pod 中的 Quarkus 调度程序（concurrentExecution = SKIP 除外）
- Intellij IDEA 中的清理 HTTP 请求
- 如何将 WordPress 网站从旧的 xampp 文件夹移动到新的 xampp 文件夹？
- 使用 liquibase 和 PostgreSQL 从 CSV 导入数据时，有没有办法使用“覆盖系统值”
- 在弹出窗口中使用 Web 组件在 Firefox 中不起作用
- Xpath HTML 抓取不返回文本/数字
- 存储RSA密钥并在.Net core中使用它的最佳方法（寻找跨平台解决方案）
- 在 Automation Studio 4.12 中传输时出现“没有此类文件或目录”错误
- Perl 正则表达式检索第一个数字
- 在函数之间传递列表以一次引发异常而不是一次引发异常是一种不好的做法吗？
© www.soinside.com 2019 - 2024. All rights reserved.