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
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.
Related
Case:
I want to keep an element focused unless the element that tries to grab focus is a another Entry element.
I have this component (SearchBar.xaml)
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:localization="clr-namespace:POS365.Src.Extensions"
xmlns:fontAwesome="clr-namespace:FontAwesome"
x:Class="SomeApp.Src.Components.SearchBar">
<Grid ColumnDefinitions="32,*">
<Label Grid.Column="0" FontFamily="FAS" Text="{x:Static fontAwesome:FontAwesomeIcons.MagnifyingGlass}" FontSize="Large" Style="{DynamicResource HeaderBarSearchIconStyle}"/>
<Entry Grid.Column="1" x:Name="SearchField" MaxLength="20" Text="" HeightRequest="32" />
</Grid>
</ContentView>
and (SearchBar.xaml.cs)
using System.ComponentModel;
namespace SomeApp.Src.Components;
public partial class SearchBar : ContentView
{
public SearchBar()
{
InitializeComponent();
SearchField.Unfocused += OnLostFocus;
}
public void OnLostFocus(object sender, FocusEventArgs e)
{
// TODO: Find out when to focus this, probably based on what takes focus if possible
// FocusSearchField();
}
// Used by Loaded event elsewhere
public void FocusSearchField()
{
SearchField.Focus();
}
}
It seems that OnLostFocus only gets the element that lost focus and not the element that took focus.
How do I get the current focused element, so I can see which type of element it is?
You can determine this by iterating through root's child view and calling the view.IsFocused method.
var views = rootLayout.Children;
foreach (View view in views)
{
if (view != null && view.IsFocused)
{
System.Diagnostics.Debug.WriteLine("view focused is : " + view);
}
}
Note:
rootLayout is the parent view of current page.
When adding a NavigationView a 'Settings' item is automatically added at the bottom of the NavigationView. How can a click event be added to this item since it doesn't appear to be accessible from XAML?
<Page
x:Class="My_Project.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<NavigationView>
<NavigationView.PaneFooter>
</NavigationView.PaneFooter>
</NavigationView>
</Grid>
</Page>
How can a click event be added to this item since it doesn't appear to be accessible from XAML?
The Settings button click event is already handled by the NavigationView.ItemInvoked Event. This is mentioned in the document NavigationView as "When the user taps on a navigation item, the navigation view shows that item as selected and raises an ItemInvoked event. "
So you just need to handle the NavigationView.ItemInvoked Event and check the NavigationViewItemInvokedEventArgs.IsSettingsInvoked Property.
Here is the code that you could refer to:
<Grid>
<NavigationView ItemInvoked="NavigationView_ItemInvoked">
<NavigationView.PaneFooter>
</NavigationView.PaneFooter>
</NavigationView>
</Grid>
In code behind:
private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
if (args.IsSettingsInvoked == true)
{
//do something
}
}
Update
If you want to check if the item is a specific one, you could set a tag property in the Xaml for the navigationview item and then check this property in the ItemInvoked event.
In xaml:
<NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
In code behind:
private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
var navItemTag = args.InvokedItemContainer.Tag.ToString();
if (navItemTag.Equals("home"))
{
// do something
Debug.WriteLine("test");
}
}
so I have this button:
<ImageButton
Aspect="AspectFit"
Grid.Column="1"
x:Name="btn_mymatches_mainmenu"
Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
When the user clicks on it, there is no animation visible as if I just were to take the standard "Button". How can I add this little animation to also play on my image button? On Android, this is like a little grey "wave". Any animation would be awesome...
Thank you!
here is a starting point.
<ImageButton
Aspect="AspectFit"
Grid.Column="1"
x:Name="btn_mymatches_mainmenu"
Source="btn_emptydummy.png"
BackgroundColor="#00000000"
Clicked="btn_mymatches_mainmenu_Clicked" />
Then in your code behind :
public async void btn_mymatches_mainmenu_Clicked(object sender, EventArgs e)
{
await btn_mymatches_mainmenu.ScaleTo(0.75, 100);
await btn_mymatches_mainmenu.ScaleTo(1, 100);
}
There is also Fade animations, and a lot of other. Just take a look at the Xamarin Forms documentation.
If you want, you can create a class which inherit from ImageButton and perform the animation inside so all your controls will have the animation without any code.
You can create an ImageButton Renderer by setting a custom background to achieve that .
[assembly: ExportRenderer(typeof(Xamarin.Forms.ImageButton), typeof(CustomImageButtonRenderer))]
namespace AppImageXml.Droid
{
public class CustomImageButtonRenderer : ImageButtonRenderer
{
public CustomImageButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ImageButton> e)
{
base.OnElementChanged(e);
SetBackgroundResource(Resource.Drawable.ripple_bg);
// Set a background to be like a Ripple animation
}
}
}
ripple_bg.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/darker_gray">
<!--Ripple color-->
<item>
<shape android:shape="rectangle">
<!-- background color-->
<solid android:color="#android:color/white"/>
</shape>
</item>
</ripple>
Then the ImageButton used in Xaml can show the Ripple animation :
<ImageButton Aspect="AspectFit"
Grid.Row="1"
Grid.Column="0"
x:Name="btn_mymatches_mainmenu"
Source="heart.png"
BackgroundColor="#00000000" />
The effect :
So i have chat window with a text box, a mic button and some other buttons for settings and sharing. So i want to always switch on the mic whenever space button is pressed, except when the textbox has focus. No matter if other buttons are clicked last, space-bar should turn-on the mic.
Any help or pointers?
Here is a working sample.
Code Behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
}
private void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)
{
if (args.VirtualKey == Windows.System.VirtualKey.Space && txtData.FocusState == FocusState.Unfocused))
{
txtData.Text = "Mike Called";
}
}
}
txtData here is my TextBox that I an checking if I have FocusState Unfocused
XAML
<Page
x:Class="App12.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App12"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox Text="Hello World" Name="txtData" Width="300" Height="35" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Page>
You should subscribe the KeyDown event of Window.Current.CoreWindow. It will be fired everytime user press any key, regardless of focused control. Only your app has to be focused.
Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
private void CoreWindow_KeyDown(CoreWindow sender, KeyEventArgs args)
{
if (args.Handled)
{
return;
}
// Your event handling
}
I want to change the standard Back button in the NavigationBar on iOS to a Cancel button like the "New contact" screen in iOS.
I am using Xamarin Forms.
EDIT:
XAML of modal
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xrm.Mca.Views.MyModalView">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="Cancel" Text="Cancel" ></ToolbarItem>
<ToolbarItem x:Name="Save" Text="Save" ></ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Details">
<EntryCell Label="Name" Placeholder="Entry your name" />
<EntryCell Label="Age" Placeholder="Entry your age" />
</TableSection>
</TableRoot>
</TableView>
</ContentPage.Content>
</ContentPage>
Code-behind in the prior screen to open modal
async Task OpenModal()
{
var page = new NavigationPage(new MyModalView ());
await App.Current.Navigation.PushModalAsync (page);
}
The standard convention of accomplishing your request is to push a Modal and use ToolBarItems. You can find an example of applying a ToolBarItem to your page on the Xamarin Forums.
Let me know if you need a more concrete example.
UPDATED WITH EXAMPLE
The two ToolbarItems would like like so:
var cancelItem = new ToolbarItem
{
Text = "Cancel"
};
var doneItem = new ToolbarItem
{
Text = "Done"
};
Now you can add these to your view:
this.ToolbarItems.Add(cancelItem);
this.ToolbarItems.Add(doneItem);
You can even bind the CommandProperty:
doneItem.SetBinding(MenuItem.CommandProperty, "DoneClicked");
Or simply handle the event when the user taps the item:
doneItem.Clicked += (object sender, System.EventArgs e) =>
{
// Perform action
};
Remember to wrap your Modal in a NavigationPage, as the ToolbarItems otherwise will not appear.
Hope this helps.
Do the following in the constructor of the page doing the navigation push. This will work for all pages pushed on to the stack.
NavigationPage.SetBackButtonTitle(this, "Cancel");
Where this is the ContentPage (or any type of page) of course