Working tab view

This commit is contained in:
watsonb8 2019-12-22 19:30:58 -05:00
parent 945b7e8e11
commit cc0d113204
2 changed files with 20 additions and 110 deletions

View File

@ -9,10 +9,10 @@ using Aurora.Design.Converters;
namespace Aurora.Design.Components.TabView namespace Aurora.Design.Components.TabView
{ {
public delegate void PositionChangingEventHandler(object sender, PositionChangingEventArgs e); public delegate void PositionChangingEventHandler(object sender, TabChangingEventArgs e);
public delegate void PositionChangedEventHandler(object sender, TabChangedEventArgs e); public delegate void PositionChangedEventHandler(object sender, TabChangedEventArgs e);
public class PositionChangingEventArgs : EventArgs public class TabChangingEventArgs : EventArgs
{ {
public bool Canceled { get; set; } public bool Canceled { get; set; }
public int NewPosition { get; set; } public int NewPosition { get; set; }
@ -36,15 +36,12 @@ namespace Aurora.Design.Components.TabView
{ {
private StackLayout _mainContainerSL; private StackLayout _mainContainerSL;
private Grid _headerContainerGrid; private Grid _headerContainerGrid;
// private CarouselViewControl _carouselView;
private ScrollView _tabHeadersContainerSv; private ScrollView _tabHeadersContainerSv;
private ContentPresenter _tabPresenter;
public event PositionChangingEventHandler PositionChanging; public event PositionChangingEventHandler PositionChanging;
public event PositionChangedEventHandler PositionChanged; public event PositionChangedEventHandler PositionChanged;
protected virtual void OnTabChanging(ref PositionChangingEventArgs e) protected virtual void OnTabChanging(ref TabChangingEventArgs e)
{ {
PositionChangingEventHandler handler = PositionChanging; PositionChangingEventHandler handler = PositionChanging;
handler?.Invoke(this, e); handler?.Invoke(this, e);
@ -109,41 +106,6 @@ namespace Aurora.Design.Components.TabView
tab.HeaderTabTextFontAttributes = HeaderTabTextFontAttributes; tab.HeaderTabTextFontAttributes = HeaderTabTextFontAttributes;
} }
private bool _supressCarouselViewPositionChangedEvent;
/// <summary>
/// Allows for intercepting carousel property changing
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
// private void _carouselView_PropertyChanged(object sender, PropertyChangedEventArgs e)
// {
// if (e.PropertyName == nameof(_carouselView.Position) && !_supressCarouselViewPositionChangedEvent)
// {
// var positionChangingArgs = new PositionChangingEventArgs()
// {
// Canceled = false,
// NewPosition = _carouselView.Position,
// OldPosition = SelectedTabIndex
// };
// OnPositionChanging(ref positionChangingArgs);
// if (positionChangingArgs != null && positionChangingArgs.Canceled)
// {
// _supressCarouselViewPositionChangedEvent = true;
// _carouselView.PositionSelected -= _carouselView_PositionSelected;
// _carouselView.PropertyChanged -= _carouselView_PropertyChanged;
// _carouselView.Position = SelectedTabIndex;
// _carouselView.PositionSelected += _carouselView_PositionSelected;
// _carouselView.PropertyChanged += _carouselView_PropertyChanged;
// _supressCarouselViewPositionChangedEvent = false;
// }
// SetPosition(positionChangingArgs.NewPosition);
// }
// }
private void Init() private void Init()
{ {
ItemSource = new ObservableCollection<TabItem>(); ItemSource = new ObservableCollection<TabItem>();
@ -166,32 +128,16 @@ namespace Aurora.Design.Components.TabView
HorizontalOptions = LayoutOptions.FillAndExpand HorizontalOptions = LayoutOptions.FillAndExpand
}; };
_tabPresenter = new ContentPresenter();
// _carouselView = new CarouselViewControl
// {
// HorizontalOptions = LayoutOptions.FillAndExpand,
// VerticalOptions = LayoutOptions.FillAndExpand,
// HeightRequest = ContentHeight,
// ShowArrows = false,
// ShowIndicators = false,
// BindingContext = this
// };
// _carouselView.PropertyChanged += _carouselView_PropertyChanged;
// _carouselView.PositionSelected += _carouselView_PositionSelected;
_mainContainerSL = new StackLayout _mainContainerSL = new StackLayout
{ {
HorizontalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand,
Children = { _tabHeadersContainerSv, _tabPresenter }, Children = { _tabHeadersContainerSv },
// Children = { _tabHeadersContainerSv, _carouselView }, //Need to set new child in place of carousel
Spacing = 0 Spacing = 0
}; };
Content = _mainContainerSL; Content = _mainContainerSL;
ItemSource.CollectionChanged += ItemSource_CollectionChanged; ItemSource.CollectionChanged += ItemSource_CollectionChanged;
SetCurrentTab(SelectedTabIndex, true);
} }
protected override void OnBindingContextChanged() protected override void OnBindingContextChanged()
@ -206,16 +152,10 @@ namespace Aurora.Design.Components.TabView
view.Content.BindingContext = BindingContext; view.Content.BindingContext = BindingContext;
} }
} }
}
}
// private void _carouselView_PositionSelected(object sender, PositionSelectedEventArgs e) SetCurrentTab(0, true);
// { }
// if (_carouselView.Position != e.NewValue || SelectedTabIndex != e.NewValue) }
// {
// SetPosition(e.NewValue);
// }
// }
private void AddTabToView(TabItem tab) private void AddTabToView(TabItem tab)
{ {
@ -261,9 +201,7 @@ namespace Aurora.Design.Components.TabView
HeightRequest = HeaderSelectionUnderlineThickness, HeightRequest = HeaderSelectionUnderlineThickness,
WidthRequest = HeaderSelectionUnderlineWidth WidthRequest = HeaderSelectionUnderlineWidth
}; };
//selectionBarBoxView.SetBinding(IsVisibleProperty, nameof(TabItem.IsCurrent));
var underlineColorBinding = new Binding(nameof(TabItem.IsCurrent), BindingMode.OneWay, new SelectedTabHeaderToTabBackgroundColorConverter(), this); var underlineColorBinding = new Binding(nameof(TabItem.IsCurrent), BindingMode.OneWay, new SelectedTabHeaderToTabBackgroundColorConverter(), this);
//selectionBarBoxView.SetBinding(BoxView.ColorProperty, nameof(TabItem.HeaderSelectionUnderlineColor), BindingMode.OneWay, new SelectedTabHeaderToTabBackgroundColorConverter(), );
selectionBarBoxView.SetBinding(BoxView.BackgroundColorProperty, underlineColorBinding); selectionBarBoxView.SetBinding(BoxView.BackgroundColorProperty, underlineColorBinding);
selectionBarBoxView.SetBinding(WidthRequestProperty, nameof(TabItem.HeaderSelectionUnderlineWidth)); selectionBarBoxView.SetBinding(WidthRequestProperty, nameof(TabItem.HeaderSelectionUnderlineWidth));
@ -293,19 +231,14 @@ namespace Aurora.Design.Components.TabView
}; };
var tapRecognizer = new TapGestureRecognizer(); var tapRecognizer = new TapGestureRecognizer();
//Appears to set the current view
tapRecognizer.Tapped += (object s, EventArgs e) => tapRecognizer.Tapped += (object s, EventArgs e) =>
{ {
// _supressCarouselViewPositionChangedEvent = true;
var capturedIndex = _headerContainerGrid.Children.IndexOf((View)s); var capturedIndex = _headerContainerGrid.Children.IndexOf((View)s);
SetCurrentTab(capturedIndex); SetCurrentTab(capturedIndex);
// _supressCarouselViewPositionChangedEvent = false;
}; };
headerItemSL.GestureRecognizers.Add(tapRecognizer); headerItemSL.GestureRecognizers.Add(tapRecognizer);
_headerContainerGrid.Children.Add(headerItemSL, _headerContainerGrid.ColumnDefinitions.Count - 1, 0); _headerContainerGrid.Children.Add(headerItemSL, _headerContainerGrid.ColumnDefinitions.Count - 1, 0);
//Sets caourselview itemssource to current tab
// _carouselView.ItemsSource = ItemSource.Select(t => t.Content);
} }
#region HeaderBackgroundColor #region HeaderBackgroundColor
@ -529,56 +462,34 @@ namespace Aurora.Design.Components.TabView
} }
int oldPosition = SelectedTabIndex; int oldPosition = SelectedTabIndex;
var positionChangingArgs = new PositionChangingEventArgs() var tabChangingArgs = new TabChangingEventArgs()
{ {
Canceled = false, Canceled = false,
NewPosition = position, NewPosition = position,
OldPosition = oldPosition OldPosition = oldPosition
}; };
OnTabChanging(ref positionChangingArgs); OnTabChanging(ref tabChangingArgs);
if (positionChangingArgs != null && positionChangingArgs.Canceled) if (tabChangingArgs != null && tabChangingArgs.Canceled)
{ {
return; return;
} }
if (((position >= 0 && position < ItemSource.Count) || initialRun) && if (((position >= 0 && position < ItemSource.Count) || initialRun))
oldPosition != position)
{ {
if (oldPosition < ItemSource.Count) if (oldPosition < ItemSource.Count && _mainContainerSL.Children.Count == 2)
{ {
ItemSource[oldPosition].IsCurrent = false; ItemSource[oldPosition].IsCurrent = false;
//Remove second child
_mainContainerSL.Children.RemoveAt(1);
} }
_tabPresenter.Content = ItemSource[position].Content; _mainContainerSL.Children.Add(ItemSource[position].Content);
ItemSource[position].IsCurrent = true; ItemSource[position].IsCurrent = true;
SelectedTabIndex = position; SelectedTabIndex = position;
Device.BeginInvokeOnMainThread(async () => await _tabHeadersContainerSv.ScrollToAsync(_headerContainerGrid.Children[position], ScrollToPosition.MakeVisible, false)); Device.BeginInvokeOnMainThread(async () => await _tabHeadersContainerSv.ScrollToAsync(_headerContainerGrid.Children[position], ScrollToPosition.MakeVisible, false));
} }
//Need to change to not use carouselView
// if ((position >= 0 && position < ItemSource.Count) || initialRun)
// {
// if (_carouselView.Position != position || initialRun)
// {
// _carouselView.PositionSelected -= _carouselView_PositionSelected;
// _carouselView.Position = position;
// _carouselView.PositionSelected += _carouselView_PositionSelected;
// }
// if (oldPosition != position)
// {
// if (oldPosition < ItemSource.Count)
// {
// ItemSource[oldPosition].IsCurrent = false;
// }
// ItemSource[position].IsCurrent = true;
// SelectedTabIndex = position;
// Device.BeginInvokeOnMainThread(async () => await _tabHeadersContainerSv.ScrollToAsync(_headerContainerGrid.Children[position], ScrollToPosition.MakeVisible, false));
// }
// }
var tabChangedArgs = new TabChangedEventArgs() var tabChangedArgs = new TabChangedEventArgs()
{ {
NewPosition = SelectedTabIndex, NewPosition = SelectedTabIndex,
@ -637,7 +548,6 @@ namespace Aurora.Design.Components.TabView
_headerContainerGrid.Children.RemoveAt(_headerContainerGrid.Children.Count - 1); _headerContainerGrid.Children.RemoveAt(_headerContainerGrid.Children.Count - 1);
_headerContainerGrid.ColumnDefinitions.Remove(_headerContainerGrid.ColumnDefinitions.Last()); _headerContainerGrid.ColumnDefinitions.Remove(_headerContainerGrid.ColumnDefinitions.Last());
} }
// _carouselView.ItemsSource = ItemSource.Select(t => t.Content);
SelectedTabIndex = position >= 0 && position < ItemSource.Count ? position : ItemSource.Count - 1; SelectedTabIndex = position >= 0 && position < ItemSource.Count ? position : ItemSource.Count - 1;
} }
} }

View File

@ -18,6 +18,11 @@
VerticalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
x:Name="TabView"> x:Name="TabView">
<tabView:TabViewControl.ItemSource> <tabView:TabViewControl.ItemSource>
<tabView:TabItem
HeaderText="Members">
<Label
Text="Members" TextColor="White"/>
</tabView:TabItem>
<tabView:TabItem <tabView:TabItem
HeaderText="Queue"> HeaderText="Queue">
<library:Library <library:Library
@ -25,11 +30,6 @@
SelectedItem="{Binding SelectedSong}" SelectedItem="{Binding SelectedSong}"
ItemDoubleClicked="{Binding PlayCommand}"/> ItemDoubleClicked="{Binding PlayCommand}"/>
</tabView:TabItem> </tabView:TabItem>
<tabView:TabItem
HeaderText="Members">
<Label
Text="Members"/>
</tabView:TabItem>
</tabView:TabViewControl.ItemSource> </tabView:TabViewControl.ItemSource>
</tabView:TabViewControl> </tabView:TabViewControl>
</StackLayout> </StackLayout>