How to get toolkit tabs uwp

Question

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

Answer 1

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:

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.