2016-11-07 43 views
0

我進行了語義縮放,並將其放入彈出窗口中。它可以在放大和縮小時正常工作,但是當它從縮小的選定項目中放大時,它不會將放大列表放在正確的位置,但它總是顯示放大列表視圖中的第一項。當我在頁面上放置相同的代碼時,它可以正常工作。這裏是一個彈出按鈕和頁面放大彈出時的語義縮放在放大時不顯示正確的項目

<Page 
    x:Class="startapp.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:wuxdata="using:Windows.UI.Xaml.Data" 
    xmlns:local="using:startapp" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:data="using:startapp.Models" 
    mc:Ignorable="d"> 
    <Page.Resources> 
     <CollectionViewSource x:Name="ApplicationsCVS" Source="{x:Bind Groups}" IsSourceGrouped="True" ItemsPath="Items"/> 

     <DataTemplate x:Name="ApplicationListViewTemplate" x:DataType="data:AvailableApplication"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Ellipse x:Name="Ellipse" 
         Grid.RowSpan="2" 
         Width ="32" 
         Height="32" 
         Margin="6" 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
         Fill="LightGray"/> 
       <TextBlock Grid.Column="1" 
          Text="{x:Bind Name}" 
          x:Phase="1" 
          Style="{ThemeResource BaseTextBlockStyle}" 
          Margin="12,6,0,0"/> 
       <TextBlock Grid.Column="1" 
          Grid.Row="1" 
          Text="{x:Bind Position}" 
          x:Phase="2" 
          Style="{ThemeResource BodyTextBlockStyle}" 
          Margin="12,0,0,6"/> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:GroupInfoList"> 
      <TextBlock Text="{x:Bind Key}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" Style="{StaticResource SubtitleTextBlockStyle}"/> 
     </DataTemplate> 
     <DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup"> 
      <TextBlock Text="{x:Bind Group.(data:GroupInfoList.Key)}" Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/> 
     </DataTemplate> 
    </Page.Resources> 
    <Page.TopAppBar> 
     <CommandBar ClosedDisplayMode="Compact"> 
      <CommandBar.Content> 
      <AppBarButton x:Name="button" Icon="AllApps" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Left" d:LayoutOverrides="Width, Height, LeftPosition, RightPosition"> 
       <Button.Flyout> 
        <Flyout Placement="Bottom"> 
         <StackPanel Orientation="Horizontal" Width="500"> 
          <SemanticZoom Width="300" > 
           <SemanticZoom.ZoomedInView> 
            <ListView x:Name="listView" Margin="0,0,0,0" 
             ItemsSource="{x:Bind ApplicationsCVS.View}" 
             ItemTemplate="{StaticResource ApplicationListViewTemplate}" 
             SelectionMode="None" 

               ScrollViewer.IsVerticalScrollChainingEnabled="False" >  
             <ListView.GroupStyle> 
              <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" /> 
             </ListView.GroupStyle> 

            </ListView> 
           </SemanticZoom.ZoomedInView> 

           <SemanticZoom.ZoomedOutView> 
            <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch" 
               ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" 

               /> 
           </SemanticZoom.ZoomedOutView> 
          </SemanticZoom> 

           <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch" 
               ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" 

               /> 
          </StackPanel> 
        </Flyout> 
       </Button.Flyout> 
      </AppBarButton> 
      </CommandBar.Content> 
     </CommandBar> 
    </Page.TopAppBar> 

    <StackPanel Orientation="Horizontal"> 
     <SemanticZoom Width="500" ViewChangeStarted="SemanticZoom_ViewChangeStarted"> 
      <SemanticZoom.ZoomedInView> 
       <ListView x:Name="listView1" Margin="0,0,0,0" 
             ItemsSource="{x:Bind ApplicationsCVS.View}" 
             ItemTemplate="{StaticResource ApplicationListViewTemplate}" 
             SelectionMode="None" 

               ScrollViewer.IsVerticalScrollChainingEnabled="False" > 



        <ListView.GroupStyle> 
         <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" /> 
        </ListView.GroupStyle> 

       </ListView> 
      </SemanticZoom.ZoomedInView> 

      <SemanticZoom.ZoomedOutView> 
       <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch" 
               ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" 

               /> 
      </SemanticZoom.ZoomedOutView> 
     </SemanticZoom> 
     <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch" 
               ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}"></GridView> 
    </StackPanel> 

</Page> 

回答

0

爲了看到正確的行爲有一個包裹SemanticZoom與ScrollViewer中彈出按鈕的代碼。代碼如下

   <Flyout Placement="Bottom"> 
       <StackPanel Orientation="Horizontal" Width="500"> 

        <ScrollViewer> 
          <SemanticZoom Width="300" > 
           <SemanticZoom.ZoomedInView> 
            ... 
            ... 
           </SemanticZoom.ZoomedOutView> 
          </SemanticZoom> 
        </ScrollViewer>