Adding a new tab in tabview with webview?

Question

question

MarkMather-7608 asked · May 09, 2020 at 11:02 PM

Adding a new tab in tabview with webview?

I added the code for the add tab but I'm getting errors I tried for a couple of days to correct the errors. I need some assistance. I posted the code below with a screenshot` of code here` of the new tab button.

         private void AddTab_Click(object sender, RoutedEventArgs e)
         {
             var newTab = new TabViewItem();
             newTab.IconSource = new SymbolIconSource() { Symbol = Symbol.Document };
             newTab.Header = "New Tab";
    
             Frame frame = new Frame();![8012-error.png][1]
             newTab.Content = frame;
             frame.Navigate(typeof("www.msn.com"));
    
             sender.TabItems.add(newTab);
         }

[1]: /answers/storage/attachments/8012-error.png

windows-uwp

error.png (29.1 KiB)

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2020-05-10T06:55:49.35Z

danielescipioni answered · May 10, 2020 at 06:55 AM

In addition to the 2 errors in the image attached I think that there is this error too: you are trying to open a website with a Frame, I think you need a WebView.

Moreover I think that you are using Microsoft.Toolkit.Uwp.UI.Controls.TabView but you are looking sample code for Microsoft.UI.Xaml.Controls.TabView

Microsoft.Toolkit.Uwp.UI.Controls.TabView comes with Microsoft.Toolkit.Uwp.UI.Controls NuGet package
Microsoft.UI.Xaml.Controls.TabView comes with Microsoft.UI.Xaml NuGet package

Try to change your method in this way:

private void AddTab_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var newTab = new TabViewItem {Icon = new SymbolIcon {Symbol = Symbol.Document}, Header = "New Tab"};

    WebView frame = new WebView(); 
    newTab.Content = frame;
    frame.Navigate(new Uri("http://www.msn.com"));

    Tabs.Items.Add(newTab);
    Tabs.SelectedItem = newTab;
}

· 13 ·

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MarkMather-7608 · May 10, 2020 at 03:30 PM

@danielescipioni Getting this error

I tried the suggestion the system has been giving me, but it fixes one thing and breaks the others

0 ·

error-3.png (30.8 KiB)

danielescipioni MarkMather-7608 · May 10, 2020 at 03:45 PM

Which is the x:Name of your TabView in the XAML? Replace "Tabs" with the x:Name of the TabView.

0 ·

MarkMather-7608 danielescipioni · May 10, 2020 at 03:52 PM

@danielescipioni I changed the name, it corrected the problem. but now it's moving really slow, and when I have more than one tab the first tab displays the website I want the second tabs title changes but the site stays the same

0 ·

error-4.png (88.1 KiB)

error-5.png (9.3 KiB)

Show more comments

MarkMather-7608 · May 10, 2020 at 05:18 PM

@danielescipioni thank you for your help it is working, anyway to fix the header to display the sites icon + friendly name

example:

Basic icon + http://www.facebook.com to site icon + Facebook

0 ·

tab6.png (1.3 KiB)

danielescipioni MarkMather-7608 · May 10, 2020 at 05:37 PM

I think this thread is going out of the scope of the original question.

Would be nice if you can mark my answer as accepted (if you this that the answer is OK) and post another question for the icon and title.

0 ·

MarkMather-7608 danielescipioni · May 10, 2020 at 05:39 PM

@danielescipioni Can you look at this:

https://docs.microsoft.com/en-us/answers/questions/25034/help-correcting-tab-header.html

And again thank you for all your help, with this and the other question

just realized you were the one that was helping with my other issue

0 ·

Answer 2 · 2020-05-09T23:07:36.34Z

SureshPatra-5922 answered · May 09, 2020 at 11:07 PM

Hi Mark,

Have you added Microsoft.Toolkit.Uwp.UI.Controls.dll assembly?

· 2 ·

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MarkMather-7608 · May 10, 2020 at 12:23 AM

Yes, I have added Microsoft.Toolkit.Uwp.UI.Controls and it's the latest one

0 ·

MarkMather-7608 · May 10, 2020 at 01:44 AM

@SureshPatra-5922 Yes and it the most recent release

0 ·

question