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