如何在windows phone 8应用程序中解决此App栏显示问题？

Question

我正在开发WP8应用程序。我需要在菜单页面添加应用程序栏。

使用以下代码添加应用栏。

但是当存在应用条形码时，按钮图像会隐藏。

告诉我哪里弄错了。怎么解决这个？

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

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

没有应用条形码输出： -

使用App条形码： -

Answer 1

1：确认路径中存在“appbar.add.rest.png”图片：/ Assets / AppBar /

2：将图片（“appbar.add.rest.png”）的构建动作设置为内容。

步骤：右键单击此图片 - ＆gt;属性 - ＆gt;构建行动：内容。

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>