如何自訂傳統型應用程式的開始畫面磚 (Windows 執行階段應用程式)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

從 Windows 8.1 開始，Win32 應用程式開發人員就能夠自訂傳統型應用程式磚在 [開始] 畫面上的外觀。在 Windows 8 中，這些磚只能由系統提供，無法由開發人員自訂。磚中的應用程式圖示是根據 [開始] 畫面的背景色彩來顯示。Windows 8.1 提供更多樣化的預設磚外觀，但也可讓您利用自己的色彩和影像，進一步為磚添加品牌色彩。

傳統型應用程式磚可用的自訂項目：

自訂的跨頁影像
指定的背景色彩
在磚上顯示或隱藏應用程式名稱的選項
如果您選擇顯示應用程式名稱，指定要使用淺色或深色文字色彩

您可以完整自訂磚，但也應該了解變更預設磚外觀對您而言可能就已足夠。Windows 指派給您應用程式的預設磚仍然是顯示應用程式名稱和應用程式圖示的中型磚。但是，從 Windows 8.1 開始，配置已變更，Windows 會從應用程式的圖示提取色彩，以便在該圖示周圍提供類似或相配的背景色彩。

下圖顯示使用相同 [開始] 畫面背景色彩的相同預設磚，在 Windows 8 和 Windows 8.1 中的外觀。

針對 Windows 8 和 Windows 8.1 顯示的 Microsoft Office 磚

如果您選擇進一步自訂磚，可透過特殊的 XML 檔案進行。這個檔案所使用的結構描述類似於 Windows 市集應用程式磚所使用的磚結構描述，但請不要將它們混為一談—這兩種結構描述不可互換。本主題將為您逐步解說如何建立下列範例檔案；其中除了 Square150x150Logo 和 Square70x70Logo 屬性是選用屬性之外，其他屬性都是必要屬性。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

先決條件

了解 XML
了解命令列參數
了解適用於影像調整、高對比和當地語系化版本的資源命名和封裝。如需詳細資訊，請參閱如何使用限定詞命名資源。

指示

步驟 1: 建立自訂 XML 檔案

指定磚的自訂
與您的可執行檔放在相同目錄
與您的可執行檔使用相同名稱，而副檔名為 ".VisualElementsManifest.xml"。例如，對於可執行檔 "contoso.exe" 而言，伴隨的 XML 檔案名稱就是 "contoso.visualelementsmanifest.xml"。

將下列程式碼新增至您建立的 XML 檔案。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

步驟 2: 宣告背景色彩

必要
指定為任一個 RGB 十六進位值或下列其中一個預先定義的字串：
- 黑色
- 銀色
- 灰色
- 白色
- 暗紅色
- 紅色
- 紫色
- 桃紅色
- 綠色
- 檸檬色
- 橄欖色
- 黃色
- 海軍藍
- 藍色
- 藍綠色
- 青色

以下說明用來表示色彩值的兩種方法：


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

步驟 3: 宣告是否要在磚上顯示應用程式的名稱

必要
ShowNameOnSquare150x150Logo 屬性有兩個可能值：
- "on" 可顯示名稱
- "off" 可隱藏名稱
只有中型 (150x150) 磚大小才會顯示應用程式名稱。

應用程式名稱是應用程式的 [開始] 功能表捷徑檔名稱，如果捷徑檔不存在，則是它的可執行檔名稱。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

步驟 4: 宣告前景文字色彩

必要，即使 ShowNameOnSquare150x150Logo="off"
是指磚上的應用程式名稱。
ForegroundText 屬性有兩個可能值：
- "light" 用於白色文字
- "dark" 用於黑色文字

根據您宣告的背景色彩，選擇最佳的顯示值。為了獲得最佳可見度和可存取性，文字色彩與背景色彩的亮度對比率至少要維持 4.5:1。如需詳細資訊，請參閱 W3C 協助工具標準 G18：確定文字 (和文字的影像) 和文字背景之間的對比率至少是 4.5:1。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

步驟 5: 指定影像

選用
提供跨頁影像以取代預設圖示和背景
只支援中型 (150x150) 和小型 (70x70) 磚大小
適用標準磚影像限制：
- 尺寸不超過 1024x1024 個像素
- 檔案大小不超過 200 KB
- 檔案類型為 .png、.jpg、.jpeg 或 .gif

重要如果您選擇自訂影像，就必須指定適用於 Square150x150Logo 和 Square70x70Logo 屬性的影像。如果您只指定其中一種屬性，則會忽略這整個 XML 檔案，並將預設樣式 (應用程式圖示和背景) 套用到磚。

磚設計最佳做法指定您的磚不是動態磚時，不應占用寬型 (310x150) 磚和大型 (310x310) 磚所需的額外螢幕空間。由於傳統型應用程式的磚一律為靜態而不是動態的，所以此結構描述不支援這些其他的磚大小。

在這個範例中，影像位於一個名為 "Assets" 的資料夾中，此資料夾與 YourAppName.VisualElementsManifest.xml 檔案同層級。這些檔案名稱可以是真實的檔案名稱，也可以是步驟 6 中討論的已縮放、高對比或當地語系化檔案所使用的一般名稱。如需有關影像資產命名的討論，請參閱＜備註＞一節。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

現在這就是完整的 .VisualElementsManifest.xml。將此檔案納入應用程式安裝，做為應用程式可執行檔的同層級。

步驟 6: 針對縮放、當地語系化和高對比指定影像

可省略，但建議進行：
如果您不提供已縮放、高對比和當地語系化的影像，則可略過此步驟
為了獲得最佳顯示品質，請為步驟 5 指定的每個影像提供一組完整的縮放資產。如需詳細資料，請參閱＜備註＞一節。
使用標準資源管理系統命名慣例和 Resource.pri 檔案

注意如果您不提供一組完整的縮放資產，Windows 會視需要調整您包含的一或多個資產。最好包含一個較大的大小 (140% 或 180%)，因為縮小的結果通常比放大好。

Windows 會使用 Resources.pri 檔案，根據磚更新時作用中的系統設定，在您提供的一組資產中，選擇正確的影像資產。我們將在這個步驟中建立該檔案。

**建立工作資料夾。**此資料夾不會包含在您的應用程式安裝中；只在 Resources.pri 檔案建立期間使用。在這個範例中，我們將它稱為 "CreateResources"。
```
md %USERPROFILE%\Documents\CreateResources
```
**建立 CreateResources 的子目錄以保存影像檔案。**在這個範例中，我們將它稱為 "Assets"。
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
將已縮放、高對比和/或當地語系化的影像放入 "Assets" 資料夾。 只要您遵循必要的命名和結構慣例，就可以利用一般清單的形式來包含影像，或者建構於子目錄中。針對這個範例的目的，我們將利用一般清單的形式來提供下列已縮放的高對比資產。
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
**建立 MakePRI 設定檔。**MakePRI.exe 會使用這個 XML 檔案，來指定要在 Resources.pri 中為哪些影像編製索引。執行下列命令來建立設定檔，我們將它稱為 "TestAppConfig.xml"。請注意，我們不會將該檔案寫入 CreateResources 資料夾。這樣可防止索引包含設定檔本身。

重要 MakePRI.exe 命令列工具包含於 Windows SDK 中，可供免費下載。如果您使用 Microsoft Visual Studio，則安裝過程中應該已經將 MakePRI.exe 放在您的系統上。

這個命令和下個命令都會假設您的路徑已包含 MakePRI.exe 的位置。若否，請在 "Program Files\Windows Kits" 之下搜尋，並在這些命令中包含其完整路徑。
```
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high
```
命令引數定義

/cf 您要建立的設定檔的路徑和名稱

/dq 預設限定詞。必須至少使用一個限定詞 (lang、scale 等)。

命令引數	定義
/cf	您要建立的設定檔的路徑和名稱
/dq	預設限定詞。必須至少使用一個限定詞 (lang、scale 等)。

建立 Resources.pri 檔案。 執行下列命令，這個命令會使用您剛建立的 TestAppConfig.xml 設定檔，在 CreateResources 目錄中產生 Resources.pri 檔案。


makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri

命令引數	定義
/pr	專案檔的根目錄位置
/cf	設定 XML 檔案的路徑
/in	Resources.pri 檔案內的資源索引名稱。通常與應用程式的名稱相符。
/of	Resources.pri 檔案的輸出位置。若省略，會使用以 /pr 引數所指定的專案根目錄。

**在應用程式安裝中包含 Resources.pri 檔案。**將它與應用程式的 .exe 檔案和它的 .VisualElementsManifest.xml 檔案放在相同位置。在安裝期間，要先將 .VisualElementsManifest.xml 就定位，再安裝應用程式的捷徑檔。

步驟 7: 重要！重新整理您的捷徑檔

如果您已經安裝應用程式，就必須在將新或更新的 .VisualElementsManifest.xml 就定位之後微調捷徑，否則將會忽略該捷徑。儘管有許多方法可以完成這個作業，但是下列虛構 Contoso 應用程式所用的 Windows PowerShell 命令範例是完成這個作業的其中一個模型。


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

備註

重要如果您的 .VisualElementsManifest.xml 檔案有任何不妥，磚會還原為 Windows 提供的預設值。可能發生的檔案錯誤包含無效的 XML 檔案、省略必要的屬性、無效的屬性值，或者找不到的影像。

您可以將 MakePRI.exe 檔案與 dump 命令選項搭配使用，以檢查 Resources.pri 檔案的內容。這在進行疑難排解時非常有用。如需 MakePRI.exe 工具的詳細資訊，請參閱 MakePRI.exe 設定和 MakePRI.exe 命令選項。

進行疑難排解時，您也可以在 [應用程式及服務記錄檔]\Microsoft\Windows\Shell-Core\Operational 記錄中，使用 [事件檢視器] 來檢查 28032 事件。事件詳細資料包含 .VisualElementsManifest.xml 檔案的路徑、HRESULT 錯誤碼，以及錯誤字串 (如果提供)。

使用資源管理系統

雖然詳細說明資源管理系統並不在本主題涵蓋的範圍內，但是我們會在此提供大略的概觀。如需深入的討論，請閱讀資源管理系統主題。

一組完整的資源影像包括下列各項：

適合每一種 DPI 縮放倍數的個別影像 (80%、100%、140% 和 180%)
每個影像的高對比版本 (黑底白字及白底黑字)
當地語系化的影像 (如果要讓磚根據系統語言使用不同影像，例如當影像包含文字時)。

您可以提供上述所有影像，也可以只提供子集。

您的檔案名稱將遵循模式 name.scale-100.ext、name.scale-100_contrast-black.ext，依此類推。您也可以透過目錄結構 (而非在檔案名稱中) 提供限定詞。不過，在您的 .VisualElementsManifest.xml 檔案中，只能參考檔案的根目錄 name。例如，您可以針對中型磚大小提供下列檔案：

70x70Logo.scale-80.png
70x70Logo.scale-100.png
70x70Logo.scale-140.png
70x70Logo.scale-180.png
70x70Logo.scale-80_contrast-white.png
70x70Logo.scale-100_contrast-white.png
70x70Logo.scale-140_contrast-white.png
70x70Logo.scale-180_contrast-white.png
70x70Logo.scale-80_contrast-black.png
70x70Logo.scale-100_contrast-black.png
70x70Logo.scale-140_contrast-black.png
70x70Logo.scale-180_contrast-black.png

不過，在您的 .VisualElementsManifest.xml 檔案中，只能像此處的範例一樣參考 "70x70Logo.png"。根據目前的系統設定，Windows 會使用 Resources.pri 檔案，在列出的所有選項中選取 70x70Logo 檔案的正確版本。如需命名慣例的完整教學課程，以便讓這個系統正常運作，請參閱快速入門：使用檔案或影像資源。

傳統型應用程式磚自訂 XSD

傳統型應用程式磚自訂中所使用的結構描述 XSD，如下所示。


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>