Controlos de anotação digital

Há dois controles diferentes que facilitam a escrita à tinta em aplicativos do Windows: InkCanvas e InkToolbar.

O controlo InkCanvas renderiza a entrada de caneta como um traço de tinta (usando as configurações padrão de cor e espessura) ou um traço de apagamento. Este controlo é uma sobreposição transparente que não inclui qualquer interface de utilizador embutida para alterar as propriedades padrão do traçado de tinta.

Como o controle InkCanvas não inclui suporte para alterar as configurações padrão de traço de tinta, ele pode ser emparelhado com um controle InkToolbar. A InkToolbar contém uma coleção personalizável e extensível de botões que ativam recursos relacionados à tinta em um InkCanvas associado.

Por padrão, a InkToolbar inclui botões para desenhar, apagar, realçar e exibir uma régua. Dependendo da funcionalidade, outras configurações e comandos, como a cor da tinta, a espessura do traçado, apagar toda a tinta, são fornecidos num menu suspenso.

Será este o controlo correto?

Use o InkCanvas quando precisar habilitar recursos básicos de tinta digital em seu aplicativo sem fornecer nenhuma configuração de tinta para o usuário.

Por padrão, os traços são renderizados como tinta ao usar a ponta da caneta (uma caneta esferográfica preta com uma espessura de 2 pixels) e como uma borracha ao usar a ponta da borracha. Se uma ponta de borracha não estiver presente, o InkCanvas pode ser configurado para processar a entrada da ponta da caneta como um traçado de apagamento.

Emparelhe o InkCanvas com uma InkToolbar para fornecer uma interface do usuário para ativar recursos de tinta e definir propriedades básicas de tinta, como tamanho do traçado, cor e forma da ponta da caneta.

Visão geral da barra de ferramentas Ink

Botões incorporados

O InkToolbar inclui os seguintes botões internos:

Canetas

• Caneta esferográfica - desenha um traço sólido e opaco com uma ponta circular. O tamanho do traço depende da pressão da caneta detetada.
• Lápis - desenha um traço texturizado, semitransparente e de pontas suaves (útil para efeitos de sombreamento em camadas) com uma ponta circular de caneta. A cor do traço (escuridão) depende da pressão da caneta detetada.
• Marcador – desenha um traço semitransparente com uma ponta retangular.

Você pode personalizar a paleta de cores e os atributos de tamanho (min, max, default) no submenu para cada caneta.

Tool

• Borracha – exclui qualquer traço de tinta que tocar. Observe que todo o traço de tinta é eliminado, não apenas a parte debaixo do traço de apagar.

Alternar

• Régua - mostrar ou ocultar a régua. Desenhar perto da borda da régua faz com que o traço de tinta se encaixe na régua.
  

Embora essa seja a configuração padrão, você tem controle total sobre quais botões internos estão incluídos na InkToolbar do seu aplicativo.

Botões personalizados

O InkToolbar consiste em dois grupos distintos de tipos de botão:

1. Um grupo de botões de "ferramenta" que contém os botões integrados de desenho, apagamento e realce. Canetas e ferramentas personalizadas são adicionadas aqui.

2. Um grupo de botões de comutação contendo o botão de régua integrado. Botões personalizados são adicionados aqui.

Dependendo do seu aplicativo e da funcionalidade de tinta necessária, você pode adicionar qualquer um dos seguintes botões (vinculados aos seus recursos de tinta personalizados) à InkToolbar:

• Caneta personalizada – uma caneta para a qual a paleta de cores da tinta e as propriedades da ponta da caneta, como forma, rotação e tamanho, são definidas pelo aplicativo host.
• Ferramenta personalizada – uma ferramenta sem caneta, definida pelo aplicativo host.
• Alternância personalizada – Define o estado de um recurso definido pelo aplicativo como ativado ou desativado. Quando ativado, o recurso funciona em conjunto com a ferramenta ativa.

Embora a InkToolbar possa ser um item de nível superior, geralmente é apresentada através de um botão ou comando "Inking". Recomendamos o uso do glifo EE56 da fonte Segoe MLD2 Assets como um ícone de nível superior.

Interação com a Barra de Ferramentas de Tinta

Todos os botões de caneta e ferramenta integrados incluem um menu suspenso onde as propriedades da tinta e a forma e o tamanho da ponta da caneta podem ser definidos. Um "glifo de extensão" é exibido no botão para indicar a existência do submenu.

O submenu é mostrado quando o botão de uma ferramenta ativa é selecionado novamente. Quando a cor ou o tamanho são alterados, o submenu é automaticamente descartado e a tinta pode ser retomada. Canetas e ferramentas personalizadas podem usar o flyout padrão ou especificar um flyout personalizado.

A borracha também tem um menu pendente que fornece o comando Erase All Ink, que apaga toda a tinta.

Para obter informações sobre personalização e extensibilidade, confira o exemplo SimpleInk.

Recommendations

• O InkCanvas, e a tinta digital em geral, é melhor experimentado através de uma caneta ativa. No entanto, recomendamos o suporte à tinta digital com entrada por mouse e toque (incluindo caneta passiva), se exigido pelo seu aplicativo.
• Use um controlador InkToolbar com o InkCanvas para fornecer funcionalidades básicas de tintagem e configurações. Tanto o InkCanvas quanto o InkToolbar podem ser personalizados programaticamente.
• A InkToolbar, e a tinta digital em geral, é melhor experimentada através de uma caneta ativa. No entanto, a escrita com o rato e o toque pode ser suportada, se requerido pela sua aplicação.
• Se for suportada a tinta digital com entrada por toque, recomendamos usar o ícone ED5F da fonte Segoe MLD2 Assets para o botão de alternância, com uma dica de ferramenta "Escrita por toque".
• Se fornecer a seleção de traçado, recomendamos o uso do ícone EF20 da fonte Segoe MLD2 Assets para o botão da ferramenta, com a sugestão "Ferramenta de seleção".
• Se utilizar mais de um InkCanvas, recomendamos usar um único InkToolbar para controlar a tinta nos canvas.
• Para obter o melhor desempenho, recomendamos alterar o submenu padrão em vez de criar um personalizado para ferramentas padrão e personalizadas.

Examples

Borda da Microsoft

O Microsoft Edge usa o InkCanvas e o InkToolbar para Web Notes.

Espaço de Trabalho do Windows Ink

O InkCanvas e o InkToolbar também são usados para Snip & Sketch no espaço de trabalho do Windows Ink.
de trabalho do Windows Ink

Criar um InkCanvas e InkToolbar

Adicionar um InkCanvas ao seu aplicativo requer apenas uma linha de marcação:

<InkCanvas x:Name="myInkCanvas"/>

O controle InkToolbar deve ser usado em conjunto com um InkCanvas. Incorporar uma InkToolbar (com todas as ferramentas internas) em seu aplicativo requer uma linha adicional de marcação:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Isso exibe a seguinte InkToolbar:

Obter o código de exemplo

• Exemplo SimpleInk - Demonstra 8 cenários em torno das funcionalidades de personalização e extensibilidade dos controlos InkCanvas e InkToolbar. Cada cenário fornece orientação básica sobre situações comuns de tinta e implementações de controle.
• Exemplo do ComplexInk - Demonstra cenários de tinta digital mais avançados.
• Exemplo da Galeria WinUI 2 - Veja todos os controlos XAML num formato interativo.

Artigos relacionados

• Interações com caneta e Windows Ink em aplicações do Windows
• Reconhecer traços do Windows Ink como texto e formas
• Armazene e recupere dados de traçado do Windows Ink