如何在Windows Phone 8應用程序中解決此應用欄顯示問題？

Question

我正在開發WP8應用程序。 我需要在菜單頁面中添加應用程序欄。

使用以下代碼，我添加了應用欄。

但是當存在應用程序條形碼時，按鈕圖像會隱藏。

告訴我我在哪里犯錯了。 如何解決呢？

應用欄代碼

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代碼

<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>

沒有應用條形碼輸出：-

帶有應用條形碼：

Answer 1

1：確認圖像“ appbar.add.rest.png”存在於以下路徑：/ Assets / AppBar /

2：將圖像（“ appbar.add.rest.png”）的構建動作設置為“內容”。

步驟：右鍵單擊此圖像->屬性->構建操作：內容。

Answer 2

問題是如何定義圖像及其邊距。 我必須說我不太清楚為什么會發生這種情況，但是問題可能是，在xaml中為整個頁面定義邊距，但是當您創建AppBar時，它會從底部開始占用72像素（這可能是圖像的值切除一部分）。 嘗試以下操作-無需特別注意底邊距：

<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>

我還建議不要將“保證金”用於商品的“全球”定位-它會在許多地方（不同的電話（分辨率）等等）造成問題。 而是使用更多的行/列，並按百分比定義其高度/寬度（例如“ 2 *”）。

Answer 3

這是因為您的兩個按鈕的下邊距為427。沒有應用程序欄，就足夠了。 但是，一旦添加了應用欄，按鈕和屏幕底部邊緣之間的距離就會縮短。

只需刪除按鈕的邊距，然后將它們放入StackPanel中，如下所示：

    <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>