Muitas vezes, queremos fazer um zoom em componentes WPF. Como todo o desenho é vetorial, não há perda de resolução neste processo.

Uma maneira de fazer o zoom é usar uma transformação, do tipo ScaleTransform. O ScaleTransform aumenta ou diminui o tamanho do componente, segundo suas propriedades ScaleX e ScaleY. Por exemplo, se quisermos aumentar ou diminuir o zoom no canvas do post anterior, podemos fazer o seguinte: no arquivo xaml, criamos um DockPanel para armazenar os botões e o canvas:

  <DockPanel>
    <StackPanel Orientation="Horizontal" Height="40" DockPanel.Dock="Top">
      <Button x:Name="maisZoom" Click="maisZoom_Click" Margin="5" Content="Mais zoom"/>
      <Button x:Name="menosZoom" Click="menosZoom_Click" Margin="5" Content="Menos zoom"/>
      <TextBlock x:Name="textZoom" Text="Zoom: 100%" VerticalAlignment="Center" Margin="5"/>
    </StackPanel>
    <Canvas....>
  </Canvas>
  </DockPanel>

Na parte superior do DockPanel colocamos um StackPanel. Nesse StackPanel colocamos dois botões e um textblock que irá mostrar o zoom atual. 

Em seguida, criamos uma transformação (LayoutTransform) para o canvas, inicializando a escala para 1:

      <Canvas...>
      <Canvas.LayoutTransform>
        <ScaleTransform x:Name="canvasZoom" ScaleX="1" ScaleY="1" />
      </Canvas.LayoutTransform>
 

 Finalmente, colocamos o código para o evento Click dos botões:

        private void maisZoom_Click(object sender, RoutedEventArgs e)
        {
            canvasZoom.ScaleX += 0.1;
            canvasZoom.ScaleY += 0.1;
            textZoom.Text = String.Format("Zoom: {0}%", canvasZoom.ScaleX * 100);
        }

        private void menosZoom_Click(object sender, RoutedEventArgs e)
        {
            canvasZoom.ScaleX -= 0.1;
            canvasZoom.ScaleY -= 0.1;
            textZoom.Text = String.Format("Zoom: {0}%", canvasZoom.ScaleX * 100);
        }
 

Executando o programa, vemos que os botões aumentam ou diminuem o zoom do canvas, sem nenhuma perda de resolução.

Quando aumentamos o zoom, o Canvas aumenta de tamanho, mas não há nenhuma indicação disso: devemos aumentar nossa janela para ver o restante da imagem. Podemos usar barras de rolagem para ver o restante da imagem quando o zoom é maior que 100%. Para isso, colocamos o Canvas dentro de um ScrollViewer:

     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
      <Canvas ...>
         ....     
      </Canvas>
    </ScrollViewer>

O ScrollViewer apresenta barras de rolagem que são mostradas quando o tamanho de seu conteúdo é maior que seu tamanho. Assim, se dermos um zoom no Canvas que faça que ele fique maior que a área útil do ScrollViewer, as barras de rolagem aparecerão.

O projeto completo pode ser baixado aqui