I am using WP8 webbrowser control to show an html page and xaml is like this
<Grid Grid.Row="1" >
<phone:WebBrowser IsScriptEnabled="True" x:Name="mainBrowserControl">
<tools:GestureService.GestureListener>
<tools:GestureListener DragCompleted="GestureListener_DragCompleted"/>
</tools:GestureService.GestureListener>
</phone:WebBrowser>
</Grid>
What i want to do is to show an application bar when user selects some text in browser.And for doing that i listen to DragCompleted event and show the Applicationbar when some selection of text is there.The code used is
private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
string selected_text = "";
try
{
selected_text= //get selected text from browser
}
catch { }
if (!string.IsNullOrEmpty(selected_text.Trim()))
{
Show Applicationbar menus
}
}
But the problem with this approach is if user simply selects a text in browser , the default copy icon is visible but how can i show the applicationbar menu as well in the bottom(Since i am not dragging the selection , just make a selection only - more like double click) See the image attached
First question. you can get selected content in WebBrowser via this
function GetSelectedText() {
window.external.Notify(document.selection.createRange().htmlText);
}
in your GestureListener_DragCompleted you call browser.InvokeScript("GetSelectedText");
you can get the text in browser.ScriptNotify event
Second question, I have no idea too. If you get a solution, Please let me know. Thank you!
Related
I'm currently developing an Universal Application, but here is a problem. I have a Frame with the TextBox for User Phone Number.
So, I want to change the height of my LayoutRoot (GRID) so it can fits in the free space.
I'm using InputPane.GetForCurrentView().Showing and InputPane.GetForCurrentView().Hiding for that purposes.
Here is my code.
public UserRegistrationAuthorization_PhoneNumber()
{
this.InitializeComponent();
LayoutRootInitialHeight = LayoutRoot.ActualHeight;
InputPane.GetForCurrentView().Showing += UserRegistrationAuthorization_PhoneNumber_Showing;
InputPane.GetForCurrentView().Hiding += UserRegistrationAuthorization_PhoneNumber_Hiding;
}
private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
LayoutRoot.Height = LayoutRoot.ActualHeight - args.OccludedRect.Height;
LayoutRoot.VerticalAlignment = VerticalAlignment.Top;
args.EnsuredFocusedElementInView = true;
}
private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
// TODO: Get rid of that shit
LayoutRoot.Height = LayoutRootInitialHeight;
args.EnsuredFocusedElementInView = false;
}
When I click outside the TextBox keyboard hides and leaves after that a black hole on the screen. 2
But, the most interesting is that when I press that physical Back Button on my Lumia, keyboard hides normally and my LayoutRoot gets the Frame's initial height.
Is it a bug or I'm doing something wrong?
It happens because by the time you saving your LayoutRootInitialHeight in the constructor, LayoutRoot actually isn't loaded and it's ActualHeight == 0. Then you setting LayoutRoot.Height to 0, so it becomes not visible. So you should probably save your LayoutRootInitialHeight in LayoutRoot's Loaded event handler.
I would also suggest you not to change LayoutRoot's height at all. It causes your whole visual tree to be rendered from scratch and it's bad practise in general. Instead, modify RenderTransform of all necessary elements so they get moved to appropriate positions. RenderTransform is the right way to handle movements and animations on the screen, and you can achieve some nice visual effects with Next button moving up same as keyboard.
Roughly your code can look like this:
<Button Content="Next" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center">
<Button.RenderTransform>
<CompositeTransform x:Name="NextButtonTransform" TranslateY="0"/>
</Button.RenderTransform>
</Button>
...
private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
NextButtonTransform.TranslateY = -300;
EnsuredFocusedElementInView = true;
}
private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
NextButtonTransform.TranslateY = 0;
args.EnsuredFocusedElementInView = false;
}
And more complicated way is to run some storyboard which makes your Next button move up and down in same speed with keyboard, always appearing on top of it. Although, since InputPane.GetForCurrentView().Showing gets fired after keyboard already shown fully, you should hook up all animations to TextBox.GotFocus and TextBox.LostFocus events. On mobile, keyboard is always shown when text box has focus, so it will work nicely.
I've got a Flyout embedded within an AppBarButton like so:
<AppBarButton x:Name="appbarbtnOpenPhotosets" Icon="OpenFile" Label="Open Existing Photoset[s]" AutomationProperties.Name="Open File" Tapped="appbarbtnOpenPhotosets_Tapped" >
<Button.Flyout>
. . .
</Button.Flyout>
</AppBarButton>
I want to, under certain circumstances, first present the user with an opportunity to rename a file prior to seeing the Flyout. I tried seeing if that would work like this:
async private void appbarbtnOpenPhotosets_Tapped(object sender, TappedRoutedEventArgs args)
{
// Want to conditionally postpone the operation
bool myBucketsGotAHoleInIt = PhotraxUtils.GetLocalSetting(CAINT_BUY_NO_BEER);
if (myBucketsGotAHoleInIt)
{
MessageDialog dlgDone = new MessageDialog("Can you see me now?");
await dlgDone.ShowAsync();
args.Handled = false; // <= adding this made no difference
}
}
This works, in that I see the "Can you see me now?" dialog, but that prevents the Flyout from flying out. A Flyout that doesn't fly out is no more useful than a flying squirrel or fish that doesn't motate through the air.
So how can I temporarily suppress my flyout but then call it forth? The Flyout does not have an Open() method...Is there some other way to invoke it?
Flyouts attached to Buttons open automatically when you click the control.
If you don't want it to open automatically, you need to attach it to another control.
Example taken from official documentation:
<!-- Flyout declared inline on a FrameworkElement -->
<TextBlock>
<FlyoutBase.AttachedFlyout>
<Flyout>
<!-- Flyout content -->
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
Then you can show the Flyout whenever you want, calling FlayoutBase.ShowAttachedFlyout() and passing the FrameworkElement casted value of your control.
FlyoutBase.ShowAttachedFlyout(frameworkElement);
So, in your case:
async private void appbarbtnOpenPhotosets_Tapped(object sender, TappedRoutedEventArgs args)
{
// Want to conditionally postpone the operation
bool myBucketsGotAHoleInIt = PhotraxUtils.GetLocalSetting(CAINT_BUY_NO_BEER);
if (myBucketsGotAHoleInIt)
{
MessageDialog dlgDone = new MessageDialog("Can you see me now?");
await dlgDone.ShowAsync();
// New code
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
}
If you can't change the control, you should able to use the code I posted with Buttoninstead of TextBlock. I'm not sure about this, but you can try.
I am developing a Login screen in which the user needs to introduce their data and then submit them.
Considerations which I had: I have thought about using a Page, but eventually I rejected the idea because if I put Login page before the MainPage, then if I go back from MainPage, then it would go to Login page, which is not what I want. And if Login page were after MainPage, then if I execute for instance the app for first time, without being logged in, if I press back, then it would go to MainPage which I don't want as well.
The problem: I decided finally to use a Popup. At the moment looks perfect, but when I want to use a textbox, the Keyboard overlaps that textbox, and what I want is to move the Popup upwards just like a normal page. I don't know if is that possible, otherwise I am willing to hear some alternatives.
Thank you in advance.
In WMAppManifest.xml remove the property of Navigation Page and in you App.xaml.cs you have something like:
private void Application_Launching(object sender, LaunchingEventArgs e)
{
LoadDefautPage();
}
void LoadDefautPage()
{
if (StartForFirstTime)//tombstone local variable
{
if (!IsLoggedIn)//flag save it in IsolatedStorageSettings
{
RootFrame.Navigate(new Uri("/LoginPage.xaml", UriKind.Relative));
}
else
{
RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}
StartForFirstTime = false;
}
}
finally remove Back Entry in MainPage:
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
while (this.NavigationService.CanGoBack)
{
this.NavigationService.RemoveBackEntry();
}
}
It's just an idea, let me know how it goes (:
I have a PhoneApplicationPage with some grids, images and a few buttons. If I tap outside my buttons, anywhere in the page (on an image, grid or whatever), I want to open a new page.
How can I detect a tap/click anywhere on the page?
I see at least two ways to do that:
Listen to the MouseLeftButtonUp event on your PhoneApplicationPage. It should be triggered by images and labels but not by buttons
Listen to the Tap event on your PhoneApplicationPage. However, this event will be triggered even when the user tap on a button. To prevent this, you can retrieve the list of controls at the tap coordinates in the event handler, and open the new page only if there's no button:
private void PhoneApplicationPage_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
var element = (UIElement)sender;
var controls = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(element), element);
if(controls.OfType<Button>().Any())
{
return;
}
// Open the new page
}
html file has two textbox and one button.
but i need to generate click event when i only click outside of the two textboxes and button
element.how can i do that.
RootPanel.get().addEventListener or something like that?? help.
Typing anywhere in the browser window will trigger alert pop-up:
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
NativeEvent ne = event.getNativeEvent();
if (KeyDownEvent.getType().getName().equals(ne.getType())) {
Window.alert("who fired me last?"
+ event.getNativeEvent().getCurrentEventTarget()
+ "\nevent target:" + event.getNativeEvent().getEventTarget());
}
}
});
I don't know, if RootPanel.get().addEventListener works, but you can add another panel, which contains the three elements. To the new panel you can add an listener.