Criar blocos adaptáveis
Modelos de blocos adaptáveis são um novo recurso no Windows 10, permitindo que você elabore seu próprio conteúdo de notificação de bloco usando uma linguagem de marcação simples e flexível que se adapte a densidades de tela diferentes. Este artigo explica como criar blocos dinâmicos adaptáveis para o seu aplicativo do Windows. Para obter a lista completa de elementos e atributos adaptáveis, consulte o Esquema de blocos adaptáveis.
(Se quiser, você ainda pode usar os modelos predefinidos do Catálogo de modelos de blocos do Windows 8 durante a criação de notificações para o Windows 10.)
Introdução
Instale a biblioteca de notificações. Se você quiser usar a linguagem C# em vez de XML para gerar notificações, instale o pacote NuGet denominado Microsoft.Toolkit.Uwp.Notifications (procure por "notificações uwp"). Os exemplos em linguagem C# fornecidos neste artigo usam o pacote NuGet, versão 1.0.0.
Instale o Visualizador de Notificações. Este aplicativo gratuito do Windows ajuda você a criar blocos dinâmicos adaptáveis fornecendo uma visualização visual instantânea do bloco à medida que você o edita, semelhante ao modo de exibição de design/editor XAML do Visual Studio. Consulte Visualizador de notificações para obter mais informações ou Baixar o Visualizador de notificações da Store.
Como enviar uma notificação de bloco
Leia nosso guia de início rápido sobre como enviar notificações de bloco local. A documentação abaixo explica todas as possibilidades visuais da interface do usuário que você tem com os blocos adaptáveis.
Diretriz de uso
Os modelos adaptáveis são projetados para funcionar em diferentes fatores forma e tipos de notificação. Elementos como grupo e subgrupo vinculam conteúdo e não indicam um determinado comportamento visual próprio. A aparência final de uma notificação deve ser baseada no dispositivo específico no qual ela aparecerá, seja um telefone, tablet, desktop ou outro dispositivo.
Dicas são atributos opcionais que podem ser adicionados aos elementos para obter um comportamento visual específico. As dicas podem ser específicas ao dispositivo ou à notificação.
Um exemplo básico
Este exemplo demonstra o que os modelos de blocos adaptáveis podem produzir.
<tile>
<visual>
<binding template="TileMedium">
...
</binding>
<binding template="TileWide">
<text hint-style="subtitle">Jennifer Parker</text>
<text hint-style="captionSubtle">Photos from our trip</text>
<text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
</binding>
<binding template="TileLarge">
...
</binding>
</visual>
</tile>
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
TileMedium = ...
TileWide = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveText()
{
Text = "Jennifer Parker",
HintStyle = AdaptiveTextStyle.Subtitle
},
new AdaptiveText()
{
Text = "Photos from our trip",
HintStyle = AdaptiveTextStyle.CaptionSubtle
},
new AdaptiveText()
{
Text = "Check out these awesome photos I took while in New Zealand!",
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
}
},
TileLarge = ...
}
};
Resultado:
Tamanhos de bloco
O conteúdo de cada tamanho de bloco é especificado individualmente em elementos TileBinding separados com o conteúdo XML. Escolha o tamanho de destino definindo o atributo template com um dos seguintes valores:
- TileSmall
- TileMedium
- TileWide
- TileLarge (somente para desktop)
Para o conteúdo XML de notificação de um único bloco, forneça elementos <binding> para cada tamanho de bloco para o qual você gostaria de oferecer suporte, conforme mostrado neste exemplo:
<tile>
<visual>
<binding template="TileSmall">
<text>Small</text>
</binding>
<binding template="TileMedium">
<text>Medium</text>
</binding>
<binding template="TileWide">
<text>Wide</text>
</binding>
<binding template="TileLarge">
<text>Large</text>
</binding>
</visual>
</tile>
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
TileSmall = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveText() { Text = "Small" }
}
}
},
TileMedium = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveText() { Text = "Medium" }
}
}
},
TileWide = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveText() { Text = "Wide" }
}
}
},
TileLarge = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveText() { Text = "Large" }
}
}
}
}
};
Resultado:
Consolidação da marca
Você pode controlar a identidade visual na parte inferior de um bloco dinâmico (o nome de exibição e o logotipo de canto) usando o atributo branding no conteúdo da notificação. Você pode optar por exibir "none", somente "name", somente "logo", ou ambos, com "nameAndLogo".
Nota O Windows Mobile não dá suporte ao logotipo do canto, portanto, "logo" e "nameAndLogo" são padrão para "name" no Mobile.
<visual branding="logo">
...
</visual>
new TileVisual()
{
Branding = TileBranding.Logo,
...
}
Resultado:
A identidade visual pode ser aplicada para tamanhos de bloco específicos de uma destas maneiras:
- Aplicando o atributo no elemento TileBinding
- Na aplicação do atributo ao elemento TileVisual, que afeta a carga de notificação inteira Se você não especificar a identidade visual para uma associação, ele usará a identidade visual fornecida no elemento visual.
<tile>
<visual branding="nameAndLogo">
<binding template="TileMedium" branding="logo">
...
</binding>
<!--Inherits branding from visual-->
<binding template="TileWide">
...
</binding>
</visual>
</tile>
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
Branding = TileBranding.NameAndLogo,
TileMedium = new TileBinding()
{
Branding = TileBranding.Logo,
...
},
// Inherits branding from Visual
TileWide = new TileBinding()
{
...
}
}
};
Resultado de identidade visual padrão:
Se você não especificar a identidade visual no conteúdo da notificação, as propriedades do bloco base determinarão a identidade visual. Se o bloco base mostrar o nome de exibição, a identidade visual usará como padrão "name". Caso contrário, a identidade visual usará como padrão "none" se o nome de exibição não for mostrado.
Nota Essa é uma alteração do Windows 8.x, na qual a identidade visual padrão era "logotipo".
Nome de exibição
Você pode substituir o nome de exibição de uma notificação digitando a cadeia de caracteres de texto de sua escolha com o atributo displayName. Assim como na identidade visual, você pode especificar isso no elemento TileVisual, que afeta todo o conteúdo da notificação, ou no elemento TileBinding, que afeta somente blocos individuais.
Problema conhecido No Windows Mobile, se você especificar um ShortName para o bloco, o nome de exibição fornecido na notificação não será usado (o ShortName sempre será exibido).
<tile>
<visual branding="nameAndLogo" displayName="Wednesday 22">
<binding template="TileMedium" displayName="Wed. 22">
...
</binding>
<!--Inherits displayName from visual-->
<binding template="TileWide">
...
</binding>
</visual>
</tile>
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
Branding = TileBranding.NameAndLogo,
DisplayName = "Wednesday 22",
TileMedium = new TileBinding()
{
DisplayName = "Wed. 22",
...
},
// Inherits DisplayName from Visual
TileWide = new TileBinding()
{
...
}
}
};
Resultado:
Texto
O elemento AdaptiveText é usado para exibir texto. Você pode usar dicas para modificar a aparência do texto.
<text>This is a line of text</text>
new AdaptiveText()
{
Text = "This is a line of text"
};
Resultado:
Disposição do texto
Por padrão, o texto não é encapsulado e ultrapassa a borda do bloco. Use o atributo hint-wrap para definir a disposição do texto em um elemento de texto. Você também pode controlar o número mínimo e máximo de linhas usando hint-minLines e hint-maxLines, que aceitam números inteiros positivos.
<text hint-wrap="true">This is a line of wrapping text</text>
new AdaptiveText()
{
Text = "This is a line of wrapping text",
HintWrap = true
};
Resultado:
Estilos de texto
Os estilos controlam o tamanho, a cor e a espessura da fonte dos elementos de texto. Há uma série de estilos disponíveis, incluindo uma variação "sutil" de cada estilo que define a opacidade em 60%, que geralmente torna a cor do texto um tom de cinza-claro.
<text hint-style="base">Header content</text>
<text hint-style="captionSubtle">Subheader content</text>
new AdaptiveText()
{
Text = "Header content",
HintStyle = AdaptiveTextStyle.Base
},
new AdaptiveText()
{
Text = "Subheader content",
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
Resultado:
Nota O estilo usa como padrão legenda se o estilo de dica não for especificado.
Estilos de texto básicos
| <text hint-style="*" /> | Altura da fonte | Espessura da fonte |
|---|---|---|
| caption | 12 pixels efetivos (epx) | Regular |
| body | 15 epx | Regular |
| base | 15 epx | Semibold |
| subtitle | 20 epx | Regular |
| título | 24 epx | Semilight |
| subheader | 34 epx | Claro |
| header | 46 epx | Claro |
Variações numéricas de estilo de texto
Essas variações reduzem a altura da linha para que o conteúdo acima e abaixo se aproxime bem do texto.
titleNumeral
subheaderNumeral
headerNumeral
Variações sutis de estilo de texto
Cada estilo tem uma variação sutil que oferece ao texto uma opacidade de 60%, o que geralmente torna a cor do texto um tom de cinza-claro.
captionSubtle
bodySubtle
baseSubtle
subtitleSubtle
titleSubtle
titleNumeralSubtle
subheaderSubtle
subheaderNumeralSubtle
headerSubtle
headerNumeralSubtle
Alinhamento do texto
O texto pode ser alinhamento horizontalmente à esquerda, ao centro ou à direita. Em idiomas da esquerda para a direita como o inglês, o padrão de texto é alinhado à esquerda. Em idiomas da direita para a esquerda como o árabe, o padrão de texto é alinhado à direita. Você pode definir manualmente o alinhamento com o atributo hint-align nos elementos.
<text hint-align="center">Hello</text>
new AdaptiveText()
{
Text = "Hello",
HintAlign = AdaptiveTextAlign.Center
};
Resultado:
Grupos e subgrupos
Os grupos permitem declarar semanticamente que o conteúdo dentro do grupo está relacionado e deve ser exibido em sua totalidade para o conteúdo fazer sentido. Por exemplo, você pode ter dois elementos de texto, um cabeçalho e um subcabeçalho, e não faz sentido que apenas o cabeçalho seja mostrado. Agrupando esses elementos dentro de um subgrupo, todos os elementos serão exibidos (se couberem) ou nenhum elemento será exibido (porque não cabem).
Para proporcionar a melhor experiência em dispositivos e telas, forneça vários grupos. Ter vários grupos permite que seu bloco se adapte a telas maiores.
Nota O único filho válido de um grupo é um subgrupo.
<binding template="TileWide" branding="nameAndLogo">
<group>
<subgroup>
<text hint-style="subtitle">Jennifer Parker</text>
<text hint-style="captionSubtle">Photos from our trip</text>
<text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
</subgroup>
</group>
<text />
<group>
<subgroup>
<text hint-style="subtitle">Steve Bosniak</text>
<text hint-style="captionSubtle">Build 2015 Dinner</text>
<text hint-style="captionSubtle">Want to go out for dinner after Build tonight?</text>
</subgroup>
</group>
</binding>
TileWide = new TileBinding()
{
Branding = TileBranding.NameAndLogo,
Content = new TileBindingContentAdaptive()
{
Children =
{
CreateGroup(
from: "Jennifer Parker",
subject: "Photos from our trip",
body: "Check out these awesome photos I took while in New Zealand!"),
// For spacing
new AdaptiveText(),
CreateGroup(
from: "Steve Bosniak",
subject: "Build 2015 Dinner",
body: "Want to go out for dinner after Build tonight?")
}
}
}
...
private static AdaptiveGroup CreateGroup(string from, string subject, string body)
{
return new AdaptiveGroup()
{
Children =
{
new AdaptiveSubgroup()
{
Children =
{
new AdaptiveText()
{
Text = from,
HintStyle = AdaptiveTextStyle.Subtitle
},
new AdaptiveText()
{
Text = subject,
HintStyle = AdaptiveTextStyle.CaptionSubtle
},
new AdaptiveText()
{
Text = body,
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
}
}
};
}
Resultado:
Subgrupos (colunas)
Os subgrupos também permitem que você divida dados em seções semânticas dentro de um grupo. Para blocos dinâmicos, isso se traduz visualmente em colunas.
O atributo hint-weight permite que você controle as larguras das colunas. O valor de hint-weight é expresso como uma proporção ponderada de espaço disponível, o que é idêntico ao comportamento de GridUnitType.Star. Para colunas de mesma largura, atribua cada peso a 1.
| hint-weight | Porcentagem de largura |
| 1 | 25% |
| 1 | 25% |
| 1 | 25% |
| 1 | 25% |
| Espessura total: 4 |
Para tornar uma coluna duas vezes maior que outra coluna, atribua à coluna menor uma espessura de 1 e à coluna maior uma espessura de 2.
| hint-weight | Porcentagem de largura |
| 1 | 33,3% |
| 2 | 66,7% |
| Espessura total: 3 |
Se quiser que sua primeira coluna ocupe 20% da largura total e sua segunda coluna ocupe 80% da largura total, atribua a espessura da primeira a 20 e a segunda espessura a 80. Se o total de espessuras for igual a 100, os valores atuarão como porcentagens.
| hint-weight | Porcentagem de largura |
| 20 | 20% |
| 80 | 80% |
| Espessura total: 100 |
Nota Uma margem de 8 pixels é adicionada automaticamente entre as colunas.
Quando houver mais de dois subgrupos, você deverá especificar hint-weight, que aceita somente números inteiros positivos. Se você não especificar hint-weight para o primeiro subgrupo, ele será atribuído a uma espessura de 50. O próximo subgrupo que não tiver um atributo hint-weight especificado será atribuído a uma espessura igual a 100 menos a soma das espessuras anteriores, ou a 1 se o resultado for zero. Os subgrupos restantes que não tiverem atributos hint-weights especificados serão atribuídos a uma espessura de 1.
Este é um código de exemplo para um bloco de previsão do tempo que mostra como você pode obter um bloco com cinco colunas de mesma largura:
<binding template="TileWide" displayName="Seattle" branding="name">
<group>
<subgroup hint-weight="1">
<text hint-align="center">Mon</text>
<image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
<text hint-align="center">63°</text>
<text hint-align="center" hint-style="captionsubtle">42°</text>
</subgroup>
<subgroup hint-weight="1">
<text hint-align="center">Tue</text>
<image src="Assets\Weather\Cloudy.png" hint-removeMargin="true"/>
<text hint-align="center">57°</text>
<text hint-align="center" hint-style="captionsubtle">38°</text>
</subgroup>
<subgroup hint-weight="1">
<text hint-align="center">Wed</text>
<image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
<text hint-align="center">59°</text>
<text hint-align="center" hint-style="captionsubtle">43°</text>
</subgroup>
<subgroup hint-weight="1">
<text hint-align="center">Thu</text>
<image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
<text hint-align="center">62°</text>
<text hint-align="center" hint-style="captionsubtle">42°</text>
</subgroup>
<subgroup hint-weight="1">
<text hint-align="center">Fri</text>
<image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
<text hint-align="center">71°</text>
<text hint-align="center" hint-style="captionsubtle">66°</text>
</subgroup>
</group>
</binding>
TileWide = new TileBinding()
{
DisplayName = "Seattle",
Branding = TileBranding.Name,
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveGroup()
{
Children =
{
CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"),
CreateSubgroup("Wed", "Sunny.png", "59°", "43°"),
CreateSubgroup("Thu", "Sunny.png", "62°", "42°"),
CreateSubgroup("Fri", "Sunny.png", "71°", "66°")
}
}
}
}
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
return new AdaptiveSubgroup()
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = day,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveImage()
{
Source = "Assets/Weather/" + image,
HintRemoveMargin = true
},
new AdaptiveText()
{
Text = highTemp,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = lowTemp,
HintAlign = AdaptiveTextAlign.Center,
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
};
}
Resultado:
Imagens
O elemento <image> é usado para exibir imagens na notificação do bloco. As imagens podem ser embutidas no conteúdo do bloco (padrão), como uma imagem de plano de fundo atrás do conteúdo, ou como uma imagem de "espiar" animada na parte superior da notificação.
Observação
As imagens podem ser usadas do pacote do aplicativo, do armazenamento local do aplicativo ou da Web. Na the Fall Creators Update, as imagens da Web podem ter até 3 MB em conexões normais e 1 MB em conexões limitadas. Em dispositivos que ainda não executam a Fall Creators Update, as imagens da Web devem ser maiores do que 200 KB.
Com nenhum comportamento extra especificado, as imagens se encolherão ou expandirão uniformemente para preencher a largura disponível. Esse exemplo mostra um bloco com duas colunas e imagens embutidas. As imagens embutidas se ampliam para preencher a largura da coluna.
<binding template="TileMedium" displayName="Seattle" branding="name">
<group>
<subgroup>
<text hint-align="center">Mon</text>
<image src="Assets\Apps\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
<text hint-align="center">63°</text>
<text hint-style="captionsubtle" hint-align="center">42°</text>
</subgroup>
<subgroup>
<text hint-align="center">Tue</text>
<image src="Assets\Apps\Weather\Cloudy.png" hint-removeMargin="true"/>
<text hint-align="center">57°</text>
<text hint-style="captionSubtle" hint-align="center">38°</text>
</subgroup>
</group>
</binding>
TileMedium = new TileBinding()
{
DisplayName = "Seattle",
Branding = TileBranding.Name,
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveGroup()
{
Children =
{
CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
CreateSubgroup("Tue", "Cloudy.png", "57°", "38°")
}
}
}
}
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
return new AdaptiveSubgroup()
{
Children =
{
new AdaptiveText()
{
Text = day,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveImage()
{
Source = "Assets/Weather/" + image,
HintRemoveMargin = true
},
new AdaptiveText()
{
Text = highTemp,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = lowTemp,
HintAlign = AdaptiveTextAlign.Center,
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
};
}
Resultado:
As imagens posicionadas na raiz de <binding>, ou no primeiro grupo, também se ampliarão para caber na altura disponível.
Alinhamento das imagens
As imagens podem ser definidas para alinhamento à esquerda, ao centro ou à direita com o atributo hint-align. Isso também fará com que as imagens sejam exibidas em sua resolução nativa, em vez de ampliadas para preencher a largura.
<binding template="TileLarge">
<image src="Assets/fable.jpg" hint-align="center"/>
</binding>
TileLarge = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveImage()
{
Source = "Assets/fable.jpg",
HintAlign = AdaptiveImageAlign.Center
}
}
}
}
Resultado:
Margens de imagem
Por padrão, as imagens embutidas têm uma margem de 8 pixels entre qualquer conteúdo acima ou abaixo da imagem. Essa margem pode ser removida usando o atributo hint-removeMargin na imagem. Entretanto, as imagens sempre retêm a margem de 8 pixels da borda do bloco, e os subgrupos (colunas) sempre retêm o preenchimento de 8 pixels entre colunas.
<binding template="TileMedium" branding="none">
<group>
<subgroup>
<text hint-align="center">Mon</text>
<image src="Assets\Numbers\4.jpg" hint-removeMargin="true"/>
<text hint-align="center">63°</text>
<text hint-style="captionsubtle" hint-align="center">42°</text>
</subgroup>
<subgroup>
<text hint-align="center">Tue</text>
<image src="Assets\Numbers\3.jpg" hint-removeMargin="true"/>
<text hint-align="center">57°</text>
<text hint-style="captionsubtle" hint-align="center">38°</text>
</subgroup>
</group>
</binding>
TileMedium = new TileBinding()
{
Branding = TileBranding.None,
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveGroup()
{
Children =
{
CreateSubgroup("Mon", "4.jpg", "63°", "42°"),
CreateSubgroup("Tue", "3.jpg", "57°", "38°")
}
}
}
}
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
return new AdaptiveSubgroup()
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = day,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveImage()
{
Source = "Assets/Numbers/" + image,
HintRemoveMargin = true
},
new AdaptiveText()
{
Text = highTemp,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = lowTemp,
HintAlign = AdaptiveTextAlign.Center,
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
};
}
Corte de imagem
As imagens podem ser cortadas em círculo usando o atributo hint-crop, que atualmente aceita apenas os valores de "none" (padrão) ou "circle".
<binding template="TileLarge" hint-textStacking="center">
<group>
<subgroup hint-weight="1"/>
<subgroup hint-weight="2">
<image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
</subgroup>
<subgroup hint-weight="1"/>
</group>
<text hint-style="title" hint-align="center">Hi,</text>
<text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>
TileLarge = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
TextStacking = TileTextStacking.Center,
Children =
{
new AdaptiveGroup()
{
Children =
{
new AdaptiveSubgroup() { HintWeight = 1 },
new AdaptiveSubgroup()
{
HintWeight = 2,
Children =
{
new AdaptiveImage()
{
Source = "Assets/Apps/Hipstame/hipster.jpg",
HintCrop = AdaptiveImageCrop.Circle
}
}
},
new AdaptiveSubgroup() { HintWeight = 1 }
}
},
new AdaptiveText()
{
Text = "Hi,",
HintStyle = AdaptiveTextStyle.Title,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = "MasterHip",
HintStyle = AdaptiveTextStyle.SubtitleSubtle,
HintAlign = AdaptiveTextAlign.Center
}
}
}
}
Resultado:
Imagem de plano de fundo
Para definir uma imagem de plano de fundo, coloque um elemento de imagem na raiz de <binding> e defina o atributo de posicionamento como "background".
<binding template="TileWide">
<image src="Assets\Mostly Cloudy-Background.jpg" placement="background"/>
<group>
<subgroup hint-weight="1">
<text hint-align="center">Mon</text>
<image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
<text hint-align="center">63°</text>
<text hint-align="center" hint-style="captionsubtle">42°</text>
</subgroup>
...
</group>
</binding>
TileWide = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
BackgroundImage = new TileBackgroundImage()
{
Source = "Assets/Mostly Cloudy-Background.jpg"
},
Children =
{
new AdaptiveGroup()
{
Children =
{
CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°")
...
}
}
}
}
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
return new AdaptiveSubgroup()
{
HintWeight = 1,
Children =
{
new AdaptiveText()
{
Text = day,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveImage()
{
Source = "Assets/Weather/" + image,
HintRemoveMargin = true
},
new AdaptiveText()
{
Text = highTemp,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = lowTemp,
HintAlign = AdaptiveTextAlign.Center,
HintStyle = AdaptiveTextStyle.CaptionSubtle
}
}
};
}
Resultado:
Imagem de "espiar"
Você pode especificar uma imagem que "espie" a parte superior do bloco. A imagem de "espiar" usa uma animação para deslizar para baixo/para cima a partir da parte superior do bloco, espiando a visualização, e depois deslizar de volta para revelar o conteúdo principal no bloco. Para definir uma imagem de "espiar", coloque um elemento de imagem na raiz de <binding> e defina o atributo de posicionamento como "peek".
<binding template="TileMedium" branding="name">
<image placement="peek" src="Assets/Apps/Hipstame/hipster.jpg"/>
<text>New Message</text>
<text hint-style="captionsubtle" hint-wrap="true">Hey, have you tried Windows 10 yet?</text>
</binding>
TileWide = new TileBinding()
{
Branding = TileBranding.Name,
Content = new TileBindingContentAdaptive()
{
PeekImage = new TilePeekImage()
{
Source = "Assets/Apps/Hipstame/hipster.jpg"
},
Children =
{
new AdaptiveText()
{
Text = "New Message"
},
new AdaptiveText()
{
Text = "Hey, have you tried Windows 10 yet?",
HintStyle = AdaptiveTextStyle.CaptionSubtle,
HintWrap = true
}
}
}
}
Corte em círculo para imagens de "espiar" e de plano de fundo
Use o seguinte atributo hint-crop em imagens de "espiar" e de plano de fundo para fazer um corte em círculo:
<image placement="peek" hint-crop="circle" src="Assets/Apps/Hipstame/hipster.jpg"/>
new TilePeekImage()
{
HintCrop = TilePeekImageCrop.Circle,
Source = "Assets/Apps/Hipstame/hipster.jpg"
}
O resultado terá esta aparência:
Usar imagem dinâmica e de plano de fundo
Para usar uma imagem de "espiar" e de plano de fundo em uma notificação de bloco, especifique uma imagem de "espiar" e uma imagem de plano de fundo em sua carga de notificação.
O resultado terá esta aparência:
As imagens de "espiar" e de plano de fundo substituem
Você pode definir uma sobreposição preta em suas imagens de "espiar" e de plano de fundo usando hint-overlay, que aceita inteiros de 0 a 100, sendo 0 nenhuma sobreposição e 100 uma sobreposição total preta. Você pode usar a sobreposição para assegurar que o texto em seu bloco seja legível.
Use hint-overlay em uma imagem de plano de fundo
Sua imagem de plano de fundo será padronizada com uma sobreposição de 20% desde que você tenha alguns elementos de texto em sua carga (caso contrário, o padrão será 0% sobreposição).
<binding template="TileWide">
<image placement="background" hint-overlay="60" src="Assets\Mostly Cloudy-Background.jpg"/>
...
</binding>
TileWide = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
BackgroundImage = new TileBackgroundImage()
{
Source = "Assets/Mostly Cloudy-Background.jpg",
HintOverlay = 60
},
...
}
}
Resultado de hint-overlay:
Use hint-overlay em uma imagem de "espiar"
Na versão 1511 do Windows 10, também oferecemos suporte a uma sobreposição para sua imagem de "espiar", da mesma forma que fizemos para a imagem de plano de fundo. Especifique hint-overlay no elemento de imagem de "espiar", como um número inteiro de 0 a 100. A sobreposição padrão para imagens de "espiar" é 0 (nenhuma sobreposição).
<binding template="TileMedium">
<image hint-overlay="20" src="Assets\Map.jpg" placement="peek"/>
...
</binding>
TileMedium = new TileBinding()
{
Content = new TileBindingContentAdaptive()
{
PeekImage = new TilePeekImage()
{
Source = "Assets/Map.jpg",
HintOverlay = 20
},
...
}
}
Este exemplo mostra uma imagem de "espiar" com opacidade de 20% (esquerda) e opacidade de 0% (direita):
Alinhamento vertical (empilhamento de texto)
Você pode controlar o alinhamento vertical do conteúdo em seu bloco usando o atributo hint-textStacking nos elementos TileBinding e AdaptiveSubgroup. Por padrão, tudo é alinhado verticalmente à parte superior, mas você também pode alinhar o conteúdo à parte inferior ou ao centro.
Empilhamento de texto no elemento binding
Quando aplicado no nível TileBinding, o empilhamento de texto define o alinhamento vertical do conteúdo da notificação como um todo, alinhando no espaço vertical disponível acima da área de identidade visual/notificação.
<binding template="TileMedium" hint-textStacking="center" branding="logo">
<text hint-style="base" hint-align="center">Hi,</text>
<text hint-style="captionSubtle" hint-align="center">MasterHip</text>
</binding>
TileMedium = new TileBinding()
{
Branding = TileBranding.Logo,
Content = new TileBindingContentAdaptive()
{
TextStacking = TileTextStacking.Center,
Children =
{
new AdaptiveText()
{
Text = "Hi,",
HintStyle = AdaptiveTextStyle.Base,
HintAlign = AdaptiveTextAlign.Center
},
new AdaptiveText()
{
Text = "MasterHip",
HintStyle = AdaptiveTextStyle.CaptionSubtle,
HintAlign = AdaptiveTextAlign.Center
}
}
}
}
Empilhamento de texto no elemento subgroup
Quando aplicado no nível AdaptiveSubgroup;, o empilhamento de texto define o alinhamento vertical do conteúdo do subgrupo (coluna), alinhando no espaço vertical disponível dentro do grupo inteiro.
<binding template="TileWide" branding="nameAndLogo">
<group>
<subgroup hint-weight="33">
<image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
</subgroup>
<subgroup hint-textStacking="center">
<text hint-style="subtitle">Hi,</text>
<text hint-style="bodySubtle">MasterHip</text>
</subgroup>
</group>
</binding>
TileWide = new TileBinding()
{
Branding = TileBranding.NameAndLogo,
Content = new TileBindingContentAdaptive()
{
Children =
{
new AdaptiveGroup()
{
Children =
{
// Image column
new AdaptiveSubgroup()
{
HintWeight = 33,
Children =
{
new AdaptiveImage()
{
Source = "Assets/Apps/Hipstame/hipster.jpg",
HintCrop = AdaptiveImageCrop.Circle
}
}
},
// Text column
new AdaptiveSubgroup()
{
// Vertical align its contents
TextStacking = TileTextStacking.Center,
Children =
{
new AdaptiveText()
{
Text = "Hi,",
HintStyle = AdaptiveTextStyle.Subtitle
},
new AdaptiveText()
{
Text = "MasterHip",
HintStyle = AdaptiveTextStyle.BodySubtle
}
}
}
}
}
}
}
}
Tópicos relacionados
- Esquema de conteúdo do bloco
- Enviar uma notificação de bloco local
- Modelos de blocos especiais
- Kit de ferramentas de comunidade UWP - Notificações
- Notificações do Windows no GitHub
Windows developer
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de