6

각 그룹의 요소가 가로로 (스크롤 가능한 내용으로) 표시되는 그룹화로 ListView을 만들려고합니다. 내가 무엇을 시도했는지에 상관없이 이 ListView인데 목록에 아무런 영향을주지 않는 것 같습니다. 여기Windows Phone에서 ListView의 GroupStyle.Panel을 설정하십시오.

내 XAML이 모습입니다 :

<ListView x:Name="itemListView" 
      Padding="10"     
      SelectionMode="None" 
      IsSwipeEnabled="False" 
      IsItemClickEnabled="True" 
      ItemTemplate="{StaticResource listItemTemplate}"> 
    <ListView.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
       <ItemsWrapGrid ItemWidth="144" Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate> 
       <Grid> 
        <TextBlock Text="{Binding DisplayTitle}" 
           Margin="0,10,0,5" 
           Foreground="Black" 
           Style="{StaticResource SubheaderTextBlockStyle}" 
           TextWrapping="NoWrap" /> 
       </Grid> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
     </GroupStyle> 
    </ListView.GroupStyle> 
    </ListView> 

경우

<Page.Resources> 
    <DataTemplate x:Key="listItemTemplate"> 
     <Grid Width="144" Margin="5"> 
     <!-- details --> 
     </Grid> 
    </DataTemplate> 
</Page.Resources> 

다음 이미지는 내가, 내가 가지고 싶은 오른쪽 얻을 왼쪽 실제 결과를 보여줍니다. 나는 다른 속성을 가진 ItemsWrapGrid를 사용하여 시도

enter image description here

, 나는 StackPanel과 심지어 VariableSizedWrapGrid을 시도했지만 아무것도 목록 항목이 표시되는 방식 변경하지 않습니다.

어떻게이 작업을 수행 할 수 있습니까?

+0

Windows phone에 스택 패널이 없습니다. ' –

+0

예? 너는 너무 막연하다. –

+0

StackPanel Orientation = "Horizontal" –

답변

4

@kubakista이 문제가 해결되지 않습니다 변화, 그러나 권리에 대한

ListView.ItemsPanel이 ItemsStackPanel이 포함 된 경우 다음 GroupStyle.Panel이 무시됩니다처럼 보이는 ...

했다 as-

  1. 스크롤이 약간 뒤떨어집니다.
  2. 가로 스크롤이 없습니다.
  3. ListView은 가상화 기능을 잃습니다.
  4. 멋진 그룹 헤더 롤업 애니메이션이 사라졌습니다. 여기

는 데이터 구조에서 ListView의 구조 자체하지만 약간의 수정을 변경하지 않고 대안입니다.

아이디어는 그룹 아래의 각 가로형 사각형 목록을 컬렉션 항목 UI로 처리합니다.

즉, ListView의 각 그룹은 하나의 하위 만 가질 수 있습니다. 실제로는 가로 스크롤 가능 ItemsControl으로 표시되는 사각형 모음입니다.

그래서, 당신은 CollectionViewSource 같은 유형 ObservableCollection<Item>의 일부 컬렉션이 가정의 Item 이제 사각형의 컬렉션을 보관 유지하기 위해서 <ObservableCollection<Item>>의 유형이 될 것입니다. 따라서 컬렉션 유형을 ObservableCollection<ObservableCollection<Item>>과 같이 업데이트해야합니다.

ListViewItemTemplate, 당신은 만들어야합니다 내부 수평 ScrollViewer 스크롤 및 내부 ItemsControl을 넣어.후자의 ItemsSource{Binding}으로 설정했는지 확인하십시오.

가로 스 와이프를 사용하려면 ListViewItem 기본 스타일을 편집하고 다음 코드를 주석 처리하여 기울이기효과를 사용 중지해야합니다.

<!-- 
<VisualStateGroup.Transitions> 
    <VisualTransition From="Pressed" To="Normal"> 
     <Storyboard> 
      <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/> 
     </Storyboard> 
    </VisualTransition> 
</VisualStateGroup.Transitions> 
<VisualState x:Name="Normal"/> 
<VisualState x:Name="Pressed"> 
    <Storyboard> 
     <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/> 
    </Storyboard> 
</VisualState> 
--> 

나는 아래에 표시된 스크린 샷뿐만 아니라 작동하는 샘플 프로젝트 here을 첨부했습니다. 이 도움이

enter image description here

희망!

+1

우수합니다. 그게 효과가 있었어. 고맙습니다. –

+0

'ListView.ItemsPanel'이'GroupStyle.Panel'에 영향을 미치는 이유는 무엇입니까? –

+2

@kubakista, 나는 단지 여기에서 추측하고있다. win8.1 이전에,'ListView'의 디폴트'ItemsPanel'은 그룹핑이 가능할 때 가상화하지 않는'VirtualizingStackPanel'입니다. 그래서 8.1에서 그들은 그룹화 된 데이터를 가상화하는 새로운 'ItemsStackPanel'을 소개했습니다. 그러나 가상화 논리를 구현할 때 각 그룹에서 세로로 쌓인 데이터 만 고려해야합니다. 따라서 항상 그룹화 된 데이터 흐름을 가정하고 이것이 GroupStyle의 'Panel'에 영향을 미쳤을 수 있습니다. –