How to solve this App bar display issue in windows phone 8 application?

Question

I'm developing WP8 application . i need to add application bar in menu page.

with following code i add the app bar.

but button image hide when app bar code is present .

tell me where i made mistake . how to solve this?

Code For App Bar

public MainPage()
{
    InitializeComponent();
    BuildLocalizedApplicationBar();
}


private void BuildLocalizedApplicationBar()
{
    ApplicationBar = new ApplicationBar();

    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
    appBarButton.Text = AppResources.AppBarButtonText;
    ApplicationBar.Buttons.Add(appBarButton);

    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
    ApplicationBar.MenuItems.Add(appBarMenuItem);
}

XAML Code

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>


    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    </StackPanel>


    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,0">
        <Button x:Name="Stay" BorderThickness="0" Width="160" HorizontalAlignment="Left" Margin="0,128,0,427">
        <Image Name="stayimg" Source="Assets/Images/Icons/stay_up.png" Stretch="Uniform" Height="139" Width="133"></Image>
        </Button>

        <Button x:Name="Eat"  BorderThickness="0" Width="155" HorizontalAlignment="Left" Margin="165,128,0,427">
        <Image Name="Eatimg" Source="Assets/Images/Icons/eat_up.png" Stretch="Uniform" Height="139" Width="133"></Image>
        </Button>          
   </Grid>
</Grid>

Without App Bar Code Output:-

With App Bar Code:-

Answer 1

1：confirm the image "appbar.add.rest.png" is exist in the path:/Assets/AppBar/

2: set the image（"appbar.add.rest.png"）'s build action to Content.

Steps: right click this image -> properties -> Build Action: Content.

Answer 2

The problem is how you define your Image and its margin. I must say that I'm not quite sure why it happens, but the problem may be concerned that in xaml you define margin for the whole Page, but when you create AppBar it takes 72 pixes from bottom (that is probably the value of image's cut off part). Try this - without specyfing bottom margin:

<Button x:Name="Stay" BorderThickness="0" Width="160" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,128,0,0">
     <Image Name="stayimg" Source="Resources/firstImage.png" Stretch="Uniform" Height="139" Width="133"></Image>
</Button>

I would also advise not to use Margin for 'global' positioning of your items - it will screw up in many places (different phones (resolutions) and so on). Instead use more Rows/Columns and define their height/width by percentage ("2*" for example).

Answer 3

It is because your two buttons have the bottom margin of 427. Without the application bar it is just enough. But once the application bar is added the distance between the button and the screen bottom edge is shortened.

Just remove the margins for the buttons and put them into a StackPanel like this:

    <StackPanel Grid.Row="1" Margin="10,0,14,0" Orientation="Horizontal">
        <Button x:Name="Stay" BorderThickness="0" Width="160" HorizontalAlignment="Left">
            <Image Name="stayimg" Source="Assets/ApplicationIcon.png" Stretch="Uniform" Height="139" Width="133"></Image>
        </Button>

        <Button x:Name="Eat"  BorderThickness="0" Width="155" HorizontalAlignment="Left">
            <Image Name="Eatimg" Source="Assets/ApplicationIcon.png" Stretch="Uniform" Height="139" Width="133"></Image>
        </Button>
    </StackPanel>