Поделиться через

Адаптивные шаблоны плиток: схема и руководство

  • Статья

Примечание.

Плитки жизни — это функция Windows 10, которая не поддерживается в более поздних версиях Windows. Для новых приложений рекомендуется следовать текущим рекомендациям по значкам приложений.

Ниже приведены элементы и атрибуты, используемые для создания адаптивных плиток. Инструкции и примеры см. в разделе "Создание адаптивных плиток".

Элемент плитки

<tile>
  
  <!-- Child elements -->
  visual
  
</tile>

визуальный элемент

<visual
  version? = integer
  lang? = string
  baseUri? = anyURI
  branding? = "none" | "logo" | "name" | "nameAndLogo"
  addImageQuery? = boolean
  contentId? = string
  displayName? = string >
    
  <!-- Child elements -->
  binding+

</visual>

элемент привязки

<binding
  template = tileTemplateNameV3
  fallback? = tileTemplateNameV1
  lang? = string
  baseUri? = anyURI
  branding? = "none" | "logo" | "name" | "nameAndLogo"
  addImageQuery? = boolean
  contentId? = string
  displayName? = string
  hint-textStacking? = "top" | "center" | "bottom"
  hint-overlay? = [0-100] >

  <!-- Child elements -->
  ( image
  | text
  | group
  )*

</binding>

элемент image

<image
  src = string
  placement? = "inline" | "background" | "peek"
  alt? = string
  addImageQuery? = boolean
  hint-crop? = "none" | "circle"
  hint-removeMargin? = boolean
  hint-align? = "stretch" | "left" | "center" | "right" />

текстовый элемент

<text
  lang? = string
  hint-style? = textStyle
  hint-wrap? = boolean
  hint-maxLines? = integer
  hint-minLines? = integer
  hint-align? = "left" | "center" | "right" >

  <!-- text goes here -->

</text>

значения textStyle: caption CaptionSubtle bodySubtle baseSubtle подзаголовок заголовокSubtle titleSubtle titleSubtle titleNumeral subheaderSubtle subheaderSubtle headerSubtle headerNumeral

элемент group

<group>

  <!-- Child elements -->
  subgroup+

</group>

Элемент подгруппы

<subgroup
  hint-weight? = [0-100]
  hint-textStacking? = "top" | "center" | "bottom" >

  <!-- Child elements -->
  ( text
  | image
  )*

</subgroup>