【WP8.1】系统控件的bug及修复方案

最近开发的时候，发现Windows Phone 8.1 Runtime中的两个控件的存在bug的情况，现总结出来，并给出解决方案。

1、Hub控件

Hub控件的顶部默认是可以拖动来切换HubSection的：

然而当我们将Hub的Header设置为复杂对象的时候，例如：

         <Hub>
             <Hub.Header>
                 <StackPanel Orientation="Horizontal">
                     <Image Source="Assets/logo11w.png"
                            Height="100" />
                     <TextBlock Text="谷歌" />
                 </StackPanel>
             </Hub.Header>
             <HubSection Header="section 1"
                         Background="Red" />
             <HubSection Header="section 2"
                         Background="Green" />
             <HubSection Header="section 3"
                         Background="Blue" />
         </Hub>

设置方式1

或者使用HeaderTemplate的方式设置：

         <Hub>
             <Hub.HeaderTemplate>
                 <DataTemplate>
                     <StackPanel Orientation="Horizontal">
                         <Image Source="Assets/logo11w.png"
                                Height="100" />
                         <TextBlock Text="谷歌" />
                     </StackPanel>
                 </DataTemplate>
             </Hub.HeaderTemplate>
             <HubSection Header="section 1"
                         Background="Red" />
             <HubSection Header="section 2"
                         Background="Green" />
             <HubSection Header="section 3"
                         Background="Blue" />
         </Hub>

设置方式2

Hub的顶部就再也无法拖动了。

解决方案：重写Hub控件的模板。

以上面设置Header的内容为例，重写Hub的Template如下：

         <x:Int32 x:Key="HubHeaderCharacterSpacing">-22</x:Int32>
         <x:Double x:Key="HubHeaderFontSize">78</x:Double>
         <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
         <Thickness x:Key="HubHeaderMarginThickness">15,1,0,0</Thickness>
         <Style x:Key="HubFixStyle"
                TargetType="Hub">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="Hub">
                         <Grid x:Name="HubRoot">
                             <Grid.Projection>
                                 <PlaneProjection x:Name="EntranceAnimationProjection" />
                             </Grid.Projection>
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="auto" />
                                 <RowDefinition Height="*" />
                             </Grid.RowDefinitions>
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="BackgroundImageLoadStates">
                                     <VisualState x:Name="BackgroundHidden">
                                         <Storyboard>
                                             <FadeOutThemeAnimation Storyboard.TargetName="Background" />
                                         </Storyboard>
                                     </VisualState>
                                     <VisualState x:Name="BackgroundImageFadingIn">
                                         <Storyboard>
                                             <FadeInThemeAnimation Storyboard.TargetName="Background" />
                                         </Storyboard>
                                     </VisualState>
                                     <VisualState x:Name="BackgroundShowing">
                                         <Storyboard>
                                             <DoubleAnimation To="1"
                                                              Storyboard.TargetProperty="Opacity"
                                                              Storyboard.TargetName="Background" />
                                         </Storyboard>
                                     </VisualState>
                                 </VisualStateGroup>
                             </VisualStateManager.VisualStateGroups>
                             <Canvas Grid.RowSpan="2">
                                 <Canvas.Clip>
                                     <RectangleGeometry x:Name="BackgroundClipRect" />
                                 </Canvas.Clip>
                                 <Grid x:Name="Background">
                                     <Grid.RenderTransform>
                                         <CompositeTransform x:Name="BackgroundParallaxTransform" />
                                     </Grid.RenderTransform>
                                     <Border x:Name="WrapBackground"
                                             BorderBrush="{TemplateBinding BorderBrush}"
                                             BorderThickness="{TemplateBinding BorderThickness}"
                                             Background="{TemplateBinding Background}">
                                         <Border.RenderTransform>
                                             <CompositeTransform x:Name="WrapBackgroundParallaxTransform" />
                                         </Border.RenderTransform>
                                     </Border>
                                     <Border x:Name="MainBackground"
                                             BorderBrush="{TemplateBinding BorderBrush}"
                                             BorderThickness="{TemplateBinding BorderThickness}"
                                             Background="{TemplateBinding Background}" />
                                 </Grid>
                             </Canvas>
                             <ScrollViewer x:Name="ScrollViewer"
                                           HorizontalScrollMode="Auto"
                                           HorizontalSnapPointsType="None"
                                           HorizontalAlignment="Left"
                                           HorizontalScrollBarVisibility="Hidden"
                                           Grid.RowSpan="2"
                                           Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
                                           VerticalScrollBarVisibility="Disabled"
                                           VerticalScrollMode="Disabled"
                                           ZoomMode="Disabled">
                                 <ItemsStackPanel x:Name="Panel"
                                                  CacheLength="6"
                                                  Orientation="{TemplateBinding Orientation}" />
                             </ScrollViewer>
                             <Canvas Grid.Row="0">
                                 <Canvas.Clip>
                                     <RectangleGeometry x:Name="HeaderClipRect" />
                                 </Canvas.Clip>
                                 <ContentControl x:Name="HeaderHost"
                                                 CharacterSpacing="{StaticResource HubHeaderCharacterSpacing}"
                                                 ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                 FontWeight="Light"
                                                 FontSize="{StaticResource HubHeaderFontSize}"
                                                 FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                                 Margin="{StaticResource HubHeaderMarginThickness}">
                                     <ContentControl.RenderTransform>
                                         <TransformGroup>
                                             <CompositeTransform x:Name="HeaderParallaxTransform" />
                                             <TranslateTransform x:Name="HeaderFlyinFlyoutTransform" />
                                         </TransformGroup>
                                     </ContentControl.RenderTransform>
                                     <ContentControl.Content>
                                         <StackPanel Orientation="Horizontal">
                                             <Image Source="Assets/logo11w.png"
                                                    Height="100" />
                                             <ContentPresenter Content="{TemplateBinding Header}" />
                                         </StackPanel>
                                     </ContentControl.Content>
                                 </ContentControl>
                             </Canvas>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

Hub的Header解决方案

效果：

2、Image控件

如果同一时间有多个Image控件进行加载网络图像的话，那么有部分将会加载失败。

这里先列出测试的数据源：

            "http://www.bing.com/az/hprichbg/rb/DragonFlyBeijing_ZH-CN8555054089_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/MidAutumnFestivalHongKong_ZH-CN9020398465_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/MusulmokBeach_ZH-CN12849119858_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/BetulaVerrucosa_ZH-CN9596215235_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/HoluhraunVolcano_ZH-CN10866460287_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/SouthernElephantSeal_ZH-CN11868940461_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/YokoteKamakura_ZH-CN11459129782_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/SpottedLakeCanada_ZH-CN12374082037_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/StKildaBay_ZH-CN12275183653_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/SellinPier_ZH-CN9832633239_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/RNPFogVideo_ZH-CN8941485556_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/PaperFansRedLanterns_ZH-CN9355904288_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/NinthEmperorGodTemple_ZH-CN13109315006_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/ChineseDecorationTiger_ZH-CN13118003712_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/NewYearPinwheels_ZH-CN12259065748_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/NewYearOrnaments_ZH-CN10726465661_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/DadaochengFireworks_ZH-CN10749562397_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/SummerVacation_ZH-CN10164213926_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/InsideRhoneGlacier_ZH-CN10709433723_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/BodleianLibrary_ZH-CN13371852606_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/HeartNebula_ZH-CN7750020667_150x150.jpg",
            "http://www.bing.com/az/hprichbg/rb/HotAndCold_ZH-CN8140560654_150x150.jpg"

测试数据源

来自每天的必应壁纸，将大小选定为150x150排除由于过大而导致失败的因素，并且在150x150下，每幅图像均只有几kb。

测试前台XAML：

 <Page x:Class="BugDemo.ImageBugPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:BugDemo"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition />
         </Grid.RowDefinitions>
         <Button Content="Load"
                 Click="BtnLoad_Click" />
         <ListView Grid.Row="1"
                   x:Name="lvwImage"
                   Background="Gray">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <Image Width="150"
                            Height="150"
                            Source="{Binding}"
                            ImageFailed="Image_ImageFailed" />
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </Grid>
 </Page>

ImageBug前台

后台cs：

 using System.Diagnostics;
 using Windows.Phone.UI.Input;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Navigation;

 // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

 namespace BugDemo
 {
     /// <summary>
     /// 可用于自身或导航至 Frame 内部的空白页。
     /// </summary>
     public sealed partial class ImageBugPage : Page
     {
         private string[] _testUrl = new string[]{
             "http://www.bing.com/az/hprichbg/rb/DragonFlyBeijing_ZH-CN8555054089_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/MidAutumnFestivalHongKong_ZH-CN9020398465_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/MusulmokBeach_ZH-CN12849119858_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/BetulaVerrucosa_ZH-CN9596215235_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/HoluhraunVolcano_ZH-CN10866460287_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/SouthernElephantSeal_ZH-CN11868940461_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/YokoteKamakura_ZH-CN11459129782_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/SpottedLakeCanada_ZH-CN12374082037_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/StKildaBay_ZH-CN12275183653_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/SellinPier_ZH-CN9832633239_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/RNPFogVideo_ZH-CN8941485556_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/PaperFansRedLanterns_ZH-CN9355904288_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/NinthEmperorGodTemple_ZH-CN13109315006_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/ChineseDecorationTiger_ZH-CN13118003712_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/NewYearPinwheels_ZH-CN12259065748_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/NewYearOrnaments_ZH-CN10726465661_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/DadaochengFireworks_ZH-CN10749562397_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/SummerVacation_ZH-CN10164213926_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/InsideRhoneGlacier_ZH-CN10709433723_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/BodleianLibrary_ZH-CN13371852606_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/HeartNebula_ZH-CN7750020667_150x150.jpg",
             "http://www.bing.com/az/hprichbg/rb/HotAndCold_ZH-CN8140560654_150x150.jpg"
         };

         public ImageBugPage()
         {
             this.InitializeComponent();
         }

         /// <summary>
         /// 在此页将要在 Frame 中显示时进行调用。
         /// </summary>
         /// <param name="e">描述如何访问此页的事件数据。
         /// 此参数通常用于配置页。</param>
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
             HardwareButtons.BackPressed += HardwareButtons_BackPressed;
         }

         protected override void OnNavigatedFrom(NavigationEventArgs e)
         {
             HardwareButtons.BackPressed -= HardwareButtons_BackPressed;
         }

         private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
         {
             if (Frame.CanGoBack)
             {
                 e.Handled = true;
                 Frame.GoBack();
             }
         }

         private void BtnLoad_Click(object sender, RoutedEventArgs e)
         {
             lvwImage.ItemsSource = _testUrl;
         }

         private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
         {
             Debug.WriteLine(e.ErrorMessage);
         }
     }
 }

ImageBug后台

测试效果：

出现了其中一幅无法加载的情况

而我们的调试窗口也显示出了无法加载的信息。

解决方案：捕获到加载失败时，重新设定Image控件的Source属性。

修改上面的后台代码中的ImageFailed方法：

PS：暂时未知win8.1 store app上也是否会出现这个问题，有时间的博友可以帮忙测试一下。

最后附上测试的代码及解决的代码的整个工程：BugDemo.zip