WPF - Usando o controle InkCanvas

Neste tutorial eu vou mostrar como criar uma aplicação WPF usando o controle InkCanvas. Um controle muito interessante existente na galeria de controles WPF.

A classe InkCanvas  define uma área que recebe e exibe traços de tinta.

O InkCanvas é um elemento que pode ser usado para receber e exibir a entrada de tinta. Isto é comumente feito através do uso de uma caneta, que interage com um digitalizador para produzir traços de tinta usando uma caneta ou um mouse. Os traços criados são representados como objetos Stroke, e podem ser manipulados via código ou com base na entrada do usuário. O InkCanvas permite aos usuários modificar ou apagar um curso existente.

O InkCanvas pode ser ligado a uma fonte de dados. Por exemplo, você pode vincular a propriedade Strokes a uma string codificada (Base 64) que contém dados de tinta em formato serializado, ou até mesmo à propriedade Strokes de outro InkCanvas. Você pode também ligar propriedades, tais como DefaultDrawingAttributes e EditingMode, a outras fontes de dados.

Vamos abrir o Visual Studio 2008 e no menu File -> New Project selecione o template WPF Application e informe o nome InkCanvasWpf e clique em OK;

Após criar o projeto ative a barra de ferramentas e procure o controle InkCanvas. Se você não o encontrou vamos incluí-lo.

Clique com o botão direito sobre a ToolBox e selecione a opção Choose Items do menu de contexto;

Na próxima janela abra a aba WPF Components, localize o controle InkCanvas e marque-o. A seguir clique no botão OK;

A seguir a partir da ToolBox selecione o controle InkCanvas e o arraste e solte no descritor WPF;

A seguir inclua também dois controles Buttons alterando sua propriedade Content para: Limpar e Fechar , conforme o leiaute da figura abaixo:

Finalmente clique em cada um dos botões e inclua no evento Click de cada um deles o código exibido a seguir:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
     Me.inkCanvas1.Strokes.Clear()
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click
   Me.Close()
End Sub

O código do botão Limpar usa o método Clear da classe   Me.inkCanvas1.Strokes para limpar qualquer traço feito no controle.

Execute o projeto e com o mouse faça algum desenho conforme mostra a figura abaixo:

Pronto ! Acabamos de usar o controle InkCanvas na sua forma mais simples possível.

Vamos criar outro janela WPF e incrementar um pouco mais a  utilização desse controle.

Clique com o botão direito sobre o nome do projeto e selecione a opção Add -> Window; Aceite o nome padrão Window2.xaml;

A seguir usando os controles WPF como Combobox, RadioButon, GroupBox e Button defina o seguinte leiaute no arquivo Window2.xaml:

O código XAML que gera o leiaute acima pode ser visto a seguir:

<Window x:Class="Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MacInkCanvas" Height="273" Width="581">
    <Grid>
        <InkCanvas Margin="4,4,165,5" Name="macInkCanvas" ClipToBounds="True" Background="White"></InkCanvas>
        <Button Margin="0,77,7,0" Name="btnLimpar" Content="Limpar" VerticalAlignment="Top" HorizontalAlignment="Right" Width="75"></Button>
        <Button Margin="0,106,7,0" Name="btnSalvar" Content="Salvar" VerticalAlignment="Top" HorizontalAlignment="Right" Width="75"></Button>
        <Button Margin="0,134,7,0" Name="btnCarregar" Content="Carregar" VerticalAlignment="Top" HorizontalAlignment="Right" Width="75"></Button>
        <ComboBox Name="cboTamanhoPincel" HorizontalAlignment="Right" VerticalAlignment="Top" Width="66" SelectionChanged="cboTamanhoPincel_SelectionChanged"> 
        <ComboBoxItem>1</ComboBoxItem>
          <ComboBoxItem IsSelected="True">2</ComboBoxItem>
          <ComboBoxItem>4</ComboBoxItem>
          <ComboBoxItem>6</ComboBoxItem>
          <ComboBoxItem>8</ComboBoxItem>
          <ComboBoxItem>10</ComboBoxItem>
        </ComboBox>
        <Label HorizontalAlignment="Right" Margin="0,0,64,0" Name="lblTamanhoPincel" VerticalAlignment="Top" Width="95" Content="Tamanho Pincel" Height="25.96"></Label>
        <Label HorizontalAlignment="Right" Margin="0,43,73,0" Name="lblCor" VerticalAlignment="Top" Width="60" Content="Cor" Height="25.96"></Label>
        <ComboBox HorizontalAlignment="Right" Margin="0,43,7,0" Name="cboCor" VerticalAlignment="Top" Width="85" SelectionChanged="cboCor_SelectionChanged">
          <ComboBoxItem IsSelected="True">Black</ComboBoxItem>
          <ComboBoxItem>Blue</ComboBoxItem>
          <ComboBoxItem>Green</ComboBoxItem>
          <ComboBoxItem>Red</ComboBoxItem>
          <ComboBoxItem>Yellow</ComboBoxItem>
        </ComboBox>
        <GroupBox Header="Modo" Height="56" HorizontalAlignment="Right" Margin="0,0,7,5" Name="grpModo" VerticalAlignment="Bottom" Width="152">
            <Grid Width="136">
                <RadioButton Margin="6,6,0,0" Name="rdbModoDesenho" HorizontalAlignment="Left" Width="65" Height="24.723" VerticalAlignment="Top" 
GroupName="modo" IsChecked="True" Checked="rdbModoDesenho_Checked" Content="Desenho"></RadioButton>
                <RadioButton Margin="0,6,-3,2.317" Name="rdbModoSelecao" HorizontalAlignment="Right" Width="65" GroupName="modo" Checked="rdbModoSelecao_Checked"
  Content="Seleção"></RadioButton>
            </Grid>
        </GroupBox>
    </Grid>
</Window>

Agora é só alegria..

Execute o projeto e dê asas ao seu talento...

Simples mas funcional.

Pegue o projeto completo aqui:   InkCanvas_Wpf.zip

Eu sou a luz que vim ao mundo, para que todo aquele que crê em mim não permaneça nas trevas. (João 12:46)

Referências:

José Carlos Macoratti