Help correcting tab header

Question

question

MarkMather-7608 asked May 3, '20 RoyLi-MSFT edited May 11, '20

Help correcting tab header

I need help correcting the tabview tab header title and the Website Icon isn't showing up

Right now I seeing this

 private void Neutron_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
         {
             if (args.IsSuccess == true)
             {
                 StatusTextBox.Text = &#34; completed successfully.&#34;;
                 Tabs.Header = args.Uri.ToString();
             }
             else
             {
                 StatusTextBox.Text = &#34;Navigation to: &#34; + args.Uri.ToString() +
                                        &#34; failed with error &#34; + args.WebErrorStatus.ToString();
    
             }
         }
    
         }
     }

windows-uwp

tab.png (10.2 KiB)

tab2.png (14.1 KiB)

5 |1600 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-03T20:41:49.797Z

MarkMather-7608 answered May 3, '20 RoyLi-MSFT edited May 11, '20

here is the code i don't think I named it

 <Page
     x:Class="Frost.Browser2"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Frost"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       
       
     <Grid>
    
         <Grid.RowDefinitions>
             <RowDefinition/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
    
         <controls:TabView x:Name="TabViewItem"
                          
                       TabWidthBehavior="Equal"
                       CanCloseTabs="True"
                       IsCloseButtonOverlay="False"
                       CanDragItems="True"
                       CanReorderItems="False"
                       AllowDrop="False"
                       SelectedTabWidth="200" Margin="0,60,0,0" TabNavigation="Local" TabFocusNavigation="Local">
    
             <controls:TabView.Resources>
    
                 <x:Double x:Key="TabViewItemHeaderMinHeight">40</x:Double>
                 <x:Double x:Key="TabViewItemHeaderMinWidth">55</x:Double>
                 <x:Double x:Key="TabViewItemHeaderMaxWidth">200</x:Double>
    
             </controls:TabView.Resources>
    
    
             <controls:TabView.TabStartHeader>
    
                 <Button Width="48"
                 Height="{StaticResource TabViewItemHeaderMinHeight}"
                 Margin="0,0,-1,0"
                 BorderThickness="1"
                 Background="Transparent" 
                 Style="{StaticResource ButtonRevealStyle}" 
                 Padding="2,2,0,0">
                     <Viewbox MaxWidth="16" MaxHeight="16">
                         <SymbolIcon Symbol="OpenPane"/>
                     </Viewbox>
                 </Button>
             </controls:TabView.TabStartHeader>
    
             <!-- Tabs -->
             <controls:TabViewItem 
                    
                 Header="Home" Icon="Home" ManipulationMode="ScaleInertia" CanDrag="True">
                 <WebView x:Name="Neutron" ContentLoading="Neutron_ContentLoading" DOMContentLoaded="Neutron_DOMContentLoaded" NavigationCompleted="Neutron_NavigationCompleted" />
    
             </controls:TabViewItem>
    
    
             <controls:TabView.TabActionHeader>
                 <Button x:Name="AddTabButtonUpper"
                 Width="48"
                 Height="{StaticResource TabViewItemHeaderMinHeight}"
                 Margin="-1,0,0,0"
                 BorderThickness="1"
                 Background="Transparent"
                 Style="{StaticResource ButtonRevealStyle}">
                     <Viewbox MaxWidth="16"
                     MaxHeight="16">
                         <FontIcon FontFamily="Segoe MDL2 Assets"
                       Glyph="&#xE710;" />
                     </Viewbox>
                 </Button>
    
             </controls:TabView.TabActionHeader>
    
    
    
             <controls:TabView.Footer>
                 <TextBlock x:Name="StatusTextBox" Padding="12,8,12,8"
                    HorizontalAlignment="Left"
                    FontSize="12" FontWeight="Bold"
                    Text="Ready" />
    
             </controls:TabView.Footer>
    
         </controls:TabView>
    
         <Button Content="&#xE0A6;" FontFamily="Segoe MDL2 Assets" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.371,0.344" RequestedTheme="Default" Height="32" Width="42" Background="White"/>
         <Button Content="" FontFamily="Segoe MDL2 Assets" Margin="57,10,0,0" VerticalAlignment="Top" Height="32" Width="42" Background="#33E8E8E8"/>
         <Button Content="&#xE117;" FontFamily="Segoe MDL2 Assets" Margin="104,11,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" Background="#33FDFDFD"/>
         <TextBox HorizontalAlignment="Left" Margin="204,10,0,0" Text="" TextWrapping="Wrap" VerticalAlignment="Top" Width="1330" PlaceholderText="Enter Address" AllowDrop="True" BackgroundSizing="InnerBorderEdge" ElementSoundMode="Default" KeyDown="TextBox_KeyDown" Height="31"/>
         <Button Content="&#xE10F;" FontFamily="Segoe MDL2 Assets" Margin="154,11,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" Background="#33FFFFFF"/>
         <Button Content="&#xE712;" FontFamily="Segoe MDL2 Assets" Margin="0,11,10,0" VerticalAlignment="Top" RenderTransformOrigin="-0.485,0.852" Height="31" Width="45" HorizontalAlignment="Right" Background="#33EEEEEE">
                
         </Button>
    
     </Grid>
 </Page>

· 6

5 |1600 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.

danielescipioni · May 03, 2020 at 08:51 PM

1 Please start using comments and reply to comments instead to post new answers

2 You named it TabViewItem (that is not much correct as the control is a TabView)

<controls:TabView x:Name="TabViewItem"

I updated my previous answer, please check it.

0 ·

MarkMather-7608 danielescipioni · May 03, 2020 at 09:33 PM

k I changed the name from

"TabViewItem" to Tabs it worked

0 ·

tab5.png (5.0 KiB)

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

Sorry about the posting of new answers instead of the comments.

0 ·

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

@danielescipioni here is my other question

0 ·

MarkMather-7608 · May 03, 2020 at 09:32 PM

here is the example of the look I'm going for

And thank you so much for you help, sorry for asking to many questions I'm new to uwp I'm normally using basic wanted to learn something new

0 ·

tab6.png (1.3 KiB)

RoyLi-MSFT MarkMather-7608 · May 11, 2020 at 07:45 AM

You could accept @danielescipioni 's answer if his solution helps you solve the issue. That will help other people who have the same issue.

0 ·

Answer 2 · 2020-05-03T19:32:58.593Z

MarkMather-7608 answered May 3, '20

   <controls:TabViewItem 
                    
                 Header="Home" Icon="Home" ManipulationMode="ScaleInertia" CanDrag="True">
                 <WebView x:Name="Neutron" ContentLoading="Neutron_ContentLoading" DOMContentLoaded="Neutron_DOMContentLoaded" NavigationCompleted="Neutron_NavigationCompleted" />
    
             </controls:TabViewItem>

5 |1600 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 3 · 2020-05-03T20:28:39.703Z

danielescipioni answered May 3, '20 danielescipioni edited May 3, '20

Change the control name to TabView to give it a more correct name, here the XAML

<controls:TabView x:Name="TabView"

then use this

private void Neutron_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    if (args.IsSuccess)
    {
        var selectedTabViewItem = (TabViewItem) TabView.SelectedItem;
        if (selectedTabViewItem == null) return;
        selectedTabViewItem.Header = args.Uri.ToString();
        selectedTabViewItem.Icon = new SymbolIcon(Symbol.Accept);
    }
}

To fill "selectedTabViewItem.Icon" you can use an instance of classes BitmapIcon, FontIcon, IconSourceElement, PathIcon, SymbolIcon depending what you want to show.

5 |1600 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 4 · 2020-05-03T20:37:09.677Z

MarkMather-7608 answered May 3, '20 danielescipioni commented May 3, '20

Im getting this error

These are the options I'm getting while trying to fix, also how do you in example make it say "icon" facebook

tab3.png (32.0 KiB)

tab4.png (26.8 KiB)

· 1

5 |1600 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.

danielescipioni · May 03, 2020 at 08:39 PM

How did you named your TabView control?

0 ·

question