zoukankan      html  css  js  c++  java
  • <WP8开发学习笔记>ApplicationBar(任务栏)的切换以及“黑条问题”

       ApplicationBar(以下简称AppBar)是WP应用相当常见的控件,也很方便。常见的做法是pivot或者panorama的页面切换的时候,AppBar跟随切换对应的按钮或者不显示按钮,如下图。

    这个方法比较简单,网上很容易找到资料,不过我还是简要的说一下。

    首先要在页面资源里添加需要的AppBar,我这里添加了两个银色的AppBar。一个默认模式,一个最小化模式。

    <phone:PhoneApplicationPage.Resources>
            <shell:ApplicationBar x:Key="AppBar_1" BackgroundColor="Silver" Mode="Default" IsVisible="True">
                <shell:ApplicationBarIconButton IconUri="/Assets/AppBar1/add.png" Text="添加"/>
                <shell:ApplicationBarIconButton IconUri="/Assets/AppBar2/check.png" Text="确认"/>
            </shell:ApplicationBar>
            <shell:ApplicationBar x:Key="AppBar_2" BackgroundColor="Silver" IsMenuEnabled="True" Mode="Minimized" IsVisible="True">
            </shell:ApplicationBar>
        </phone:PhoneApplicationPage.Resources>

    然后在Pivot的selectionChanged事件中修改对应的AppBar,第三个设置为NULL即没有AppBar,就完事啦。

    private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (pivot.SelectedIndex == 0)
                {
                    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["AppBar_1"];
                }
                else if (pivot.SelectedIndex == 1)
                {
                    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["AppBar_2"];
    
                }
                else if (pivot.SelectedIndex == 2)
                {
                    ApplicationBar =null ;
                }
            }

     效果就是前面那个GIF的效果,但是你现在回去看前面那个GIF会发现切换的时候有个黑条,发生在AppBar改变高度的时候,在我实际使用中如果再在加上AppBarMenu的话,会产生更明显的黑条,并造成非常非常非常非常明显的卡顿。(手头的机子是920)

    这个问题简直神坑,网上资料很少,所以我就传播一下找到的方法吧(●'◡'●),让AppBar”拥有透明特性“,即让opacity(透明度)不等于1。如果你想要的是纯色不透明的效果(其实也只有这种情况才会遇到这个问题。。。),opacity(透明度)设置为0.99,可以解决黑条问题,而且看起来仍然是纯色不透明的。

    <phone:PhoneApplicationPage.Resources>
            <shell:ApplicationBar x:Key="AppBar_1" BackgroundColor="Silver" Mode="Default" IsVisible="True" Opacity="0.99">
                <shell:ApplicationBarIconButton IconUri="/Assets/AppBar1/add.png" Text="添加"/>
                <shell:ApplicationBarIconButton IconUri="/Assets/AppBar2/check.png" Text="确认"/>
            </shell:ApplicationBar>
            <shell:ApplicationBar x:Key="AppBar_2" BackgroundColor="Silver" IsMenuEnabled="True" Mode="Minimized" IsVisible="True" Opacity="0.99">
            </shell:ApplicationBar>
        </phone:PhoneApplicationPage.Resources>

     这样解决了黑条问题以及性能问题,事情会变成这样,怎么想都是微软的错。。。

    下面的GIF就是opacity改成0.99后的效果,和前图的视觉效果没什么差,但是没有黑条流畅多了。

        解释:以我的理解,如果AppBar的opacity为1,就会被认为是完全不透明,于是AppBar的”底下“就没必要加载应用的”UI的元素“,反正也看不到,所以它底下就是空白的frame页面,颜色和背景色的黑白设定一致(多数人是选的是黑色背景)。这时如果AppBar高度降低或者消失,一瞬间就会暴露底下的frame,让你看到相同大小的黑条或者白条,然后在frame上加载应有的UI元素(比如背景图案之类的),这也造成了一些卡顿感。。。如果AppBar是半透明的,它底下就是的UI元素在一开始就是加载好的(这样你才能透过AppBar看到它们),就不会出现黑条/白条,也不卡了。

      有时候我们希望AppBar是纯色不透明的,把opacity设置为0.99,正常人看不出差异,但是系统认为他是半透明的。

  • 相关阅读:
    jQuery内核详解与实践读书笔记2:破解jQuery选择器接口1
    jQuery内核详解与实践读书笔记1:原型技术分解2
    jQuery内核详解与实践读书笔记1:原型技术分解1
    MyEclipse常用配置图解
    python3-datetime.date详解(一)
    PYTHON3-LIST.SORT(),SORTED()方法详解。
    为什么要学习?
    sqlserver数据库 Schema
    Nop源码分析三
    Nop源码分析二
  • 原文地址:https://www.cnblogs.com/aureate-sunshine/p/4288409.html
Copyright © 2011-2022 走看看