Um efeito muito interessante é aquele que temos no Expression Blend, quando selecionamos Tools/Options e mudamos o valor de Workspace zoom: podemos mudar o tamanho dos controles, aumentando-os ou diminuindo-os como um todo, permitindo que a visualização fique mais comoda.

A obtenção deste efeito com WPF é muito simples: basta colocar todos os controles que queremos dar o zoom num conteiner, por exemplo, num Canvas e aplicar uma transformação de escala (ScaleTransform) sobre ele. Todos os controles dentro dele serão aumentados ou diminuídos simultaneamente, dando o mesmo efeito que temos no Blend.

Ao digitar este código no XamlPad ou XamlCruncher, você verá que pode alterar o zoom dos componentes na janela ao mudar a posição do Slider:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid RenderTransformOrigin="0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.85*"/>
            <RowDefinition Height="0.15*"/>
        </Grid.RowDefinitions>
        <StackPanel Margin="8,8,8,8" Grid.Row="1">
            <Slider Width="308" Height="16" Maximum="2" x:Name="Slider" Value="1"/>
        </StackPanel>
        <Canvas>
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform 
                     ScaleX="{Binding Path=Value, ElementName=Slider, Mode=Default}"
                     ScaleY="{Binding Path=Value, ElementName=Slider, Mode=Default}"
                    />
                </TransformGroup>
            </Canvas.RenderTransform>
            <TextBox Text="TextBox" Canvas.Left="10" Canvas.Top="10"/>
            <Label Content="Label" Canvas.Left="10" Canvas.Top="50"/>
            <CheckBox Content="CheckBox" Canvas.Left="10" Canvas.Top="100"/>
            <ListBox Width="188" Height="100" Canvas.Left="10" Canvas.Top="150">
                <ListBoxItem Content="Item 1"/>
                <ListBoxItem Content="Item 2"/>
                <ListBoxItem Content="Item 3"/>
                <ListBoxItem Content="Item 4"/>
                <ListBoxItem Content="Item 5"/>
            </ListBox>
            <ComboBox Width="196" Canvas.Left="10" Canvas.Top="282">
                <ComboBoxItem Content="Item 1"/>
                <ComboBoxItem Content="Item 2"/>
                <ComboBoxItem Content="Item 3"/>
            </ComboBox>
        </Canvas>
    </Grid>
</Window>

 

Zoom

O segredo está nestas linhas:

<Canvas.RenderTransform>
  <TransformGroup>
    <ScaleTransform ScaleX="{Binding Path=Value, ElementName=Slider, Mode=Default}"
      ScaleY="{Binding Path=Value, ElementName=Slider, Mode=Default}" />
  </TransformGroup>
</Canvas.RenderTransform>

Aqui fazemos a escala do canvas que contém os outros componentes. Note que estamos fazendo o data binding com a posição do slider. Assim, quando movimentamos o slider, todos os componentes aumentam ou diminuem.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation