如何动态调整GridView项目的大小？ [英] How do I dynamically size a GridView Item?

问题描述

我有一个网格视图，用于显示标签，这是一个动态大小的字符串列表。使用以下代码：

 < GridView ItemsSource ={Binding Tags}
 ItemTemplate ={StaticResource TagTemplate }
 VerticalAlignment =Bottom
 Grid.RowSpan =2
 SelectionMode =None
 /> 
  

我为物品使用以下模板：

 < DataTemplate x：Name =TagTemplate> 
< Border BorderBrush =GrayBorderThickness =1Opacity =75> 
< TextBlock Text ={Binding}/> 
< / Border> 
< / DataTemplate> 
  

添加到网格中时，每个项目的大小与第一个项目的大小相同：

如何在GridView中动态调整项目大小？

解决方案

 < ScrollViewer> 
< ItemsControl ItemsSource ={Binding Tags}> 
<！ -  ItemsPanelTemplate  - > 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< StackPanel Orientation =Horizo​​ntal/> 
 <！ - 或根据其显示使用WrapPanel  - > 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
<！ -  ItemContainerStyle  - > 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
< Border BorderBrush =GrayBorderThickness =1Opacity =75Padding =3Margin =3,0> 
< TextBlock Text ={Binding}/> 
< / Border> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
< / ScrollViewer> 
  

I have a Grid View that is used to display "tags" which is a list of strings that are dynamic in size. Using the following code:

<GridView ItemsSource="{Binding Tags}" 
          ItemTemplate="{StaticResource TagTemplate}" 
          VerticalAlignment="Bottom"
          Grid.RowSpan="2"
          SelectionMode="None"
          />

I use the following Template for the items:

<DataTemplate x:Name="TagTemplate">
    <Border BorderBrush="Gray" BorderThickness="1" Opacity="75">
        <TextBlock Text="{Binding}"/>
    </Border>
</DataTemplate>

When added to the Grid, the size of each of the items are the same size as the first:

How do I dynamically size the items within the GridView?

解决方案

So something like;

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding Tags}">
        <!-- ItemsPanelTemplate -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
                <!-- Or use WrapPanel depending on its display -->
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- ItemContainerStyle -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="1" Opacity="75" Padding="3" Margin="3,0">
                     <TextBlock Text="{Binding}"/>
                </Border>                             
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

这篇关于如何动态调整GridView项目的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！