在Windows 8.1 GridView中設置組頁邊距

我正在使用WinRT GridView，顯示分組數據。我有一個設計要求，指定網格中每個項目組之間的20px間距。在Windows 8.1 GridView中設置組頁邊距

我注意到當我爲ItemsPanelTemplate使用ItemsWrapGrid時，我可以設置GroupPadding屬性，但沒有GroupMargin屬性。我已經嘗試用StackPanel替換ItemsWrapGrid，它允許我設置GroupStyle.Panel（我可以指定一個VariableSizedWrapGrid並設置一組邊距）。這完全滿足了我的視覺設計的要求，但不幸的是，使用StackPanel會帶來負面的性能影響，因爲這將不允許GridView使用虛擬化。

我也嘗試用ItemsStackPanel替換ItemsWrapGrid（它支持虛擬化），但是當滾動通過具有不同數量項目的組時滾動條會出現奇怪的水平滾動條行爲。（滾動條越來越小）。

這裏是我到目前爲止的代碼片段：

 <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <ItemsWrapGrid Margin="20,0,0,0" 
           Background="Red" 
           GroupPadding="0,0,80,0"> 
       </ItemsWrapGrid> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel>

margin屬性適用於整個電網。 GroupPadding屬性正確設置組之間的間隔，但我需要爲每個組（每個組之間有一個透明間隙）爲每個組設置背景顏色（本例中爲紅色）。

TL;博士： 我想用一個ItemsWrapGrid因爲，我可以設置一個組保證金的ItemsPanel分組數據的GridView控件。

來源

2014-02-13 Scott Ferguson

查看GroupStyle類。它允許您爲每個組設置樣式，包括標題和組本身的單獨模板。在該頁面中給出的例子風格是：

<GridView.GroupStyle> 
    <GroupStyle HidesIfEmpty="True"> 
     <GroupStyle.HeaderTemplate> 
      <DataTemplate> 
       <Grid Background="LightGray" Margin="0"> 
        <TextBlock Text='{Binding Name}' 
           Foreground="Black" Margin="30" 
           Style="{StaticResource HeaderTextBlockStyle}"/> 
       </Grid> 
      </DataTemplate> 
     </GroupStyle.HeaderTemplate> 

     <GroupStyle.ContainerStyle> 
      <Style TargetType="GroupItem"> 
       <Setter Property="MinWidth" Value="600"/> 
       <Setter Property="BorderBrush" Value="DarkGray"/> 
       <Setter Property="BorderThickness" Value="2"/> 
       <Setter Property="Margin" Value="3,0"/> 
      </Style> 
     </GroupStyle.ContainerStyle> 

     <GroupStyle.Panel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid/> 
      </ItemsPanelTemplate> 
     </GroupStyle.Panel> 
    </GroupStyle> 
</GridView.GroupStyle>

通知的ContainerStyle屬性，在這裏你可以設置一個Margin。您也可以在那裏爲每個項目設置面板。

你應用到你的GridView的ItemsPanel被應用在整個列表中（正如你注意到的那樣）。分組的GridView是列表的列表，因此您需要將更改應用到每個單獨的組。 GroupStyle是你如何做到的。

希望這有助於和快樂的編碼！

編輯：我在我的應用程序中親自完成的是更改GroupStyle.Panel上的保證金。

<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>

來源

2014-02-13 23:51:58

嗨內特，感謝您的嘗試，但正如我的問題所示，我已經嘗試指定GroupStyle設置，但是這隻在GridView.ItemsPanel不是ItemsWrapGrid時才起作用。不幸的是，在使用默認ItemsWrapGrid作爲GridView ItemsPanel時，GroupStyle.ContainerStyle屬性在8.1中被棄用和實際忽略。 –

添加了說明。我爲GroupStyle的面板添加了一個保證金，該面板起作用。 –

再次感謝，但正如我所提到的，當您的GridView.ItemsPanel不是ItemsWrapGrid時，您的解決方案只能在Win 8.1中運行。有關詳細信息，請參閱http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemscontrol.groupstyle.aspx。它可能正在爲你工作，但你不會使用我們需要的性能方面的ItemsWrapGrid。 –

我也愛知道如何做到這一點正確我一直在試圖讓我的組之間的保證金的影響，現在的時間太長了瞎搞。注：這是一個Win 8.1商店應用程序

我訴諸以下（非常醜，哈克）解決方案，我不滿意。

我的具體要求

25像素較淡的背景分離成組的GridView各組的保證金/邊框（恰好是內部SemanticZoom.ZoomedInView）

頭對於每個組是水平的並跨越整個組的寬度

以GridView方式顯示組的項目，即垂直堆疊在行中，直到填滿列，然後溢出到新列中

哈克骯髒醜陋的解決方案

需要ItemsWrapGrid，以確保集團內的物品的「流」是正確的

新增GroupPadding給我每組

之間所需的間隔使用的圖像刷作爲背景 - 這是一個非常寬的圖像，以較淺的陰影作爲每X像素的垂直條（x =組的寬度）

如果任何人有更好的解決方案將大加讚賞因爲目前這讓我感覺有點病了，讓我想起在網絡上討厭討厭1px的間隔圖像;（

<GridView.ItemsPanel> <ItemsPanelTemplate> <ItemsWrapGrid Background="{StaticResource ImgBack}" GroupHeaderPlacement="Top" GroupPadding="25,0,0,0"> </ItemsWrapGrid> </ItemsPanelTemplate> </GridView.ItemsPanel> ... <ImageBrush x:Key="ImgBack" ImageSource="/Assets/GridBackRepeat.png" AlignmentX="Left" Stretch="None" AlignmentY="Top"> </ImageBrush>

注意

我試圖用樣式（的TargetType =「GroupItem」包含ContentControl中X：NAME =「HeaderContent」和ItemsControl的X：名稱=「ItemsControl中」），以嘗試和佈局的組頭對組項目在默認2排柵以外的東西，這工作得很好......除了真氣外t，它只有當我使用東西比ItemsWrapGrid，即StackPanel，這打破了我的要求3.

來源

2014-04-09 15:40:09 MemeDeveloper

在Windows 8.1 GridView中設置組頁邊距

回答

相關問題