Windows 8.1 GridView에서 그룹 여백 설정

Question

그룹화 된 데이터를 표시하는 WinRT GridView를 사용하고 있습니다. 그리드의 각 항목 그룹 사이에 20px 간격을 지정하는 디자인 요구 사항이 있습니다.

ItemsPanelTemplate에 ItemsWrapGrid를 사용할 때 GroupPadding 속성을 설정할 수 있지만 GroupMargin 속성이 없음을 알았습니다.

ItemsWrapGrid를 StackPanel로 대체하여 GroupStyle.Panel (여기서 VariableSizedWrapGrid를 지정하고 그룹 여백을 설정할 수 있음)을 설정할 수있었습니다. 이는 시각적 디자인의 요구 사항을 완벽하게 충족하지만 불행히도 StackPanel을 사용하면 GridView에서 가상화를 사용할 수 없으므로 성능이 저하 될 수 있습니다.

또한 ItemsWackGrid를 (가상화를 지원하는) ItemsStackPanel로 대체하려고했지만 다양한 항목이있는 그룹을 스크롤 할 때 이상한 가로 스크롤 막대 동작을 제공합니다. 스크롤 막대가 커지고 작아집니다.

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

여백 속성은 전체 그리드에 적용 여기

내가 지금까지 무엇을하는 코드이다. GroupPadding 속성은 그룹 사이의 간격을 올바르게 설정하지만 각 그룹 사이에 투명한 간격을두고 각 그룹 (이 예제에서는 빨간색)에 배경색을 설정해야합니다.

TL; DR : 이 난에 그룹 여백을 설정할 수 있습니다 ItemsPanel로 ItemsWrapGrid와 그룹화 된 데이터와의 GridView를 원한다.

Answer 1

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> 

공지 사항 당신이 Margin을 설정할 수 ContainerStyle 재산. 각 항목에 대해 Panel을 설정할 수도 있습니다.

GridView에 적용한 ItemsPanel이 전체 ​​목록에 적용되고있었습니다 (사용자가 알아 챘습니다). 그룹화 된 GridView는 목록의 목록이므로 각 개별 그룹에 변경 사항을 적용해야합니다. GroupStyle은 당신이 그렇게하는 방법입니다.

희망이 있다면 도움이되고 행복하게 코딩 할 수 있습니다.

편집 : 개인적으로 내 앱에서 수행 한 작업은 GroupStyle.Panel에서 여백을 변경하는 것입니다.

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

Answer 2

는 또한 사랑은 내가 너무 오래 지금 내 그룹 사이 여백의 효과를 얻기 위해 시도로 장난 봤는데이 제대로을 수행하는 방법을 아는 것입니다. N.B. 이것은 승 8.1 스토어 응용 프로그램이다.

다음과 같은 (매우 못 생기고, 해킹 된) 해결책에 의지했다. 나는 그다지 만족스럽지 않다.여백/테두리 그룹화의 GridView 각 그룹을 분리하는 배경의 25 픽셀 밝은 음영 (SemanticZoom.ZoomedInView 내부 우연히)

1. 내 특정 요구 각 그룹

2. 헤더 수평 및 그룹의 전체 너비를 포함합니다.
3. 그룹이 GridView 형식으로 표시된 항목 (열이 채워질 때까지 세로로 쌓인 다음 새 열로 넘침)

필요가 그룹 내에서 항목의 "흐름"을 보장하기 위해 ItemsWrapGrid

• 해키 음란 미운 솔루션이 올바른지
• 추가 GroupPadding는 사용 나에게 ImageBrush와 각 그룹
• 사이에 필요한 간격을 제공합니다 배경으로 - 세로 막대로 밝은 그늘을 가진 매우 넓은 이미지이며 모든 X 픽셀 (x = 그룹의 너비)

사람이 될 것더 나은 솔루션이 있다면 많은이 현재 나를 조금 아픈 느낌과 웹에 불쾌한 불쾌한 1 픽셀의 스페이서 이미지를 생각 나게로 평가 (

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

주

기본 2 행 격자가 아닌 그룹 항목에 대한 그룹 머리글과 레이아웃을 시도하고 레이아웃하기 위해 스타일 (TargetType = "GroupItem"ContentControl x : Name = "HeaderContent"및 ItemsControl x : Name = "ItemsControl"포함)을 사용하려고했습니다. , 괜찮 았던 것. .. 를 괴롭히는 fac를 제외하고. t 그것은 ItemsWrapGrid 이외의 다른 것을 사용할 때만 작동했습니다. 즉, StackPanel은 제 요구 사항을 위반합니다.