<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，正常人看不出差异，但是系统认为他是半透明的。