Zoom na aplicação - Bruno Sonnino

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="*" />
            <RowDefinition Height="0.2*" />
        </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>

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 Cancel reply