2012-08-13 7 views
2

Windows 8 용 C#/Xaml에서 시멘틱 줌을 구현하려고합니다. 축소를 표시하고 확대하는 데 성공했습니다. 그러나 축소시 항목을 클릭하면 보기 나는 항상 내 확대보기의 첫 번째 항목으로 돌아갑니다.시멘틱 줌은 항상 첫 번째 항목으로 돌아갑니다.

this.cvs1.Source = App.api.ListByCategory(); 
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = 
    this.cvs1.View.CollectionGroups; 

내 XAML 코드 :

public IEnumerable<object> ListByCategory() 
{ 
    var query = from item in listArticles.listArticles 
       orderby item.categorie 
       group item by item.categorie into g 
       select g; 
    return query; 
} 

내가 축소 및 확대 뷰에 그룹화 동일한 항목 모음을 표시하려면이 옵션을 사용 : 여기

내가 내 항목을 그룹화하는 방법입니다 is

<ScrollViewer 
     x:Name="itemGridScrollViewer" 
     AutomationProperties.AutomationId="ItemGridScrollViewer" 
     Grid.Row="1" 
     Margin="0,-3,0,0" 
     Style="{StaticResource HorizontalScrollViewerStyle}"> 

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"> 
<SemanticZoom.ZoomedOutView> 
       <GridView Foreground="Black" SelectionMode="None"> 
        <GridView.ItemTemplate> 
         <DataTemplate> 
          <TextBlock 
        Text="{Binding Group.Key}" 
        FontFamily="Segoe UI Light" 
        FontSize="24" /> 
         </DataTemplate> 
        </GridView.ItemTemplate> 
        <GridView.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2" 
          VerticalChildrenAlignment="Center" /> 
         </ItemsPanelTemplate> 
        </GridView.ItemsPanel> 
        <GridView.ItemContainerStyle> 
         <Style TargetType="GridViewItem"> 
          <Setter Property="Margin" Value="4" /> 
          <Setter Property="Padding" Value="10" /> 
          <Setter Property="Background" Value="#FF25A1DB" /> 
          <Setter Property="BorderThickness" Value="1" /> 
          <Setter Property="HorizontalContentAlignment" Value="Left" /> 
          <Setter Property="VerticalContentAlignment" Value="Bottom" /> 
         </Style> 
        </GridView.ItemContainerStyle> 
       </GridView> 
      </SemanticZoom.ZoomedOutView> 
<SemanticZoom.ZoomedInView> 
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None" 
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True"  ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True"> 
     <local:MyGridView.ItemsPanel> 
      <ItemsPanelTemplate> 
<VirtualizingStackPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </local:MyGridView.ItemsPanel> 
     <local:MyGridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </local:MyGridView.GroupStyle> 
    </local:MyGridView> 
</SemanticZoom.ZoomedInView> 
</SemanticZoom> 
    </ScrollViewer> 

감사합니다.

+0

당신의 클릭 방법은? – mydogisbox

+1

무엇을 의미합니까? 모든 샘플 코드에서 축소보기에 대한 클릭 된 메서드 구현을 본 적이 없습니다. 나는 그것이보기를 만들기 위해 같은 소스를 사용한다는 것을 고려할 때 자동적으로 적절한 그룹에 링크되어야한다고 생각했다. 따라서 축소 항목을 클릭하면이 헤더가있는 그룹에 직접 링크되어야합니다. 내가 잘못? –

+0

클릭 권리를 처리하는 코드가 여전히 있어야합니다. – mydogisbox

답변

2

Depechie가 게시 한 링크에서 해결책을 찾았습니다. SemanticZoom

수행하는 첫 번째이자 가장 중요한 것은과에서 ScrollViewer를 교체

완전히 Movies.xaml에서에서 ScrollViewer 명 "itemGridScrollViewer"을 제거하는 것입니다. SemanticZoom 컨트롤이 ScrollViewer 내부에 있으면 올바르게 작동하지 않습니다.

많은 사람들이 ZoomedOutView 및 ZoomedInView를 "동기화"하는 데 문제가 있습니다. 일반적인 문제는 ZoomedOutView의 항목을 클릭하면 ZoomedInView가 올바른 위치로 스크롤되지 않는다는 것입니다. 이 문제의 원인은 대개 SemanticZoom-control이 ScrollViewer 내부에 있기 때문입니다.

그래서 효과적으로, 난 그냥에서 ScrollViewer를 제거하고 그것이 마치 마법처럼 작동합니다 :

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom"   
     Grid.Row="1" 
     Margin="0,-3,0,0"> 
    <SemanticZoom.ZoomedOutView> 
      <GridView Foreground="Black" SelectionMode="None"> 
       <GridView.ItemTemplate> 
        <DataTemplate> 
         <TextBlock 
       Text="{Binding Group.Key}" 
       FontFamily="Segoe UI Light" 
       FontSize="24" /> 
        </DataTemplate> 
       </GridView.ItemTemplate> 
       <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="2" 
         VerticalChildrenAlignment="Center" /> 
        </ItemsPanelTemplate> 
       </GridView.ItemsPanel> 
       <GridView.ItemContainerStyle> 
        <Style TargetType="GridViewItem"> 
         <Setter Property="Margin" Value="4" /> 
         <Setter Property="Padding" Value="10" /> 
         <Setter Property="Background" Value="#FF25A1DB" /> 
         <Setter Property="BorderThickness" Value="1" /> 
         <Setter Property="HorizontalContentAlignment" Value="Left" /> 
         <Setter Property="VerticalContentAlignment" Value="Bottom" /> 
        </Style> 
       </GridView.ItemContainerStyle> 
      </GridView> 
     </SemanticZoom.ZoomedOutView> 
    <SemanticZoom.ZoomedInView> 
<local:MyGridView x:Name="PicturesGridView" SelectionMode="None" 
ItemsSource="{Binding Source={StaticResource cvs1}}" IsItemClickEnabled="True" ItemTemplate="{StaticResource CustomTileItem}" ItemClick="ItemView_ItemClick" IsSwipeEnabled="True"> 
     <local:MyGridView.ItemsPanel> 
     <ItemsPanelTemplate> 
<VirtualizingStackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </local:MyGridView.ItemsPanel> 
    <local:MyGridView.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate> 
        <Button Click="Button_Click_1" Content="{Binding Key}" Foreground="Black" Background="White" FontSize="30" Margin="0,0,0,-10" ></Button> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
     </GroupStyle> 
    </local:MyGridView.GroupStyle> 
</local:MyGridView> 
</SemanticZoom.ZoomedInView> 
</SemanticZoom> 
0

여기서는 그룹화가 중요하다고 생각합니다. CollectionViewSource에 IsSourceGrouped = "True"이 있는지 확인하십시오.

또한,

을 설정할 필요가 없습니다

ItemsSource = this.cvs1.View.CollectionGroups;

이 설정할 수

ItemsSource = this.cvs1;

+0

예 CVS에 IsSourceGrouped = "True"가 있습니다. XAML 코드에서 만들었습니다. . View.CollectionGroups를 제거하려고 시도했는데이 줄에 도착하면 "값이 예상 범위 내에 들지 않습니다."라는 오류 메시지가 나타납니다. –

+0

사실, 내가보기에 줌인 뷰에서 적절한 gridView를 사용하고 있지 않지만 사용자 정의 뷰에서 적절한 gridView를 사용하지 않을 수 있습니까? 두 개의 뷰 간 링크가 우리가 사용하는 뷰 컨트롤과 관련이 없기 때문에 그렇게 생각하지 않습니다. –

관련 문제