如何解决 windows phone 8 应用程序中的此应用栏显示问题？答案

【问题标题】：How to solve this App bar display issue in windows phone 8 application?如何解决 windows phone 8 应用程序中的此应用栏显示问题？
【发布时间】：2014-03-21 05:58:53
【问题描述】：

我正在开发 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>

无App条码输出：-

带应用条码：-

【问题讨论】：

标签： c# xaml windows-phone-8

【解决方案1】：

问题在于您如何定义图像及其边距。我必须说我不太确定它为什么会发生，但问题可能涉及在 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>

我还建议不要将 Margin 用于您的商品的“全球”定位 - 它会在很多地方搞砸（不同的手机（分辨率）等等）。而是使用更多行/列并按百分比定义它们的高度/宽度（例如“2*”）。

【讨论】：

是的你是正确的我只是改变我的代码现在可以正常工作了，感谢您在“2*”中设置高度

【解决方案2】：

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

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

步骤：右键单击此图像 -> 属性 -> 构建操作：内容。

【讨论】：

这不是问题。 OP 是在问为什么他的图像被截断，而不是他没有看到 AppBarButton 的图标。
对不起，我误解了这个问题

【解决方案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>

【讨论】：