【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
【WP8.1】系统控件的bug及修复方案的更多相关文章
- 笨重的mfc还在基于系统控件，熟练的mfc工程师还比不过学习Qt一个月的学生开发效率高（比较精彩，韦易笑）
作者:韦易笑链接:https://www.zhihu.com/question/29636221/answer/45102191来源:知乎著作权归作者所有,转载请联系作者获得授权. 更新:擦,本来只有 ...
- duilib进阶教程 -- Container控件的bug (14)
在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...
- iOS系统控件显示中文
App中使用系统控件,一般默认会显示英文,即便系统的语言环境设置的是简体中文.这需要在App的工程中加入中文支持,这样在中文的系统环境下,调用的系统控件,比如“返回”而不是“Back”.步骤如下: 为 ...
- 【Android 界面效果18】Android软件开发之常用系统控件界面整理
[java] view plaincopyprint? <span style="font-size:18px">1.文本框TextView TextView的作用 ...
- Android软件开发之常用系统控件界面整理
1.文本框TextView TextView的作用是用来显示一个文本框,下面我用两种方式为大家呈现TextView, 第一种是通过xml布局文件呈现 ,第二种是通过代码来呈现,由此可见Android ...
- 背水一战 Windows 10 (79) - 自定义控件: Layout 系统, 控件模板, 事件处理
[源码下载] 背水一战 Windows 10 (79) - 自定义控件: Layout 系统, 控件模板, 事件处理 作者:webabcd 介绍背水一战 Windows 10 之 控件(自定义控件) ...
- duilib进阶教程 -- Label控件的bug (8)
上个教程说到了TreeView的文字不能垂直居中的问题,而我们用LabelUI其实是可以垂直居中的,为什么不说是TreeView的bug,而说是Label控件的bug呢?因为影响TreeView垂直居 ...
- Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
- WPF如何更改系统控件的默认高亮颜色 （Highlight brush）
我们在用WPF时, 经常会对系统控件的默认高亮等等颜色进行更改. 以前通常是用controlTemplate来实现. 今天发现一个更合理或者简单的方法: 用系统默认颜色的key, 比如 SystemC ...
随机推荐
- java script sleep synchronous
function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { ...
- select语法图
- JavaScript 实现双向队列并用此来测试一个单词是否为回文
题目出自<数据结构与算法 JavaScript 描述>一书第五章,习题 5.2 代码如下: /*************** Deque 类的实现 *************/ funct ...
- a标签伪类的LOVE HATE原则
a标签伪类的LOVE HATE原则 a标签有四个伪类,分别是: a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接 遇到的问题 ...
- Hibernate中一级缓存和二级缓存
缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...
- maven部署项目流程（区分环境）
java项目区分环境打包部署到Linux 本文以一个简单的HelloWorld的项目为例,从pom.xml配置到打jar包,最后在linux上运行并验证来对maven部署的这套流程进行简单介绍. 为方 ...
- UVa 1592 Database(巧用map)
Peter studies the theory of relational databases. Table in the relational database consists of value ...
- 在java工程中导入jar包的注意事项
在java工程中导入jar包后一定要bulid path,不然jar包不可以用.而在java web工程中导入jar包后可以不builld path,但最好builld path.
- Golang之redis
redis是个开源的高性能的key-value的内存数据库,可以把它当成远程的数据结构. 支持的value类型非常多,比如string.list(链表).set(集合). hash表等等 redis性 ...
- Restful API设计要点
1 Restful API时面向资源,不能面向动作: 2 充分利用http协议的GET, HEAD, OPTION, PUT, POST, DELETE几种方法: 3 GET方法用于获取资源,是幂等和 ...