Controles de escrita à tinta

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

O controle InkCanvas renderiza a entrada à caneta como um traço de tinta (usando as configurações padrão de cor e espessura) ou um traço de apagar. Esse controle é uma sobreposição transparente que não inclui nenhuma UI embutida para alterar as propriedades padrão do traço 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. O InkToolbar contém uma coleção de botões personalizável e extensível que ativa recursos relacionados à tinta em um InkCanvas associado.

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

Esse é o controle correto?

Use o InkCanvas quando precisar habilitar recursos básicos de tinta digital em seu aplicativo sem fornecer nenhuma configuração de tinta ao 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 espessura de 2 pixels) e como borracha ao usar a ponta da borracha. Se uma ponta de borracha não estiver presente, o InkCanvas poderá ser configurado para processar a ponta da caneta como um traço de apagar.

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

Visão geral da barra de ferramentas de tinta

Botões internos

O InkToolbar inclui os seguintes botões internos:

Canetas

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

Você pode personalizar tanto a paleta de cores quanto os atributos de tamanho (mínimo, máximo, padrão) no painel flutuante de cada caneta.

Ferramenta

• Borracha – exclui qualquer traço de tinta tocado. Note que todo o traço de tinta é excluído, não apenas a parte sob o traço da borracha.

Toggle

• Régua – mostra ou oculta 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ões:

1. Um grupo de botões de "ferramenta" que inclui os botões integrados para desenhar, apagar e realçar. Ferramentas e canetas personalizadas são adicionadas aqui.

2. Um grupo de botões de "ligar/desligar" que contém o botão de régua integrado. Alternâncias personalizadas são adicionadas aqui.

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

• Caneta personalizada: uma caneta para a qual o aplicativo host define a paleta de cores de tinta e as propriedades da ponta da caneta, como forma, rotação e tamanho.
• Ferramenta personalizada: uma ferramenta sem caneta que o aplicativo host define.
• 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 o InkToolbar possa ser um item de nível superior, ele normalmente é exposto por meio de um botão ou comando de "Escrita à tinta". Recomendamos usar o glifo EE56 da fonte Segoe MLD2 Assets como um ícone de nível superior.

Interação com a InkToolbar

Todos os botões de caneta e ferramenta integrados incluem um menu suspenso em que é possível definir as propriedades da tinta e a forma e o tamanho da ponta da caneta. Um "ícone de extensão" é exibido no botão para indicar a existência do menu suspenso.

O menu suspenso é mostrado ao selecionar novamente o botão de uma ferramenta ativa. Quando a cor ou o tamanho são alterados, o painel é automaticamente fechado e o recurso de escrita pode ser retomado. As ferramentas e as canetas personalizadas podem usar o menu suspenso padrão ou especificar um menu suspenso personalizado.

A borracha também tem um menu flutuante que fornece o comando Apagar Toda a Tinta.

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

Recomendações

• A melhor maneira de usar o InkCanvas, e tinta em geral, é com uma caneta ativa. Porém, recomendamos oferecer suporte à escrita com mouse e entrada por toque (incluindo caneta passiva), se exigido pelo seu aplicativo.
• Utilize o controle InkToolbar com o InkCanvas para fornecer funcionalidades e configurações básicas de desenho. É possível personalizar o InkCanvas e o InkToolbar de modo programático.
• A melhor maneira de vivenciar o InkToolbar, e o uso da escrita à tinta em geral, é com uma caneta ativa. No entanto, poderá haver suporte para escrita à tinta com mouse e touch, se seu aplicativo exigir.
• Para dar suporte à escrita com caneta com entrada de toque, recomendamos usar o ícone ED5F da fonte Segoe MLD2 Assets para o botão de alternância, com uma dica de ferramenta "Escrita com toque".
• "Ao fornecer seleção de traço, recomendamos usar o ícone EF20 da fonte Segoe MLD2 Assets para o botão da ferramenta, com uma legenda 'Ferramenta de Seleção'."
• Se estiver usando mais de um InkCanvas, recomendamos usar uma só InkToolbar para controlar a tinta digital nas telas.
• Para obter o melhor desempenho, recomendamos alterar o menu suspenso padrão, ao invés de criar um novo para ambas as ferramentas, tanto as padrão quanto as personalizadas.

Exemplos

Microsoft Edge

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

Área de Trabalho do Windows Ink

O InkCanvas e o InkToolbar também são usados para Snip & Sketch no Windows Ink Workspace.

Criar uma InkCanvas e uma InkToolbar

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

<InkCanvas x:Name="myInkCanvas"/>

O controle InkToolbar deve ser usado em conjunto com um InkCanvas. A incorporação de 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

• SimpleInk sample - Demonstra 8 cenários em torno dos recursos de personalização e extensibilidade dos controles InkCanvas e InkToolbar. Cada cenário fornece diretrizes básicas sobre situações comuns de tinta digital e configurações de controle.
• exemplo ComplexInk – demonstra cenários de escrita à tinta mais avançados.
• Exemplo da Galeria do WinUI para UWP – consulte todos os controles XAML em um formato interativo.

Artigos relacionados

• interações com a Caneta e o Windows Ink em aplicativos do Windows
• Reconhecer os traços do Windows Ink como texto e formas
• Armazenar e recuperar dados de traços do Windows Ink