xaml - Windows UWP Extended 初始屏幕图像在移动设备上的渲染不正确

标签 xaml win-universal-app

我为我的 windows uwp 应用程序构建了一个扩展的启动画面。我遵循了示例代码,包括来自此页面的扩展闪屏的 xaml

Display a splash screen for more time

它在桌面窗口上正确呈现,完美居中并与初始启动屏幕图像完全对齐,但是当我尝试移动模拟器时,(我尝试了 720p 的 5 英寸屏幕之一)扩展启动屏幕页面图像似乎太大(它看起来几乎大了两倍或三倍),并且出现在页面的右下角被截断,我假设进度环位于图像下方并且超出页面边界,因此它不可见。

这是它在移动设备上的样子,左图是初始启动画面,右图是扩展启动页面。

enter image description here

我的扩展启动页面的 XAML 是这样的

<Page
    x:Class="MyApp_Win10.ExtendedSplash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp_Win10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#FF000012" >
        <Canvas>
        <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen/SplashScreenImage3.png"/>
        <ProgressRing Name="splashProgressRing"   IsActive="True" Width="60" Height="60"  HorizontalAlignment="Center"></ProgressRing>
        </Canvas>
    </Grid>
</Page>

我的 package.appmanifest 看起来像这样。 (Assets forlder 中有一张图片被创建为 SplashScreenImage3.scale-200.png,尺寸为 1240 w x 600 h)

enter image description here

编辑:我将剩余的 3 个图像比例 150、125 和 100 添加到 package.appmanifest 中,但没有任何区别。由于扩展的初始页面与初始初始页面不同,我认为它正在选择我在 XAML 中编写的确切图像文件 - 它是尺寸为 1240 w x 600 h 的全尺寸。

同样在扩展启动画面的代码隐藏中,这些是启动画面的坐标

enter image description here

编辑:我的 PositionImage() 和 PositionRing() 函数
void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);

    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;

}

void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width * 0.5) - (splashProgressRing.Width * 0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height * 0.1));

}

最佳答案

确保在您的 PositionImage() 和 PositionRing() 函数中处理设备是电话时的情况,如下所示

void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        extendedSplashImage.Height = splashImageRect.Height / ScaleFactor;
        extendedSplashImage.Width = splashImageRect.Width / ScaleFactor;
    }
    else
    {
        extendedSplashImage.Height = splashImageRect.Height;
        extendedSplashImage.Width = splashImageRect.Width;
    }
}

void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width * 0.5) - (splashProgressRing.Width * 0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height * 0.1));

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        splashProgressRing.Height = splashProgressRing.Height / ScaleFactor;
        splashProgressRing.Width = splashProgressRing.Width / ScaleFactor;
    }
}


//Variable to hold the device scale factor (use to determine phone screen resolution)
private double ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel; 

关于xaml - Windows UWP Extended 初始屏幕图像在移动设备上的渲染不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36958367/

相关文章:

xaml - 如果 observablecollection 为 null,如何隐藏 Textblock

wpf - 自定义控件不继承父级的样式

deployment - 无法使用Windows 10 Mobile Tech Preview将通用应用程序部署到手机

配置 Visual Studio 2015 - Windows 10 项目

c# - MediaElement 网络视频不会停止缓冲

c# - 在 UWP 中,有没有一种方法可以让列相互环绕?

xaml - Xamarin XAML 条件样式

c# - 如何在嵌套元素上设置视觉状态?

c# - 在 UWP 中设置有效日期列表 CalendarDatePicker

c# - 使用 Windows 通用应用程序将图像上传到 mysql 数据库