CODEWITHSUNDEEP
c#xamlwindows-phone-8windows-phone
Inder Kumar Rathore
Inder Kumar Rathore

Reputation: 40018

ApplicaionBar shows black background while hiding or showing

The problem is that when my device's theme is set to dark there comes a black background during animation of showing and hiding of ApplicationBar. I either want white or none in background.

Here is a video that shows it

My XAML file

<phone:PhoneApplicationPage
    x:Class="AppBarTest.MainPage"
    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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="False" IsVisible="True" BackgroundColor="#AAAAAA" ForegroundColor="Black">
            <shell:ApplicationBarIconButton IconUri="/Assets/add.png" Text="add"/>
            <shell:ApplicationBarIconButton IconUri="/Assets/delete.png" Text="delete"/>
            <shell:ApplicationBarIconButton IconUri="/Assets/feature.camera.png" Text="camera"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    <Grid Background="White">
        <Button Content="Hide/Show" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" Background="Green" Click="Button_Click" Margin="112,66,122,0" Height="150" Width="246"/>
    </Grid>
</phone:PhoneApplicationPage>


And my CS file

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

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

Upvotes: 1

Views: 389

Answers (1)

Matt Lacey
Matt Lacey

Reputation: 65586

This behaviour is due to the ApplicationBar not actually being part of the page but actually being part of the shell.

When the ApplicationBar is included it adjusts the size of the space available to the app. Your page does not therefore occupy the space that was behind the ApplicationBar and so the default background colour shows through.

The simplest way to change this is to not have an opaque ApplicationBar. By adding a level of transparency (even 1%) to the ApplicationBar it is displayed on top of your page, not below it.
This will address your issue when hiding the ApplicationBar but you will now need to handle content being displayed behind it.

Upvotes: 2

Related Questions