Is there a way to prevent a user from switching Tabs in a TabBar? (Windows)

Question

I have a TabBar and several Shell tabs. It's a desktop application running on Windows 10.

On some of the tabs the user can start a long running file process operation asynchronously and I need to be able to prevent the user from switching to other tabs while the file processing is going on. There doesn't seem to be any way to know when the user clicks on a different tab in the TabBar and prevent the tab switch. I've tried setting the IsEnabled property to false on the Tab but it doesn't have any affect. The user can still click on any Tab.

It's easy enough to know when the process is running. The problem is having an event or something to be able to check, and then prevent the tab switch.

Any advice would be appreciated.

Thanks!

Answer 1

Hello,

The problem is having an event or something to be able to check, and then prevent the tab switch.

You can check the tab switch operation by creating custom TabBar, then override the OnPropertyChanged method. Then use this custom tabbar in your AppShell.xaml.

public class MyTab : TabBar
    {        
        protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            if (propertyName == "CurrentItem")
            {
                int index = this.Items.IndexOf(this.CurrentItem);
                
                if(index == 0)
                {
                    
                }
                if(index == 1)
                {
                    
                }

            }
        }
    }

But I cannot find a method to prevent the tab switch. You can add a feature request in the MAUI Github page.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Answer 2

Hello there,

Unfortunately you cannot disable the standard TabBar selectors. But you can do your own custom ones, e.g. like this:

struct ContentView: View {
    
    @State private var currentTab = "Home"
    @State private var activeTabs: Set<String> = ["Home"] // saves the activated tabs

    var body: some View {
        VStack {
            TabView(selection: $currentTab) {
                // Tab Home
                VStack(spacing: 20) {
                    Text("Home Tab")
                    Button("Unlock Hint 1") { activeTabs.insert("Hint 1")}
                    Button("Unlock Hint 2") { activeTabs.insert("Hint 2")}
                }
                .tag("Home")
                
                // Tab 1. Hint
                VStack {
                    Text("Your first Hint")
                }
                .tag("Hint 1")

                // Tab 2. Hint
                VStack {
                    Text("Your Second Hint")
                }
                .tag("Hint 2")
            }
            // custom Tabbar buttons
            Divider()
            HStack {
                OwnTabBarButton("Home", imageName: "house.fill")
                OwnTabBarButton("Hint 1", imageName: "1.circle")
                OwnTabBarButton("Hint 2", imageName: "2.circle")
            }
        }
    }
    
    func OwnTabBarButton(_ label: String, imageName: String) -> some View {
            Button {
                currentTab = label
            } label: {
                VStack {
                    Image(systemName: imageName)
                    Text(label)
                }
            }
            .disabled(!activeTabs.contains(label))
            .padding([.horizontal,.top])
    }
}

Hope this resolves your Query !!

--If the reply is helpful, please Upvote and Accept it as an answer–

Answer 3

Double post