0

I have a model view in wpf application that hosts url using chromium version 41. The url is html page that has two text inputs and each text input has a directive (angular 1.5) that binds the 'touchstart' event to each input. When I open the Url in chrome (with out the chromium wrapper) I can see that the touch events are working, and when I open the url under chromium the touch events are not being fired.

Does anyone has seen this issue before? is it possible that it's related to the chromium version?

my xaml:

    <Window x:Class="CefSharpTest.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:CefSharpTest"
            xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <cefSharp:ChromiumWebBrowser x:Name="MyBrowser" Address="http://localhost:9090/test.html"></cefSharp:ChromiumWebBrowser>
        </Grid>
    </Window>

my xaml code:

using System.Windows;
    using CefSharp;

    namespace CefSharpTest
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                MyBrowser.FrameLoadEnd += MyBrowser_FrameLoadEnd;
            }

            private void MyBrowser_FrameLoadEnd(object sender, CefSharp.FrameLoadEndEventArgs e)
            {
                MyBrowser.ShowDevTools();
            }
        }
    }

my html:

<html>
    <head>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $("#txtTest").on("touchstart", function(e){
                    console.log("touch");
                });
                $("#txtTest").on("keydown", function(e){
                    console.log("key down");
                });
            });
        </script>
        <input id="txtTest" type="text" width="250px" height="250px" />
    </body>
</html>

Thank you

user3132295
  • 288
  • 4
  • 23
  • The WPF version does not support touch screens, you can host the WinForms version in WPF. Version 63 is the latest supported version. – amaitland Apr 08 '18 at 22:46
  • Thank you for you response, I tried this on winform and it worked. Is there any way to make it work on wpf? I know that cef has Tuch Down event and it's working but I need the touch start in javascript on a specific input – user3132295 Apr 09 '18 at 07:06
  • You can use the WinForms version hosted in WPF, that would be my recommendation. See https://github.com/cefsharp/CefSharp/issues/228 for the WPF issue – amaitland Apr 09 '18 at 11:18

1 Answers1

0

I found a solution:

on chromium I registered to the TouchDown event, in the touch down event I executed async script that send the location (x,y) to the client relatively to the browser. In the javascript function I get the element using document.elementFromPoint(x, y); and if the element is input: text I'm arsing an event of touch.

user3132295
  • 288
  • 4
  • 23