Felix-Dev
commented
4 years ago Why not use the TabView.TabStripHeader API for that as a starting point and then write the additional logic?
Also see this image:
This sounds like something an app developer could create on their own, and WinUI only provides some helper tools for that (like the TabStripHeader API). Not sure how great the idea is to have a feature like this baked into the TabView control itself since on first thought it appears quite "heavy" to me.
michael-hawker
Proposal: Have a HomeTabView for the TabView
Summary
When we have 8+ elements in a TabView, having a 'menu' button in the header of the TabView to show all TabViewItems. When we click on one of them, the 'menu' closes and the selected TabView item is shown.
Rationale
Scope
Important Notes
For example, the Home button could be something like this :
And inside the TabView we could see it like this :
When we click on the Home Button, we could render things like this :
On the example, if we click on 'Header 4', the Home Page closes and the TabView scroll to Header 4.
The Seach zone allow us to search our TabViewItem we want. To keep things easy, by default the Search function will search by Header... But having a custom function to make the search could be useful too...
The Search zone can be visible or collapsed. The home button can be visible or collapsed.
` public static DependencyProperty IsHomeVisibleProperty {get;} = DependencyProperty.Register( nameof(IsHomeVisible), typeof(bool), typeof(TabView), new PropertyMetadata(true));
public bool IsHomeVisible { get => (bool)GetValue(IsHomeVisibleProperty); set => SetValue(IsHomeVisibleProperty, value); }
public static DependencyProperty IsSearchAutoSuggestBoxVisibleProperty {get;} = DependencyProperty.Register( nameof(IsSearchAutoSuggestBoxVisible), typeof(bool), typeof(TabView), new PropertyMetadata(true));
public bool IsSearchAutoSuggestBoxVisible { get => (bool)GetValue(IsSearchAutoSuggestBoxVisibleProperty); set => SetValue(IsSearchAutoSuggestBoxVisibleProperty, value); }
public static DependencyProperty SearchFunctionProperty {get;} = DependencyProperty.Register( nameof(SearchFunction), typeof(Func<TabViewItem, HomeTabViewItem, bool>), typeof(TabView), new PropertyMetadata(null));
public Func<TabViewItem, HomeTabViewItem, bool> SearchFunction { get => (bool)GetValue(SearchFunctionVisibleProperty); set => SetValue(SearchFunctionVisibleProperty, value); }
// Somewhere in the TabView code if(SearchFunction == null) { SearchFunction = new Func<TabViewItem, HomeTabViewItem, bool>(OnSearch)); }
private bool OnSearch(TabViewItem tvi, HomeTabViewItem htvi) { if(tvi==null) throw new ArgumentNullException(nameof(tvi));
if(htvi==null) throw new ArgumentNullException(nameof(htvi));
return Equals(tvi.Header, htvi.Header); } `
If multiple TabViewItems have the same Header, we show them and if we select one of them, we jump into the good TabViewItem.
As the visual tree cannot be shared, maybe we need to link the TabViewItem with its 'clone' inside the Home page. Maybe TabViewItem needs to have a unique identifier when we create it.
Open Questions