Zoom de l’UI avec WPF

loupe

Comment ajouter la possibilité de zoomer un contrôle WPF et son contenu ?

Il faut imbriquer le ou les contrôles que l’on souhaite zoomer simultanément dans un Grid, sur lequel on applique une transformation de Layout de type transformation d’échelle.

Par exemple :

<ScrollViewer
    HorizontalScrollBarVisibility="Visible"
    VerticalScrollBarVisibility="Visible"
>
    <Grid Name="ZoomableContentGrid"
          RenderTransformOrigin="0.5,0.5">
        <Grid.LayoutTransform>
            <TransformGroup>
                <ScaleTransform x:Name="GridScaleTransform"/>
            </TransformGroup>
        </Grid.LayoutTransform>
        <!-- le contenu zoomé se place ici          
            ...     
        -->
    </Grid>
</ScrollViewer>

la méthode en C# suivante appliquera le ratio de zoom souhaité (entre 0 et 1 compris) :

void SetZoom(
    // facteur de zoom entre 0 et 1 compris
    double zoomFactor)
{
    GridScaleTransform.ScaleX = zoomFactor;
    GridScaleTransform.ScaleY = zoomFactor;
}

Cette méthode pourra être liée à des événements de contrôles comme la sélection d’une liste déroulante, la saisie dans une boîte de texte ou le changement de valeur d’un slider …

Une réflexion sur “Zoom de l’UI avec WPF

Laisser un commentaire