Zoom the UI with WPF

loupe

How to add the ability to zoom a WPF control and content?

We must nest the control or controls that we want to zoom simultaneously in one Grid, on which we apply a transformation Layout type transformation scale.

For example :

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

the following C # method will apply the desired zoom ratio (between 0 and 1 inclusive):

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

This method can be linked to control events such as selecting a drop-down list, entering a text box or changing the value of a slider …

One thought on “Zoom the UI with WPF

Leave a Reply