GridView 中的多高度单元格 - XAML答案

【问题标题】：Multi height cell in a GridView - XAMLGridView 中的多高度单元格 - XAML
【发布时间】：2015-09-07 14:23:50
【问题描述】：

我制作了一个动态 GridView，它从数据库中获取一些信息。

每个 GridViewCell 都由另一个 Grid 组成，因此每个 Cell 内部都有不同数量的行...

我的问题是，如果我有一个包含很多行的单元格，表格看起来很奇怪......

这是我想要创建 GridView 的方式：

┌─────┬────┬────┐
│     │    │    │
│     ├────┤    │
├─────┤    │    │
│     │    ├────┤
│     ├────┤    │
└─────┴────┴────┘

我希望任何人都可以帮助我：D

编辑

这是我的代码：

网格：

<Grid>
   <GridView
         x:Name="listaSpecifiche" SelectionMode="None"
         IsSwipeEnabled="false" Height="Auto"
         IsItemClickEnabled="False" ItemsSource="{Binding Source={StaticResource sorgenteListaSpecifiche}}"
         IsHitTestVisible="False" ItemTemplate="{StaticResource specificaTemplate}">
      <GridView.ItemsPanel>
         <ItemsPanelTemplate>
             <WrapGrid Orientation="Vertical"/>
         </ItemsPanelTemplate>
      </GridView.ItemsPanel>
      <GridView.GroupStyle>
          <GroupStyle HeaderTemplate="{StaticResource gruppoSpecificaTemplate}">
               <GroupStyle.Panel>
                   <ItemsPanelTemplate>
                       <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,20,0" Visibility="Visible"/>
                   </ItemsPanelTemplate>
                </GroupStyle.Panel>
           </GroupStyle>
       </GridView.GroupStyle>
       <GridView.ItemContainerStyle>
           <Style TargetType="GridViewItem">
                <Setter Property="Margin" Value="0,-9,0,0" />
                <Setter Property="BorderBrush" Value="Blue" />
                <Setter Property="BorderThickness" Value="1" />
           </Style>
       </GridView.ItemContainerStyle>
  </GridView>
</Grid>

数据模板：

<DataTemplate x:Key="specificaTemplate">
     <Grid Margin="0">
         <Grid.RowDefinitions>
             <RowDefinition Height="25"/>
         </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition Width="300" />
             <ColumnDefinition Width="350" />
         </Grid.ColumnDefinitions>
        <TextBlock Margin="7,0,0,0" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="14" Text="{Binding Descrizione}"/>
        <TextBlock Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Text="{Binding Valore}"/>
     </Grid>
</DataTemplate>

 <DataTemplate x:Key="gruppoSpecificaTemplate">
     <Grid Margin="5,0,0,5">
         <Grid.RowDefinitions>
             <RowDefinition Height="50"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="650"/>
         </Grid.ColumnDefinitions>
         <StackPanel Background="#BB000795" Height="30" Grid.Row="0">
             <TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}" HorizontalAlignment="Left" 
                       VerticalAlignment="Top" FontSize="16" FontWeight="Bold" Foreground="White" Margin="7,-10,0,0" />
         </StackPanel>

     </Grid>
 </DataTemplate>

编辑

我试图改变GridView的组的创建，现在我没有使用分组的GridView，它只是一个GridView的ListView，问题仍然存在，我认为是因为

 <WrapGrid Orientation='Vertical' />

我尝试使用 StackPanel 或 VirtualisingStackPanel，但现在只有一列（所以现在很多网格都超出了边距）。

当 StackPanel 出现溢出时，有没有办法创建 1 个或更多列？

【问题讨论】：

“怪人”是什么意思？你能告诉我们你当前的代码和它的作用吗？
您似乎使用了错误的控件来完成这项工作。也许您需要一组 StackPanel 或其他东西
我已经添加了我的代码，我使用的是 GridView，因为我需要使用 GroupStyle 从单一来源制作不同的表格
我的意思是奇怪的单元格，因为每个单元格的高度都是它左边的一个，所以如果第一个单元格里面有 10 行，而第二个只有 1 行，那么它有 9 行是空的
您可以使用网格和 StackPanel 的组合来更改网格，或者使用 rowSpan 值来获得该设计。正如@GlenThomas 所说，您在工作中使用了错误的控件。

标签： c# wpf xaml gridview

【解决方案1】：

不幸的是，如果您没有固定数量的子控件（您可以手动安排），您将无法轻松获得此布局。有实现的自定义面板，您可以尝试通过单词“masonry”查找它们

以下是相关链接：

【讨论】：

【解决方案2】：

有一种简单的方法可以实现这种外观 - 使用包含更多 StackPanel 的 StackPanel。还有其他方法可以做到这一点，但你会受到流量和窗口大小的影响——我想你希望你的定位相当静态。

如果您有一个单行三列的网格，则将堆栈面板添加到特定列

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <StackPanel Orientation="Vertical">
        <StackPanel Height="200" />
        <StackPanel />
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Column="1">
        <StackPanel Height="100" />
        <StackPanel Height="200" />
        <StackPanel Height="100" />
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Column="2">
        <StackPanel Height="250" />
        <StackPanel Height="150" />
    </StackPanel>

</Grid>

这种方法将使每列中的面板不受约束地向下增长。我已经为它们指定了任意高度，因此您可以在设计器中看到它们的边界。

如果你想限制它们，那么你需要使用网格单元格并创造性地使用每个单元格的行和行高，并将面板放在特定的单元格内：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="3" Grid.Column="0" Grid.RowSpan="3">
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Grid.RowSpan="3">
    </StackPanel>

</Grid>

【讨论】：

问题是我没有固定数量的网格或行，它们来自数据库。当我设置我的列表视图的项目源时，它是一个类的 List，它有一个 String 和另一个类的 List。

【解决方案3】：

问题已解决

经过数小时……数小时……数小时的网络搜索后，我发现了一个允许在 Windows 应用商店应用程序中使用 WrapPanel 的函数类。

我的救星的链接：http://www.codeproject.com/Articles/463860/WinRT-Custom-WrapPanel

谢谢大家：D

【讨论】：