CefSharp ChromiumWebBrowser-允许用户放大/缩小 [英] CefSharp ChromiumWebBrowser- allow user to zoom in/out

问题描述

我正在使用 CefSharp 库提供的 ChromiumWebBrowser 来允许用户从以下位置查看网站并与之交互在我的C＃应用​​程序中。

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.

该网站当前正确显示，并且用户可以与它进行完全交互，就像在标准的Web浏览器中查看该网站一样。

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.

我现在想添加该功能，以允许用户从我的应用程序中查看网站时放大/缩小，但是我不确定该怎么做。 。我在网上找到的大部分内容似乎都表明我应该使用< Grid> LayoutTransform 属性$ c>标记，然后在我的 XAML 中使用< ScaleTransform> 标记，而我已经尝试过了，但似乎无法正常工作...

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

我的 XAML 如下：

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

我将如何添加功能以允许用户放大和缩小 cefSharp：ChromiumWebBrowser ...> 在此 XAML 中吗？理想情况下，我希望他们能够使用'Shift +'/'Shift-'/'Shift and Scroll'放大/缩小。

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?

编辑

因此我设法通过在GUI中添加滑块在某种程度上实现了该功能：

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

并使用它来调用我命名为 zoom（）的函数-，其中我将 browser.ZoomLevel 属性设置为等于 slider.Value ：

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.

当用户移动滑块时，如何使显示平滑地放大/缩小，而不是从普通视图跳到最大值（100）？

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

如何添加使用键盘快捷键（例如CTRL + / CTRL-）而不是使用<$ c $进行放大/缩小的功能c>滑块？

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

推荐答案

我如何使显示在用户
移动滑块时平滑地放大/缩小，而不是从普通视图跳到
的最大值（100）？

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;

如何添加使用键盘快捷键进行放大/缩小的功能（例如CTRL + / CTRL-），而不是使用滑块？

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

以下是使用Ctrl +放大/缩小的代码

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);
        }
    }
}

这篇关于CefSharp ChromiumWebBrowser-允许用户放大/缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！