使用隐藏在全景控件中的进度指示器会导致全景项目只有第一个

Posted

技术标签:

【中文标题】使用隐藏在全景控件中的进度指示器会导致全景项目只有第一个【英文标题】:Using a progress indicator that gets hidden within a Panorama control is causing the panorama item to just to 1st one 【发布时间】:2013-06-23 18:51:51 【问题描述】:

我的 WP8 应用有一个非常奇怪和烦人的问题。

它使用全景控件来查看它从网络下载的项目。它有一个在下载内容时显示的视图,但在内容加载完成后会折叠。

当“加载”视图折叠时,我发现无论您选择了什么项目,Panorama 控件都会跳回到控件中的第一个项目。

我有以下非常基本的测试代码来演示该问题。

XAML:

<phone:PhoneApplicationPage
    x:Class="Wp8.GUI.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="clr-namespace:Wp8.Gui.Converters"
    mc:Ignorable="d"
    FontFamily="StaticResource PhoneFontFamilyNormal"
    FontSize="StaticResource PhoneFontSizeNormal"
    Foreground="StaticResource PhoneForegroundBrush"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
               <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
            </Grid.Resources>


      <phone:Panorama ItemsSource="Binding PanoramaItems">
            <phone:Panorama.HeaderTemplate>
               <DataTemplate>
                  <Grid HorizontalAlignment="Stretch">
                     <TextBlock Text="Binding Title" />
                  </Grid>
               </DataTemplate>
            </phone:Panorama.HeaderTemplate>


            <phone:Panorama.ItemTemplate>
               <DataTemplate>
                  <Grid>
                     <StackPanel x:Name="Visible1" Visibility="Binding ShowFirst, Converter=StaticResource BooleanToVisibilityConverter,ConverterParameter=True" >
                        <ProgressBar IsIndeterminate="True" />
                        <TextBlock Text="ShowFirst" />
                     </StackPanel>

                     <StackPanel x:Name="Visible2" Visibility="Binding ShowFirst, Converter=StaticResource BooleanToVisibilityConverter,ConverterParameter=False" >
                        <TextBlock Text="Show  Second" />
                     </StackPanel>
                  </Grid>
               </DataTemplate>
            </phone:Panorama.ItemTemplate>
         </phone:Panorama>
      </Grid>
</phone:PhoneApplicationPage>

虚拟机和后面的代码如下:

namespace Wp8.GUI

   public class PanItemVm : INotifyPropertyChanged 
   
      private readonly string _title;
      private bool _showFirst = true;

      public PanItemVm()
      
         _title = "Control";
      

      public PanItemVm(string title)
      
         _title = title;
      

      public string Title  get  return _title;  

      public bool ShowFirst
      
         get  return _showFirst; 
         set
         
            _showFirst = value;
            RaisePropertyChanged("ShowFirst");
         
      

      private void RaisePropertyChanged(string propName)
      
         if (PropertyChanged != null)
         
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
         
      

      public event PropertyChangedEventHandler PropertyChanged;
   

   public class PanItemVm2 : PanItemVm
   
      public PanItemVm2() : base ("Items") 
      
         Task.Run(() => Task.Delay(TimeSpan.FromSeconds(5))) 
             .ContinueWith(t => ShowFirst = false, 
                           TaskScheduler.FromCurrentSynchronizationContext());
      
   

   public class TestVm : INotifyPropertyChanged
   
      public IEnumerable<PanItemVm> PanoramaItems
      
         get  
            return Enumerable.Range(0, 2)
                   .Select(i => i == 0 ? 
                           new PanItemVm() : new PanItemVm2()); 
      

      public event PropertyChangedEventHandler PropertyChanged;
   

   public partial class MainPage : PhoneApplicationPage
   
      public MainPage()
      
         InitializeComponent();
         DataContext = new TestVm();
      
   

如果您在模拟器中运行代码,然后在全景图中轻弹至 Item2。 5 秒后它会弹回标有“控制”的页面。

在此测试代码中,我可以通过以下任一方式解决问题 a) 将 ProgressIndicator 所在的 StackPanel 更改为 Grid b) 移除 ProgressIndicator

但是,这些解决方案都不适用于我的正确项目,但是如果我删除使用 BooleanToVisibilityConverter 的可见性代码,则它不会弹回。

有人知道是什么原因造成的吗? 如果有用,我可以发布整个示例代码。

谢谢

--- 编辑 ---

这是 BooleanToVisibilityConverter 的代码

using System.Windows;
using System.Windows.Data;

namespace Wp8.Gui.Converters

   public class BooleanToVisibilityConverter : IValueConverter 
   
      public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
      
         if (value != null && value is bool)
         
            bool visibilityValue = true;
            if(parameter != null)
            
               if(parameter is string)
               
                  bool.TryParse((string)parameter, out visibilityValue);
               
            

            return (bool)value == visibilityValue ? Visibility.Visible : Visibility.Collapsed;
         

         return Visibility.Visible;
      

      public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
      
         throw new System.NotImplementedException();
      
   

【问题讨论】:

我设法通过在隐藏时将堆栈面板的不透明度设置为 0 来捏造解决方案,这实现了我想要的用户体验。然后我使用相同的绑定折叠进度指示器。不过,我仍然想正确解决这个问题。 您的样本不完整。它不包括您的BooleanToVisibilityConverter。我删除了对此的引用并运行了代码,但它没有重现您遇到的问题 我已经用转换器更新了我的帖子。这是通常的 BooleanToVisibilityConverter 的一个非常标准的实现。如果没有这个,那么您将无法复制该问题,因为这与导致问题的单个面板被折叠/显示有关。希望这会有所帮助。 【参考方案1】:

我也遇到了同样的问题。我有一个全景图(修改为填充全屏),用于在轮播中显示图片。我必须根据全景位置打开/关闭图片以保持低内存。但是,每当加载图片时,全景图就会返回到默认项……第一项。

所以我从另一个问题中得到了提示,然后去查看 Panorama 的源代码。虽然您看不到当前代码,但您可以看到 Panorama 在它是 WP Toolkit 的一部分时是什么。似乎只要全景图的大小发生变化,内部的滚动查看器就会被重置。

 void OnSizeChanged(object sender, SizeChangedEventArgs e)
    
        // clip to control layout
        LayoutRoot.SetValue(Panel.ClipProperty, new RectangleGeometry()  Rect = new Rect(0, 0, this.Width, this.Height) );

        // reset scroll viewer
        Dispatcher.BeginInvoke(() =>
        
            ScrollView.Invalidate(false);
        );
    

好的。那是一个线索。所以我玩弄了我的项目模板(我的标题不存在),试图看看是什么改变了大小。有些东西在改变大小……不知道是什么。因此,我将所有内容都包装在一个网格中,并将宽度/高度/MaxWidth/MaxHeight 硬编码为等于屏幕高度/宽度。它们绑定到我的视图模型中的计算值,这些值会根据设备方向而变化。

 <controls:PanoramaFullScreen.ItemTemplate>
            <DataTemplate>
                <Grid Width="Binding LayoutWidth"
                      MaxWidth="Binding LayoutWidth"
                      Height="Binding LayoutHeight"
                      MaxHeight="Binding LayoutHeight">
             rest of stuff
                </Grid>
            </DataTemplate>

有效!不再切换回第一项!

所以我怀疑您的代码正在更改 PanoramaItem 的整体高度/宽度,这反过来又会更改全景大小并重置内部滚动查看器。

【讨论】:

之前我正在折叠进度指示器,它当然会调整全景图大小。我的解决方案是将包含 ProgressIndicator 的 StackPanel 的不透明度设置为 0,以便有效地隐藏它。我需要折叠 ProgressIndicator 以阻止它消耗 CPU。这对我来说效果很好,因为我可以在 Z-Order 更高的位置添加另一个 StackPanel 供用户交互。 OnSizeChanged() 上的好发现 感谢您的回答,它也解决了我的问题。奇怪的是,即使大小也在变化,(显然)它从未启动过 SizeChanged 事件?!

以上是关于使用隐藏在全景控件中的进度指示器会导致全景项目只有第一个的主要内容,如果未能解决你的问题,请参考以下文章

如何在运行时检索全景项目的名称?

全景标题绑定

Windows Phone 8 全景布局

为什么选择360全景项目进行创业

Vue项目中是实现全景图片

我如何无法在 WP7 的全景视图中处理 selectionchange 事件?