CefSharp ChromiumWebBrowser- 允许用户缩放 in/out

Question

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

该网站当前显示正确，用户可以与其进行充分交互，就像他们在标准网络浏览器中查看它一样。

我现在想添加允许用户在我的应用程序中查看网站时放大/缩小的功能，但我不确定如何执行此操作...我在web 似乎表明我应该使用 <Grid> 标签的 LayoutTransform 属性，然后在我的 XAML 中使用 <ScaleTransform> 标签，我已经试过了，但是可以'似乎让它工作...

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

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

来放大/缩小

任何人有任何建议，或者能给我指出一个如何实施的例子吗？

编辑

所以我通过向 GUI 添加 slider 在某种程度上实现了功能：

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

并使用它来调用我命名为 zoom() 的函数 - 在其中我将 browser.ZoomLevel 属性设置为 slider.Value:

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

但是，目前这可以通过单击 GUI 上的 slider 对象并向左/向右拖动光标来实现，但它似乎 'jump' 从一个值缩放到下一个值移动滑块，而不是逐渐改变它/使视图平滑地放大/缩小。

如何在用户移动滑块时使显示平滑地缩放 in/out，而不是从 'normal view' 跳到最大值 (100)？

如何添加使用键盘快捷键（例如 CTRL+ / CTRL-）而不是使用 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)?

为此你必须设置缩放级别增量

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?

下面的代码用于使用 Ctrl+鼠标滚轮缩放 In/Out。

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

Answer 2

我添加了键盘缩放。在初始化部分订阅事件

cefBrowser.PreviewMouseWheel += CefBrowser_PreviewMouseWheel;
cefBrowser.KeyUp += CefBrowser_KeyUp;

我使用 PreviewMouseWheel 来避免在缩放过程中滚动 (e.Handled = true)。

private void CefBrowser_PreviewMouseWheel(object sender, MouseWheelEventArgs e) {

  if (Keyboard.Modifiers != ModifierKeys.Control)
    return;

  if (e.Delta > 0)
    cefBrowser.ZoomInCommand.Execute(null);
  else
    cefBrowser.ZoomOutCommand.Execute(null);
  e.Handled = true;
}

private void CefBrowser_KeyUp(object sender, KeyEventArgs e) {

  if (Keyboard.Modifiers != ModifierKeys.Control)
    return;

  if (e.Key == Key.Add)
    cefBrowser.ZoomInCommand.Execute(null);
  if (e.Key == Key.Subtract)
    cefBrowser.ZoomOutCommand.Execute(null);
  if (e.Key == Key.NumPad0)
    cefBrowser.ZoomLevel = 0;
}

所以现在 cef 缩放几乎像 chrome

CefSharp ChromiumWebBrowser- 允许用户缩放 in/out

CefSharp ChromiumWebBrowser- allow user to zoom in/out

wpf

xaml

user-interface

view

cefsharp