Question

I have a Windows Phone 7.1 Mango application where I have mostly successfully overridden the built in theme colors. However, if the user has the white theme selected and the page has a dark background and dark application bar, the application bar gets rendered and animated with a white background which causes an annoying flicker. After it gets done animating the background color gets sets to a dark color appropriately.

Is there a way to either disable the app bar animation or set its initial animation background color?

See this video capture of the flickering issue.

Xaml:

<phone:PhoneApplicationPage x:Class="AppBarFlickers.Page1"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="728"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait">
    <Grid Background="Black">
        <Button Content="Toggle App Bar"
                Margin="100,185,100,0"
                VerticalAlignment="Top"
                Click="ButtonClick"
                Foreground="White"
                Background="Black"
                BorderBrush="White" />
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar BackgroundColor="Black"
                              ForegroundColor="White">
            <shell:ApplicationBarIconButton IconUri="/icon.png"
                                            Text="Button 1" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

Code behind:

public partial class Page1
{
   public Page1()
   {
       InitializeComponent();
   }

   private void ButtonClick(object sender, RoutedEventArgs e)
   {
       ApplicationBar.IsVisible = !ApplicationBar.IsVisible;
   }
}

Answer 1

Looks like the background isn’t loaded while the ApplicationBar is hiding. It hides the bar, then load the background, hence the flickering.

Found a workaround: set the opacity of the applicationbar to 0.99. It’s high enough for the transparency to be invisible, and it will force the application to load the background.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar BackgroundColor="Black" ForegroundColor="White" Opacity=".99" >
        <shell:ApplicationBarIconButton IconUri="/icon.png" Text="Button 1" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>