question

MarkMather-7608 avatar image
MarkMather-7608 asked ·

how do I display Friendly website name and Favicon?

How do I in the tabview header display the favIcon and friendly name?

like this example below:

8026-tab6.png


windows-uwp
tab6.png (1.3 KiB)
10 |1000 characters needed characters left characters exceeded

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

1 Answer

FayWang-MSFT avatar image
FayWang-MSFT answered ·

Hello,


Welcome to Microsoft Q&A!


In general, the value of icon in tabview header is available from Symbol enum, if you want to show the Favicon, you can use the TabView in Windows Community Toolkit and then custom head template. Adding image control as icon and pass the url to its Source property. For example:

 xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Update:

.xaml:

 <controls:TabView x:Name="Tabs"
                CanCloseTabs="True"
                IsCloseButtonOverlay="False"
                CanDragItems="True"
                CanReorderItems="False"
                AllowDrop="False"
                SelectedTabWidth="200" ItemsSource="{x:Bind Lists,Mode=OneWay}" Margin="0,60,0,0" TabNavigation="Local" TabFocusNavigation="Local">
     <controls:TabView.ItemHeaderTemplate>
         <DataTemplate x:DataType="local:MyViewModel">
             <StackPanel Orientation="Horizontal">
                 <Image Width="20" Height="20" Source="{Binding IconUrl}" Margin="0,0,10,0"></Image>
                 <TextBlock Text="{Binding HeaderName}"></TextBlock>
             </StackPanel>
         </DataTemplate>
     </controls:TabView.ItemHeaderTemplate>
     <controls:TabView.ItemTemplate>
         <DataTemplate x:DataType="local:MyViewModel">
             <WebView Source="{Binding WebUrl}"></WebView>
         </DataTemplate>
     </controls:TabView.ItemTemplate>
 </controls:TabView>

.cs:

 public class MyViewModel 
 {
     public string IconUrl { get; set; }
     public string WebUrl { get; set; }
     public string HeaderName { get; set; }
 }


 private ObservableCollection<MyViewModel> Lists { get; set; }

 public MainPage()
 {
     this.InitializeComponent();

     Lists = new ObservableCollection<MyViewModel>();
 }


When you try to add TabViewItem, just need to add a MyViewModel to Lists, it will also update the UI.

 Lists.Add(new MyViewModel() { WebUrl = "http://www.facebook.com", HeaderName="Facebook",IconUrl= "https://www.google.com/s2/favicons?domain=https://www.facebook.com/" });




24 comments Share
10 |1000 characters needed characters left characters exceeded

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

Im already using the Microsoft tool kit



     <controls:TabView x:Name="Tabs"
                       
                   TabWidthBehavior="Equal"
                   CanCloseTabs="True"
                   IsCloseButtonOverlay="False"
                   CanDragItems="True"
                   CanReorderItems="False"
                   AllowDrop="False"
                   SelectedTabWidth="200" Margin="0,60,0,0" TabNavigation="Local" TabFocusNavigation="Local" SelectionChanged="TabViewItem_SelectionChanged">


0 Votes 0 · ·

Second part of code

  private void WebView_NavigationCompleted_1(WebView sender, WebViewNavigationCompletedEventArgs args)
             {
                 if (args.IsSuccess == true)
                 {
                     TabView tabView = Tabs;
                     var selectedTabViewItem = (TabViewItem)tabView.SelectedItem;
                     if (selectedTabViewItem == null) return;
                     selectedTabViewItem.Header = args.Uri.ToString();
                     selectedTabViewItem.Icon = new SymbolIcon(Symbol.Globe);
                     StatusTextBox.Text = " completed successfully.";
        
                 }
                 else
                 {
                     StatusTextBox.Text = "Navigation to: " + args.Uri.ToString() +
                                            " failed with error " + args.WebErrorStatus.ToString();
        
                 }
             }
0 Votes 0 · ·

So do you want to change the Header to the friendly name and Icon to Favicon in the WebView_NavigationCompleted_1 event? You could try to customize head template like above I showed and use Binding to bind with Source property of Image control and Text property of TextBlock. Then in WebView_NavigationCompleted_1 event, just changing the properties.

0 Votes 0 · ·

Hi, have you solved your issue? Do you have other questions?

0 Votes 0 · ·

Hi, is there any update?

0 Votes 0 · ·

Sorry, was busy with appointments I haven't really had the chance to try the suggestion you provided, also Im confused on what you mean

0 Votes 0 · ·
Show more comments

the link was fixed tried on a different device, and I was able run the example


0 Votes 0 · ·

OK, so can my example solve your issue? Do you have other questions?

0 Votes 0 · ·