question

jarnobeerten-8260 avatar image
0 Votes"
jarnobeerten-8260 asked jarnobeerten-8260 commented

How to get toolkit tabs uwp

I want the the tabs of uwp toolkit in the bear top is this possible good example is edge they got on bar top to

windows-uwp
· 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.

C# is programming langauge is use

0 Votes 0 ·

Could you please tell me what kind of app that you are developing? Is it a UWP app? I'm confused about your question. What behavior do you want to get? Could you please share more details about it?

0 Votes 0 ·

Uwp
C#
.net 5



I want the tabs of the uwp toolkit in top of the uwp app where normally the title and top buttons are ms edge has the tabs at the top when i am using toolkit i never get them on top but my qeustion how to get the tabs like on bair top where your close buttons

0 Votes 0 ·

120019-screenshot-20210803-113556-chrome.jpg




This is the bahavior i want the tabs at the same height as the close and minimize button

0 Votes 0 ·

1 Answer

RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered jarnobeerten-8260 commented

Hello,

Welcome to Microsoft Q&A!

If I understand you correctly you want to put the tabs at the same height as the Title bar so that the tabs are in the same line with the system buttons like the close button. If it is your requirement, then you could try to custom your title bar.

First of all, you hide your title by setting the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true. Then you need to add a custom title bar which a Transparent background to make sure the tab view could respond to user interaction. Another thing you need to note is that when you set an ElementFramework as the title bar of your app, your app will be unable to move by dragging the title bar. This is because that the customer title bar is supposed to be non-responsive and allow users to drag. But we replaced it with our custom title bar, so the behavior is changed.

I made a simple demo here and you could take a look:

Xaml Code:

     <StackPanel Background="Azure">
    
         <Grid
             x:Name="AppTitleBar"
             Height="32"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Background="Transparent">
             <Border
                 x:Name="AppTitleBorder"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Stretch"
                 Background="Transparent" />
         </Grid>
         <muxc:TabView AddTabButtonClick="TabView_AddTabButtonClick"
                TabCloseRequested="TabView_TabCloseRequested"/>
     </StackPanel>

Code behind:

   public MainPage()
         {
             this.InitializeComponent();
    
             // Get the application view title bar
             ApplicationViewTitleBar appTitleBar = ApplicationView.GetForCurrentView().TitleBar;
             // Make the title bar transparent
             appTitleBar.BackgroundColor = Colors.Transparent;
         //// make the button transparent
         appTitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
         appTitleBar.BackgroundColor = Windows.UI.Colors.Transparent;
    
             //  Get the core appication view title bar and extend the core application view into title bar
             // These two lins of code hide the default title bar.
             CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
             coreTitleBar.ExtendViewIntoTitleBar = true;
             // set custom title bar
             AppTitleBar.Height = coreTitleBar.Height;
             Window.Current.SetTitleBar(AppTitleBar);
         }
    
    
         // Add a new Tab to the TabView
         private void TabView_AddTabButtonClick(muxc.TabView sender, object args)
         {
             var newTab = new muxc.TabViewItem();
             newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
             newTab.Header = "New Document";
    
             // The Content of a TabViewItem is often a frame which hosts a page.
             Frame frame = new Frame();
             newTab.Content = frame;
             frame.Navigate(typeof(BlankPage1));
    
             sender.TabItems.Add(newTab);
         }
    
         // Remove the requested tab from the TabView
         private void TabView_TabCloseRequested(muxc.TabView sender, muxc.TabViewTabCloseRequestedEventArgs args)
         {
             sender.TabItems.Remove(args.Tab);
         }

The app looks like this:
120357-image.png

For more information, you could refer to Title bar customization.

Thank you.


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (9.7 KiB)
· 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.