Question

我正在开发Windows 10 UWP和Windows Phone 8.1项目。在项目中，有一些像Instagram中的标签，可以在图片中看到。使用GridView将这些标签打印在屏幕上。问题是我无法制作GridView项目＆＃39;宽度动态的内容。它取第一个项目的宽度，并为所有其他项目提供相同的宽度。对于较短的单词，它不是问题，但较长单词的一些字母不可见。

以下是问题的屏幕截图。

我写的代码;

<GridView SelectionMode="None" ItemsSource="{Binding TagsArray}" ScrollViewer.IsHorizontalRailEnabled="True">
  <GridView.ItemTemplate>
    <DataTemplate>
      <Grid>
         <TextBlock x:Name="tagButton" Tapped="tagButton_Tapped" FontWeight="Medium" Text="{Binding}" Foreground="#063076" FontSize="11" HorizontalAlignment="Left"/>
      </Grid>
    </DataTemplate>
  </GridView.ItemTemplate>
  <GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
      <Setter Property="Margin" Value="0,-15,0,-15"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
  </GridView.ItemContainerStyle>
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <ItemsWrapGrid Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
</GridView>

Answer 1

我建议您使用WrapPanel中的UWP Community Toolkit进行此操作。

您可以通过替换ItemsPanel：

在GridView中使用它

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
            </toolkit:WrapPanel>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

以下是一个完整的例子：

    <GridView x:Name="ItemGrid" Width="450" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        <GridView.ItemTemplate>
            <DataTemplate >
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <controls:WrapPanel Orientation="Horizontal" AllowDrop="True">
                </controls:WrapPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

与以下集合一起使用时：

        var ite = new ObservableCollection<string>();
        ite.Add("#tag1");
        ite.Add("#a");
        ite.Add("#tag3");
        ite.Add("#differ");
        ite.Add("#tag5");
        ite.Add("#longertag");
        ite.Add("#verylongtag");
        ite.Add("#tag1");

        this.ItemGrid.ItemsSource = ite;

提供以下输出：

如何为gridview项（文本块）提供动态宽度？

1 个答案: