Question

我为我的windows uwp应用程序构建了一个扩展的启动画面。我从这个页面跟踪了包含xaml for extended spash screen的示例代码

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

以下是移动设备上的内容，左侧图像是初始启动画面，右侧是扩展启动画面。

扩展启动页面的我的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 x x 600 h）

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

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

编辑：我的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));

}

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

Answer 2

为什么还没有设置另一个比例尺寸？只需添加它们然后再试一次看起来您的手机没有Scale 200

Answer 3

我有同样的问题。实际上，在移动设备上返回的防溅板的高度和宽度是错误的。它返回屏幕的大小而不是!!!!见上图（高度= 1280宽度= 720，当实际的防溅板宽度大于高度时。我尝试通过使用屏幕的宽度并猜测所使用的防溅板的大小并将其除以scle因子来重新计算防溅屏尺寸，但是由于蜿蜒或其他因素而存在小的尺寸差异.... 如果有人知道更好的方法来计算正确的大小而不是猜测......那就太好了。

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
{
    ScaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
    double screenwidth = _splashImageRect.Width;
    if (screenwidth <= 1240) 
    {
        // small screen will use the splashscreen scale 100 - 620x300
        ExtendedSplashImage.Height = 300 / ScaleFactor;
        ExtendedSplashImage.Width = 620 / ScaleFactor;
    }
    else if (screenwidth > 1240 && screenwidth <= 2480)
    {
        // medium screen will use the splashscreen scale 200 - 1240x600
        ExtendedSplashImage.Height = (600 / ScaleFactor);
        ExtendedSplashImage.Width = (1240 / ScaleFactor);
    }
    else if (screenwidth > 2480)
    {
        // big screen will use the splashscreen scale 400 - 2480x1200
        ExtendedSplashImage.Height = 1200 / ScaleFactor;
        ExtendedSplashImage.Width = 2480 / ScaleFactor;
    }
}
else
{
    ExtendedSplashImage.Height = splashImageRect.Height;
    ExtendedSplashImage.Width = splashImageRect.Width;
}

Answer 4

我找到了移动设备的解决方案，如果您尝试与其他应用分享您的应用：

private void PositionImage()
{    
    if(Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))            
    {
        double screenWidth = _splashImageRect.Width;
        ExtendedSplashImage.Width = screenWidth/ ScaleFactor;
        // use the ratio of your splashscreen to calculate the height
        ExtendedSplashImage.Height = ((screenWidth / ScaleFactor) * 600) / 1240;
    }
    else
    {
        // if the app is shared with another app the _splashImageRect is not returns properly too
        if (_splashImageRect.Width > windowContext.VisibleBounds.Width || _splashImageRect.Width < 1)
        {
            ExtendedSplashImage.Width = windowContext.VisibleBounds.Width;
            // use the ratio of your splashscreen to calculate the height
            ExtendedSplashImage.Height = ((windowContext.VisibleBounds.Width) * 600) / 1240;
        }
        else
        {
            ExtendedSplashImage.Height = _splashImageRect.Height;
            ExtendedSplashImage.Width = _splashImageRect.Width;
        }
    }

    Double left = windowContext.VisibleBounds.Width / 2 - ExtendedSplashImage.ActualWidth / 2;
    Double top = windowContext.VisibleBounds.Height / 2 - ExtendedSplashImage.ActualHeight / 2;
    ExtendedSplashImage.SetValue(Canvas.LeftProperty, left);
    ExtendedSplashImage.SetValue(Canvas.TopProperty, top);

    ProgressRing.SetValue(Canvas.LeftProperty, left + ExtendedSplashImage.ActualWidth / 2 - ProgressRing.Width / 2);
    ProgressRing.SetValue(Canvas.TopProperty, top + ExtendedSplashImage.ActualHeight);

}

移动设备上的Windows UWP扩展启动画面图像渲染错误

4 个答案: