【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 ...
随机推荐
- 兼容当前五大浏览器的渐变颜色背景gradient的写法
<style type="text/css" media="screen"> #gradient { width: 200px; height: 2 ...
- 使用maven将项目热发布到tomcat7的坑
首先是配置tomcat的用户权限问题,最好是配置最大的权限,要不然会报错,我之前就是一直报错 <role rolename="manager"/> <user u ...
- Birthday(费用流)
Birthday https://www.nowcoder.com/acm/contest/206/A 题目描述 恬恬的生日临近了.宇扬给她准备了一个蛋糕. 正如往常一样,宇扬在蛋糕上插了n支蜡烛,并 ...
- php Pthread 多线程 (二) Worker和Threaded
<?php //Worker是具有持久化上下文(执行环境)的线程对象 //Worker对象start()后,会执行run()方法,run()方法执行完毕,线程也不会消亡 class MySqlW ...
- python编辑excel
转: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html
- winXP使用
1.获得管理员权限 开机启动时按F8-->进入“安全模式”-->选择“Administrator”-->点击登录 2.Windows XP属于单用户多任务操作系统,Linux属于多用 ...
- laravel表单提交
1.控制器->路由->视图 2.视图 3.控制器
- asp.net状态保持
1.首先如果不是asp.net webform而只是一个纯粹的html页面和ashx一般处理程序的话,因为http协议的无状态,每一次的页面请求都会重新实例化一个页面对象(注意实例化页面对象其实是通过 ...
- hadoop 学习(三)之hdfs shell命令
1.HDFS shell 1.0查看帮助 hadoop fs -help <cmd> 1.1上传 hadoop fs -put <linux上文件> <hdfs上的路 ...
- phalapi框架where条件查询
// WHERE name = 'dogstar' AND age = 18 $user->where(array('name' => 'dogstar', 'age' => 18) ...