How to Programmatically Scroll UWP WebView? - c#

I'm making a simply UWP (Universal Windows 10 App) web app using a webview.
How can I return on the top of the page clicking on a button?
I can't find it on the MSDN.

You can use window.scrollTo(0,0) method, it is a JavaScript method that scrolls the document to position "0" horizontally and "0" vertically.
You can interact with the content of the WebView by using the InvokeScriptAsync method to invoke or inject script into the WebView content.
For example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView x:Name="theWebView" Source="https://msdn.microsoft.com/en-us/library/windows.ui.xaml.controls.webview.aspx">
</WebView>
<Button Content="To The Top" Click="Button_Click"></Button>
</Grid>
Code behind:
private string ScrollToTopString = #"window.scrollTo(0,0);";
private async void Button_Click(object sender, RoutedEventArgs e)
{
await theWebView.InvokeScriptAsync("eval", new string[] { ScrollToTopString });
}

Related

How can I capture WPF events from a Winforms app

I have an WPF User control which is is hosted in an Elementhost. I use elementhost to include an WPF user control in my classical Windows forms app.
Now, from Windows forms side I am trying to capture the mouseDown event that is produced in an WPF label but I don't know how to do it.
Any ideas?
A case might be able to help you. The winform form calls the wpf control.
Create a WPF custom control. The xaml code of the control is as follows.
<Grid>
<Image Margin="10,10,10,90" x:Name="img" Stretch="Uniform" Opacity="1">
<Image.BitmapEffect>
<DropShadowBitmapEffect Opacity="1" />
</Image.BitmapEffect>
</Image>
<TextBox Background="Transparent" Foreground="White" Height="40" FontSize="32" Margin="44,0,56,36" x:Name="txtBox1" Opacity="0.5" Text="" VerticalAlignment="Bottom" /> </Grid>
You need to add the corresponding function to set the effect. The code is as follows.
public void SetSource(string fileName)
{
img.Source = new BitmapImage(new Uri(fileName) );
}
public void SetOpacity(double opacity)
{
img.Opacity = opacity;
}
//
public string GetText()
{
return txtBox1.Text;
}
Create a Winform application and add a reference, otherwise the control will not work properly. The list of references is pictured below.
Regenerate the solution. On the left toolbar, a WPF control appears and drag it to the form.
Use the button control in the winform project to call the corresponding function.
private void button1_Click(object sender, EventArgs e)
{
((UserControl1)elementHost1.Child).SetSource(#"C:\Users\Admin\Pictures\Saved Pictures\9837f99502eba3d01d4fb671cab20c15.jpg");
}
private void button2_Click(object sender, EventArgs e)
{
((UserControl1)elementHost1.Child).SetOpacity(0.5);
}
private void button3_Click(object sender, EventArgs e)
{
string text = ((UserControl1)elementHost1.Child).GetText();
label1.Text = text;
}
Test items: The left side is the traditional Winform control. The right side is the imported WPF control. You can clearly see the "translucent" effect of the picture.
Not sure what exactly you're trying to achieve. Below is a simple example.You can edit the MouseDown event of the UserControl as needed.
If there is a problem, please make your problem clearer and show me the complete code sample that can reproduce your problem for analysis.
UserControl:
<Grid>
<Label x:Name="label" Content="Label" MouseDown="label_MouseDown" Background="AliceBlue" Width="300" Height="200" />
</Grid>
private void label_MouseDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("hello");
}
Add the UserControl reference in the WinForms project, drag and drop the UserControl on the Form1 designer after rebuilding the WinForms project.
The result of running the project and clicking the Label in the UserControl is shown in the figure.

UWP - Page navigation within another Page ('iOS UIContainerView with UINavigationController embeded' equivalent?)

I'm porting an iOS app to a UWP project and there is something I'd love to do to save a bit of repetition but not sure how to do it.
On iOS I would embed a UINavigationController inside a UIContainerView and be able to push/pop only a section of the screen instead of pushing a full page on top of another.
Is there any way to do something similar on a UWP project? I effectively want to have a Page within a Page, and on the Inner page, be able to push a new page on top of that page.
Example: Have 3 navigation buttons along the top of the page. They are 'Tabs' which load 1 page per button into the area below it. It's a highly customised TabBar. The buttons would be nice to have in their own page with the content for each 3 pages in it's own page.
Currently I'm, doing this by either re-using the buttons along the top in multiple pages. Or I can swap out multiple UserControls manually based on which button is pressed. One UserControl for each page.
Any help on the preferred method for this would be grand!
Cheers,
Dave.
Is there any way to do something similar on a UWP project? I effectively want to have a Page within a Page
If I didn't understand it wrong, you can use Frame.
For Example: On MainPage.Xaml you can define one Frame with three Buttons:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Button Name="btnPageOne" Content="Page One" Click="btnPageOne_Click"></Button>
<Button Name="btnPageTwo" Content="Page Two" Click="btnPageTwo_Click"></Button>
<Button Name="btnPageThree" Content="Page Three" Click="btnPageThree_Click"></Button>
<Frame Name="MyFrame" Width="500" Height="600"></Frame>
</StackPanel>
</Grid>
And on the click events of three buttons you can navigate the Frame to three pages:
private void btnPageOne_Click(object sender, RoutedEventArgs e)
{
MyFrame.Navigate(typeof(PageOne));
}
private void btnPageTwo_Click(object sender, RoutedEventArgs e)
{
MyFrame.Navigate(typeof(PageTwo));
}
private void btnPageThree_Click(object sender, RoutedEventArgs e)
{
MyFrame.Navigate(typeof(PageThree));
}
and on the Inner page, be able to push a new page on top of that page.
You can define a button on PageOne inside a StackPanel like below:
<Grid Name="rootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name="myStackPanel">
<Button Name="myBtn" Click="myBtn_Click">Click Me to add Page</Button>
</StackPanel>
</Grid>
And in the Click event add new Frames to that StackPanel:
private void myBtn_Click(object sender, RoutedEventArgs e)
{
Frame newFrame = new Frame{
Width=100,
Height=100
};
myStackPanel.Children.Add(newFrame);
newFrame.Navigate(typeof(SubPageOne));
}
Here is the basic Demo that I made: FrameNavigationSample

Loading a default home page in WebBrowser - Windows Phone

I'm trying to create a page in my app which will show simple text updates, and I'm planning on using a browser window to show this, so, to put it simply I want a browser windows within the app that will only show one page, I don't want the user to be able to navigate to another site.
I've got the browser window added in XAML like so:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser HorizontalAlignment="Left" Margin="12,6,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="595" Width="438"/>
</Grid>
I've then got this in the C# file:
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
//SaveFilesToIsoStore();
webBrowser1.Navigate(new Uri("http://www.nokia.ie/"/*, UriKind.Relative*/));
}
Basically, first of all, am I doing this the right way, and if so, how do I get the browser to display the web page?
Thanks.
listen to the browser navigation and stop navigation to any sites that you haven't defined
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
webBrowser1.Navigate(new Uri("http://www.nokia.ie/"));
webBrowser1.Navigating += OnNavigating;
}
private void OnNavigating(object sender, NavigatingEventArgs e)
{
//every navigation to any sites that is not www.nokia.ie will be blocked
if(e.Uri.OriginalString != "http://www.nokia.ie/")
{
e.Cancel=true;
}
}

Overlaying Silverlight control on top of HTML

I am using WebBrowser control in silverlight to show html page inside a Silverlight application. I have a drop down menu in the Silverlight application which Hides behind this HTML page. How can I make the HTML page to stay behind the Silverlight Controls.
Here is the Xaml
<Usercontrol>
<Grid x:Name="LayoutRoot" Background="Transparent" SizeChanged="LayoutRoot_SizeChanged">
<WebBrowser x:Name="HtmlHost" />
</Grid>
</UserControl>
and
private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.HtmlHost.Visibility = Visibility.Visible;
LayoutRoot.Visibility = Visibility.Visible;
}
Below screen shot shows the overlay. Help Please!!

How to access the Share option from CharmBar in Windows 8?

I am programming in C# for Windows Store apps but i am new to this platform. In my application i want to implement the share contract option when user click the Share button from Charm Bar.
I could see only SettingsPane and SearchPane API to access Settings and Search options but was not able to find anything with the name of SharePane. Is there any way to access the Share click handling in Windows Store apps ?
Here I am showing you the basic usage of share charm. In my example we will share text content from text box
DataTransferManager class does all the sharing. So first you will need the current instance of that class and invoke DataRequested event. So you have to assign event in OnNavigatedTo event & release event in OnNavigatedFrom event.
If you want to open share charm programmatically then write DataTransferManager.ShowShareUI(); in button's click event.
Code for the sample.
C#
DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
dataTransferManager.DataRequested += ShareTextHandler;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
dataTransferManager.DataRequested -= ShareTextHandler;
}
private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)
{
DataRequest request = e.Request;
request.Data.Properties.Title = "Share Text Example"; // You must have to set title.
request.Data.Properties.Description = "A demonstration that shows how to share text.";
request.Data.SetText(ShareText.Text);
}
private void Share_Click_1(object sender, RoutedEventArgs e)
{
DataTransferManager.ShowShareUI();
}
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<TextBox Width="500" Height="200" x:Name="ShareText" />
<Button Content="Share" Click="Share_Click_1" HorizontalAlignment="Center" />
</StackPanel>
</Grid>
MSDN Sample App
Quickstart: Sharing content (Windows Store apps using C#/VB/C++ and XAML)

Categories