c# - 如何在 UWP 中制作具有可变长度项目的可扩展 GridView?
问题描述
我有一个拆分视图窗格,我想在其中放置一个 GridView。在 gridview 中,项目的宽度应该是可变的并且左对齐。除了我有一个更多按钮,不适合排成一行的项目应该垂直放置。GUI 应该如下图所示:
在上图中,1 到 8 是可变长度项目,其中项目 6-8 放置在更多按钮下方,因为它们不适合打开的窗格长度。
我尝试过的代码如下:
<GridView x:Name="GridViewPane"
Grid.Row="0"
FlowDirection="LeftToRight"
CharacterSpacing="1"
CenterPoint="0,0,0"
HorizontalContentAlignment="Left"
ItemsSource="{x:Bind data}"
IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:List">
<Grid x:Name="TextBorder"
Width="Auto"
CornerRadius="14"
BorderBrush="Aqua"
BorderThickness="1"
Height="24">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9" />
<ColumnDefinition />
<ColumnDefinition Width="16" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="9"
Width="9"
Source="/Assets/Images/page_ic.svg" />
<TextBlock Grid.Column="1"
FontSize="11"
FontFamily="Segoe UI"
FontWeight="SemiBold"
Foreground="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontStretch="Expanded"
Text="{x:Bind DisplayName}" />
<Button x:Name="DeleteTagButton"
Grid.Column="2"
Height="16"
Width="16"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="/Assets/Images/page_delete.svg" />
</Button>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
MaximumRowsOrColumns="1"
/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
解决方案
如果要在 GridView 中添加可变长度项,可以尝试使用Windows Community Toolkit 中的WrapPanel。使用前需要添加Microsoft.Toolkit.Uwp.UI.Controls nuget包,然后覆盖GridView的ItemsPanel,例如:
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
或者在这种情况下,您也可以尝试使用命令栏来实现它。
推荐阅读
- java - 重定向后未将 Spring Boot Flash 属性添加到模型
- alexa-skills-kit - Alexa APL。让 AlexaHeader 组件位于单个 Image 组件之上的问题?
- sql - 如何使用 sqldf R 包使用 UPDATE 函数更新某些行?
- nlp - 如何在给定上下文的句子中获取特定标记(单词)的概率
- twilio - 使用 Twilio SMS 我想发送多段消息,但告诉 Twilio 在哪里中断消息
- angular - 单击按钮时使用反应式表单进行异步验证
- android - android xml中的形状渐变多
- .net - 等于或:字符串布尔值的比较运算符
- r - 使用 Rvest 从 class = "section wrapper" 中提取数据
- python - Django 处理多步表单