背景图像在 UWP 的移动视图中不可见（适用于 Windows-10 的 Windows 通用应用程序）？答案

【问题标题】：Background Image in not visible in Mobile view in UWP (Windows Universal app for Windows-10)?背景图像在 UWP 的移动视图中不可见（适用于 Windows-10 的 Windows 通用应用程序）？
【发布时间】：2016-11-09 08:44:09
【问题描述】：

我正在开发 UWP（通用 Windows 平台应用程序）。我有关于移动视图的问题。我在应用程序的登录页面中设置了图像背景。它在所有视图（表格和桌面）中都正确可见，但是当我在模拟器（移动视图）中打开应用程序时，背景图像不可见并且背景为黑色。

代码：

<Grid x:Name="login_page">
        <Grid.Background>
            <ImageBrush Stretch="UniformToFill" ImageSource="Images/LoginImages/login_bg01.png"/>
        </Grid.Background>

VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>


                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="420" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>




                    </VisualState.Setters>
                </VisualState>

                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="320" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>

 <Setter Target="txtname.Height" Value="40"></Setter>
                        <Setter Target="pwdbox.Height" Value="40"></Setter>
                        <Setter Target="txturl.Height" Value="40"></Setter>

 </VisualState.Setters>
                </VisualState>
                <VisualState>

<VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
  <Setter Target="pwdbox.Height" Value="60"></Setter>
                        <Setter Target="txturl.Height" Value="60"></Setter>
                    </VisualState.Setters>
                </VisualState>
  </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
 <Grid Name="maingrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

//Here define three textblock
<StackPanel  Grid.Row="4" Orientation="Horizontal"  Margin="0,0,0,0">
 <TextBlock  x:Name="uname">
  <TextBlock x:Name="email">
<TextBlock  x:Name="password">
   </StackPanel>
/Grid>


    </Grid>

图片

【问题讨论】：

你的模拟器版本是多少？我已经在我的 10586 模拟器中使用 PNG 图像对其进行了测试，效果很好。
@FangPeng-MSFT：模拟器版本是 10.010586.0 WVGA 4 英寸 512 mb。

标签： windows xaml win-universal-app uwp

【解决方案1】：

快速创建一个新的通用应用程序进行测试。仅添加网格背景以查看它是否有效，如果不是简单地使用图像。否则，将您的应用程序的 xaml 逐步添加到新的测试应用程序，直到它停止工作。顺便说一句，您可能还想看看RelativePanel。

【讨论】：

【解决方案2】：

为什么不在网格本身中添加一个图像控件？

<Grid x:Name="login_page">

<Image x:Name="Image1" Source="Images/LoginImages/login_bg01.png"/>
        ..........

/>

【讨论】：

先添加图片，后添加其他图片。

【解决方案3】：

我之前遇到过以相对格式设置Image 或ImageSource 的路径的问题，例如。 Path/To/Image.png。要解决这个问题，请将ms-appx:/// 协议附加到路径中，而不是使用

<ImageBrush Stretch="UniformToFill" ImageSource="Images/LoginImages/login_bg01.png"/>

你有

<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Images/LoginImages/login_bg01.png"/>

【讨论】：