SemanticZoom GridView.ItemsSource 대신 GridView.Items 사용

Question

내 응용 프로그램의 메인 페이지에서 다른 하위 섹션을 표시하고 섹션 사이의 80 픽셀 여백을 존중하면서 이와 같은 것을했습니다.

<GridView> 
    <GridView.Style> 
     <Style TargetType="GridView"> 
      <Setter Property="ItemContainerStyle"> 
       <Setter.Value> 
        <Style TargetType="GridViewItem"> 
         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         <Setter Property="Margin" Value="0, 0, 80, 0"/> 
         <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="GridViewItem"> 
            <ContentPresenter/> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal"/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </GridView.Style> 
    <Grid> 
     <TextBlock Text="SubTitle1"/> 
     ... 
    </Grid> 
    <Grid> 
     <TextBlock Text="SubTitle2"/> 
     ... 
    </Grid> 
    <Grid> 
     <TextBlock Text="SubTitle3"/> 
     ... 
    </Grid> 
</GridView> 

이제 시맨틱 줌을 추가하여줌으로써 축소 할 때 하위 섹션 제목이 날씨 앱과 비슷합니다. ItemsSource를 사용하여 SemanticZoom을 과거에 해왔지만, 실제 아이템을 GridView에 곧바로 배치하고 그룹화가 없다면 어떻게해야합니까?

편집 : 다른 사람들은 이러한 유형의 별도의 하위 섹션을 80 픽셀 간격으로 분리하여 어떻게 처리합니까? SemanticZoom을 작동 시키려면 두 GridView가 동일한 콜렉션에 바인드해야합니까?

Answer 1

위의 GridView는 이름이 필요합니다. 전화 번호는 ZoomedInGV입니다. 물론 이것은 SemanticZoom.ZoomedInView의 컨트롤이됩니다. 그런 다음 다른 GridView를 만들어야합니다. ZoomedOutGV으로 전화를 겁니다. 마지막으로 두 뷰 사이에 바인딩을 만들어야합니다. 해결책은 다음과 같습니다.

<SemanticZoom> 
    <SemanticZoom.ZoomedInView> 
     <GridView x:Name="ZoomedInGV"> 
     ... 
     </GridView> 
    </SemanticZoom.ZoomedInView> 
    <SemanticZoom.ZoomedOutView> 
     <GridView x:Name="ZoomedOutGV" ItemsSource="{Binding ElementName=ZoomedInGV, Path=Items}"/> 
    </SemanticZoom.ZoomedOutView> 
</SemanticZoom>