WinRt WebView "Back Button" - xaml

I'm using the WebView control in a Metro app. I'd like to implement a "Back" button function, but can't seem to locate an inbuilt one. Can anyone tell me if there is one, or do I need to roll my own (admittedly not the most complex coding task, but I don't want to reinvent the wheel)?

This worked for me:
webView.InvokeScript("eval", new[] { "history.go(-1)" });

Unfortunately you will have to roll your own. You should be able to use something like:
webView.InvokeScript("history.back();");
or possibly
webView.InvokeScript("history.go(-1);");

The suggested code works. Here it is more complete:
in the xaml
<Button Content="Back" HorizontalAlignment="Left" Margin="580,98,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
in the xaml.cs
private void Button_Click_1(object sender, RoutedEventArgs e)
{
webView.InvokeScript("eval", new[] { "history.go(-1)" });
}

Related

I'm trying to go to another page when clicking a button. How could i do this (WinUI 3)

I'm trying to go to another page when clicking a button. How could i do this.
I tried using a NavigationViewItem but it didn't work.
The NavigationViewItem you posted is used in UWP.
If it is a WinUI3 project, then you need to refer to this document, use Navigate.
the relevant code samples are as follows.
xaml
<Button x:Name="myButton" Click="myButton_Click"/>
xaml.cs
private void myButton_Click(object sender, RoutedEventArgs e)
{
Frame rootFrame = new Frame();
this.Content = rootFrame;
rootFrame.Navigate(typeof(BlankPage1), null);
}

How to implement text boxes with multiple options like people app at runtime in uwp app?

I am developing a UWP app and I have to make a control like in the People app for Windows 10.
I am currently trying this
<StackPanel x:Name="stp">
<Button Content="Button 1" x:Name="btnAction1">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Action 1" Click="MenuFlyoutItem_Click">
</MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>
and in c#
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
btnAction1.Margin = new Thickness(0, 10, 0, 0);
stp.Children.Add(new TextBox() { Name = "newTxtBox", Text="Tushar"});
}
But this will end up handling UI too much with no animation at all. I want to give an option to the user to remove this dynamically created control.
After that I would want something like this:Dynamically adding textboxes with animation and option to close
Can anybody please help?
Thanks in advance.
Check the documentation of Flyout and use the LightDismissOverlayMode property to suit your scenario. If any particular UI specific implementation required, post a screenshot.

RenderTargetBitmap messes up the WebView scaling

I have a very simple repro case of RenderTargetBitmap.RenderAsync overload messing up the WebView scaling. All I have on the MainPage is a WebView and a button:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView Source="http://bing.com"></WebView>
<Button Content="Render me"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Click="ButtonBase_OnClick" />
</Grid>
In code behind there's only a simple event handler
private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(this, 1280, 720);
}
This is what the page looks like before RenderAsync call:
and this is what happens after the call:
Any idea why and how to prevent this? Note that it only happens if I call
await rtb.RenderAsync(this, 1280, 720);
but NOT if I call the overload without the scaling
await rtb.RenderAsync(this);
EDIT: Due to the first answer I received, I wanted to clarify why the aspect ratio is not the problem here, but only serves the purpose of proving that there actually is a problem. Think of the following scenario - very high DPI screen where only a lower resolution screenshot is needed - even if you scale it down with the RIGHT ratio, it still messes up the WebView. Also, for my scenario, resizing the screenshot manually afterwards is not an option - the RenderAsync overload with scaled dimensions is much much faster and I would really prefer to use that method.
Very strange behavior...
I found one very dirty (!) fix to this. I basically hide and show the webview (wv) again.
private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(wv, 1280, 720);
wv.Visibility = Visibility.Collapsed;
await Task.Delay(100);
wv.Visibility = Visibility.Visible;
}
I'm not proud of this solution and the webview flashes, but at least it's not 'blown up' any more...
This is a bit of a hack too, but I found that if you set the contents of another control through a WebViewBrush and then render that control, then the source WebView doesn't get any scaling. I have modified the XAML you provided so it looks like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="Target" Width="1280" Height="720" />
<WebView x:Name="webView" Source="http://bing.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></WebView>
<Button Content="Render me" Grid.Row="1"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Click="ButtonBase_OnClick" />
</Grid>
In your case, you should opt to set the Border control behind your WebView (however, don't change its Visibility or put it outside of the window bounds, as RenderAsync will fail). Then, on the code behind, set the Background of the target control to an instance of a WebViewBrush that feeds on the WebView:
private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
WebViewBrush brush = new WebViewBrush();
brush.SetSource(webView);
Target.Background = brush;
Target.InvalidateMeasure();
Target.InvalidateArrange();
RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(Target, 1280, 720);
var pixels = await rtb.GetPixelsAsync();
}
You will get your final image without any issues caused to the source WebView (however, note that the final image will look distorted since the aspect ratios don't match). However this comes with a few caveats, the most important one being that the WebView size must match the one of the RenderTargetBitmap or you will get empty areas.
Instead of using fixed values, use VisibleBounds to get the current window size.
Here's the code:
private async void pressMe_Click(object sender, RoutedEventArgs e)
{
var windowBounds = ApplicationView.GetForCurrentView().VisibleBounds;
RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(this, (int)windowBounds.Width, (int)windowBounds.Height);
}

Stop on click and restart to 0

<StackPanel>
<MediaElement x:Name="UnMediaElement"
Height="10"
Width="10"
Source="/Assets/sounds/unu.wav"
AutoPlay="False" />
<Button x:Name="play1SoundButton"
Height="80"
Width="200"
HorizontalAlignment="Left"
Content="Play Sound"
Click="play1SoundButton_Click" />
</StackPanel>
I have 2 buttons. When I press button1, it will play a sound. I want the sound to stop and restart to 0 when I press button2. Right now, if I press on button1 and then on 2 and then again on button1, it resumes. Also, I don't want to be able to play another sound while one is playing.
1) Your player just doesn't stop the looping audio instead it pauses it. If you are using an Audio Control that has "controlName.pause();" look for "controlname.Stop();". This will stop the whole audio loop and then will start from the beginning when you click your "Play Sound" Again.
2) On your Audio Control, There will be a flag method which will return you if your Control is In Use (Playing Something). If Yes, You can stop it and play next audio.
Few simple things before you go back to your code after reading this.
It would be lot better if you post some code and show where you are having problem. I cannot help but give you theoretical answers only since there is no info as to what your methods are doing exactly.
Edit: Based on the Code that you posted, Change your method to below. Then you should be able to play seamless media.
private void play1SoundButton_Click(object sender, RoutedEventArgs e)
{
if (DoiMediaElement.CurrentState == MediaElementState.Playing)
{
DoiMediaElement.Stop();
}
UnMediaElement.Play();
}
private void play2SoundButton_Click(object sender, RoutedEventArgs e)
{
if (UnMediaElement.CurrentState == MediaElementState.Playing)
{
UnMediaElement.Stop();
}
DoiMediaElement.Play();
}

Play sound clip in Windows Phone 8

I'm trying to do something that I thought would be pretty simple, but its not proving that way. I want to play a sound clip from a URI that I'm obtaining from an API. The URI provides an absolute URI to the audio clip.
I've tried using the MediaElement component and that works, except it hangs the UI while the clip is downloading/playing. This means a poor user experience and probably wouldn't get past store certification either.
I've also tried the SoundEffect class from the XNA framework, but that complains about an absolute URI – it seems this only works with relative links and thus wont suffice.
I'm wondering what other options I have for playing a sound clip in a windows phone 8 app that wont hang the UI
Any suggestions welcomed.
Thanks
Using media files on a network or the Internet is going to add latency to the app. You can't start playing the media until the phone has loaded the file. Use the MediaElement.MediaOpened to determine when the media is ready, then call .Play();
Of course, you need to let the users know that the media is downloading. My example uses the SystemTray ProgressIndicator to show the user a message.
XAML
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<StackPanel>
<Button x:Name='PlayButton'
Click='PlayButton_Click'
Content='Play Media' />
<MediaElement x:Name='media1'
MediaOpened='Media1_MediaOpened'
AutoPlay='False' />
</StackPanel>
</Grid>
CODE
private void Media1_MediaOpened(object sender, RoutedEventArgs e) {
// MediaOpened event occurs when the media stream has been
// validated and opened, and the file headers have been read.
ShowProgressIndicator(false);
media1.Play();
}
private void PlayButton_Click(object sender, RoutedEventArgs e) {
// the SystemTray has a ProgressIndicator
// that you can use to display progress during async operations.
SystemTray.ProgressIndicator = new ProgressIndicator();
SystemTray.ProgressIndicator.Text = "Acquiring media - OverTheTop.mp3 ";
ShowProgressIndicator(true);
// Get the media
media1.Source =
new Uri(#"http://freesologuitar.com/mps/DonAlder_OverTheTop.mp3",
UriKind.Absolute);
}
private static void ShowProgressIndicator(bool isVisible) {
SystemTray.ProgressIndicator.IsIndeterminate = isVisible;
SystemTray.ProgressIndicator.IsVisible = isVisible;
}