question

jarnobeerten-8260 avatar image
0 Votes"
jarnobeerten-8260 asked GerardWalschlager-8784 answered

winui3 not showing content of page that renders in tabviewitem

When i have .net5
winui3
tabview
that renders a page when adding the view but not is showing in the tabview

windows-uwpwindows-app-sdk-winui3
· 4
5 |1600 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.

code using


private void TabView_AddTabButtonClick(TabView sender, object args)
{
sender.TabItems.Add(CreateNewTab(sender.TabItems.Count));
}

     private void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
     {
         sender.TabItems.Remove(args.Tab);
     }

     private TabViewItem CreateNewTab(int index)
     {
         TabViewItem newItem = new TabViewItem();

         newItem.Header = $"Home";
         newItem.IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.NewWindow };

         // The content of the tab is often a frame that contains a page, though it could be any UIElement.
         Frame frame = new Frame();

         switch (index % 3)
         {
             case 0:
                 frame.Navigate(typeof(Home));
                 break;
             case 1:
                 frame.Navigate(typeof(Home));
                 break;
             case 2:
                 frame.Navigate(typeof(Home));
                 break;
         }

         newItem.Content = frame;

         return newItem;
     }

     private void TabView_Loaded(object sender, RoutedEventArgs e)
     {
         for (int i = 0; i < 1; i++)
         {
             (sender as TabView).TabItems.Add(CreateNewTab(i));
         }
     }
0 Votes 0 ·

mainwindow xaml

<Window
x:Class="UiTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UiTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

 <TabView AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested" Loaded="TabView_Loaded">
        
 </TabView>

</Window>

0 Votes 0 ·

Are you developing a WPF using winui3 or a WinUI 3 desktop app?

0 Votes 0 ·

I tried your code in a WinUI 3 desktop app. And created a new page with a TextBlock. It works correctly on my side.
125822-image.png

Could you please tell me if you have added any controls to the Home Page. Is the Home Page a Winui3 Page Item?

125759-image.png


0 Votes 0 ·
image.png (29.8 KiB)
image.png (9.8 KiB)
GerardWalschlager-8784 avatar image
0 Votes"
GerardWalschlager-8784 answered

On the TabView control, try setting the HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment and VerticalContentAlignment to "Stretch". Without that, I too was getting blank content in my tabs instead of showing my WebView2 control content. This indeed fixed it. Otherwise the height of the tab is set to zero (width seemed to be fine however).

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

jarnobeerten-8260 avatar image
0 Votes"
jarnobeerten-8260 answered LusRodrigues-5178 commented

I got something working now but when using winui3 0.8 because 1.0 fails to install when rendering new Tab with webview2 the content in the tab item stays black
@RoyLi-MSFT

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

What happens is that the TabViewItem's content height is dependent on the content, but if you add a control who's height depends on the parent as content (say a Frame or a WebView2) this shortcircuits the height calculation on both controls and you get what appears to be an empty tab, but it's actually a tab with ActualHeight = 0 and all content hidden by it's lack of height.

To test this, try adding frame.Height = 500; and see if you can see the page then.

I'm looking for a solution to this aswell

0 Votes 0 ·