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>