How do I in the tabview header display the favIcon and friendly name?
like this example below:
How do I in the tabview header display the favIcon and friendly name?
like this example below:
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/" });
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">
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();
}
}
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.
Hi, have you solved your issue? Do you have other questions?
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
the link was fixed tried on a different device, and I was able run the example
OK, so can my example solve your issue? Do you have other questions?
13 people are following this question.
How to write and read multiple types of data using Data Writer and Data Reader
Consuming UWP mail api from WPF Desktop Bridge App
Get Network usage information in UWP apps
How to Get/Set Cookies in Windows.Web.Http API
Switch the ListView Datatemplate from one data template to another data template?