GridView中的多高度单元格 - XAML

Question

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

每GridViewCell是由一个又一个网格，这样每个单元都有不同数量的行内的...

我的问题是，如果我有一个小区有很多行的表格看起来奇怪...

这是我想了如何创建我的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：

<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> 

编辑

我tryed更改组的创建的GridView，现在我没有使用分组的GridView和它只是GridView控件的ListView控件，问题仍然存在，我认为这是因为

<WrapGrid Orientation='Vertical' /> 

我tryed使用的StackPanel或VirtualisingStackPanel现在还出现了只有一列（使现在很多网格已经超过了边距）。

有没有办法在StackPanel有一些溢出时创建1个或多个列？

Answer 1

问题解决了

After hours ... and hours ... and hours of web searching我发现了一个允许在Windows应用商店应用中使用WrapPanel的函数类。

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

感谢的人：d

Answer 2

不幸的是，如果您没有恒定数量的可以手动安排的子控件，则无法轻松获得此布局。 有实现的自定义面板，您可以尝试通过 “砖石” 字

下面是相关的链接查找：

• Fluid layout wrap panel/VariableSizedWrapGrid in desktop applications?
• jQuery Masonry layout for WPF?
• Does an equivalent method/technique to jQuery masonry exist in Xaml?

Answer 3

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

如果你有一个单排三列的网格，然后添加stackpanels到特定的列

<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>