为什么我使用 Apache Cordova 构建的 Windows 10 通用应用程序的任务栏图标大小比其他应用程序小？

Question

为什么我使用 Apache Cordova 构建的 Windows 10 通用应用程序的任务栏图标大小比其他应用程序小？

cordovavisual-studio-2015uwpwindows-10-universal

6

我正在使用Visual Studio 2015和Apache Cordova制作我的UWP应用程序。但是，我的应用程序的任务栏图标看起来比旁边的所有其他应用程序都要小。

我的应用程序显示了最右侧的图标。正如您所看到的，它比放置在其左侧的所有其他图标都要小（看起来像四周都有填充的版本）。

这是实际的Square44x44Logo.scale-100.png，如下所示，我的图像中没有填充。

我遵循了Visual Studios的Apache Cordova项目模板，这是我的config.xml中图标声明。

   <platform name="windows">
        <icon height="150" src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" />
        <icon height="360" src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" />
        <icon height="30" src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" />
        <icon height="310" src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" />
        <icon height="106" src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" />
        <icon height="70" src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" />
        <icon height="170" src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" />
        <icon height="50" src="res/icons/windows/StoreLogo.scale-100.png" width="50" />
        <icon height="120" src="res/icons/windows/StoreLogo.scale-240.png" width="120" />
        <icon height="150" src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" />
        <icon height="360" src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" />
        <icon height="44" src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" />
        <icon height="71" src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" />
    </platform>

问题

如何使我的应用程序在任务栏上的图标与其左侧存在的所有其他图标相等。

有什么想法吗？

谢谢。

问题解决后编辑

只是想分享成果。感谢@TruthSeeker，现在我的任务栏图标看起来像这样，

谢谢 :)

- Suman Barick

我按照 https://cordova.apache.org/docs/en/latest/config_ref/images.html#windows 的步骤进行操作，对我来说效果很好。你可以试一下，如果还是出现同样的错误，可以尝试设置不同的随机图标进行测试。 - Naitik

2个回答

1

默认情况下，它使用的是一个镀铬图标。您可以按照以下步骤为 Windows 平台创建一个未镀铬图标：

从原始图像创建一个 48x48 的图标图像。
将其复制到两个文件中："Square44x44Logo.targetsize-48.png" 和 "Square44x44Logo.targetsize-48_altform-unplated.png"。
将它们复制到项目文件夹->平台->Windows->images 文件夹中。
运行应用程序，您将看到更改。

有关 Windows 平台上图标的详细信息，请参阅此文档：磁贴和图标资产指南。

- Elvis Xia - MSFT

不工作 :( 我也看到了那个网址... 但是没有 “可扩展列表资产无板”... 我正在使用 Visual Studio 的默认 config.xml 模板，它有 基于比例的资产，但没有 基于目标大小的资产。 - Suman Barick

嘿，我猜我之前做错了什么。这种方法也可以工作。但我认为我们应该只在我们的工作目录res中完成工作，并在config.xml中列出配置...（这种方法看起来更像是一种hack，虽然我喜欢hack :D）但无论如何，还是谢谢你的答案。 - Suman Barick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TruthSeeker · Accepted Answer

将东西直接更改到项目文件夹->平台->Windows->图像文件夹可能会起作用，但我不认为这是一个好主意。相反，我们应该将图像资源放入res文件夹，并让Visual Studio在构建期间将它们放置到正确的位置。

因此，请尝试以下步骤：

创建一个48像素x 48像素的png版本的图标图片
将其保存为Square44x44Logo.targetsize-48.png和Square44x44Logo.targetsize-48_altform-unplated.png
将这两个文件复制到您的项目的res\icons\windows文件夹中
现在，编辑config.xml文件的时间到了

在您的config.xml中添加这2个文件(在您拥有的任何内容之后，它应该可行)

<icon src="res/icons/windows/Square44x44Logo.targetsize-48.png" target="Square44x44Logo"/>
<icon src="res/icons/windows/Square44x44Logo.targetsize-48_altform-unplated.png" target="Square44x44Logo" />

现在，构建并运行你的应用程序。

如果仍然不起作用，请清空文件夹项目文件夹->平台->Windows->图像，然后再次运行它。现在，你将能够看到一个未镀铬的瓷砖。

希望这有所帮助。

谢谢。