CefSharp ChromiumWebBrowser- allow user to zoom in/out

Question

I am using the ChromiumWebBrowser provided by the CefSharp library to allow users to view and interact with a website from within my C# application.

The website is currently displayed correctly, and the user is able to interact with it fully, as if they were viewing it in a standard web browser.

I now want to add the functionality to allow users to zoom in/ out when viewing the website from within my application, but I'm unsure how to do this... most of what I've found on the web seems to indicate that I should use the LayoutTransform attribute of the <Grid> tag, and then a <ScaleTransform> tag in my XAML, and I've tried this, but can't seem to get it working...

My XAML is as follows:

<Grid x:Name="grdBrowserHost" MinHeight="900" Height="Auto" MinWidth="1200" Width="Auto" Margin="0,0,0,0" DockPanel.Dock="Bottom" Grid.ColumnSpan="1" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.LayoutTransform>
        <ScaleTransform ScaleX="{Binding Path=Value, ElementName=_zoom}" ScaleY="{Binding Path=Value, ElementName=_zoom}" />
    </Grid.LayoutTransform>
    <cefSharp:ChromiumWebBrowser Name="browser" Height="Auto" Width="Auto" Grid.Row="0" Address="www.google.com" Margin="0,35,-0.2,0" />
</Grid>

How would I add the functionality to allow the user to zoom in and out on the content of the cefSharp:ChromiumWebBrowser ...> in this XAML? Ideally, I want them to be able to zoom in/ out by using 'Shift+'/'Shift-'/'Shift and Scroll'.

Anyone have any suggestions, or able to point me to an example of how this is implemented?

Edit

So I've managed to implement the functionality to some extent by adding a slider to the GUI:

<Slider x:Name="slider" Maximum="100" ValueChanged="zoom" HorizontalAlignment="Left" Margin="1177,260,0,0" VerticalAlignment="Top"/>

and using that to call a function that I've named zoom()- in which I set the browser.ZoomLevel attribute equal to slider.Value:

public void zoom(object sender, RoutedEventArgs e)
{
    browser.ZoomLevel = slider.Value;
}

However, this currently works by clicking the slider object on the GUI, and dragging the cursor left/ right, but it seems to 'jump' the zoom from one value to the next as you move the slider, rather than changing it gradually/ making the view zoom in/ out smoothly.

How would I cause the display to zoom in/out smoothly as the user moves the slider, rather than jumping from 'normal view' to the maximum value (100)?

How can I add functionality to zoom in/ out using keyboard shortcuts (such as CTRL+ / CTRL-), rather than using a slider?

Answer 1

How would I cause the display to zoom in/out smoothly as the user moves the slider, rather than jumping from 'normal view' to the maximum value (100)?

For this you have to set the zoom level increment

browser.ZoomLevelIncrement = 0.5;

How can I add functionality to zoom in/ out using keyboard shortcuts (such as CTRL+ / CTRL-), rather than using a slider?

Here the below codes used to Zoom In/Out using Ctrl+Mouse-wheel.

private void OnPreviewKeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.RightCtrl || e.Key == Key.LeftCtrl)
    {
        isControlKeyPressed = false;
    }
}

private void OnKPreviewKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.RightCtrl || e.Key == Key.LeftCtrl)
    {
        isControlKeyPressed = true;
    }
}

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    if (isControlKeyPressed)
    {
        if (e.Delta > 0 && browser.ZoomLevel <= maxZoomLevel)
        {
            browser.ZoomInCommand.Execute(null);
        }
        else if (e.Delta < 0 && browser.ZoomLevel >= minZoomLevel)
        {
            browser.ZoomOutCommand.Execute(null);
        }
    }
}