Working tab view
This commit is contained in:
parent
945b7e8e11
commit
cc0d113204
@ -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,17 +152,11 @@ namespace Aurora.Design.Components.TabView
|
|||||||
view.Content.BindingContext = BindingContext;
|
view.Content.BindingContext = BindingContext;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
SetCurrentTab(0, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// private void _carouselView_PositionSelected(object sender, PositionSelectedEventArgs e)
|
|
||||||
// {
|
|
||||||
// if (_carouselView.Position != e.NewValue || SelectedTabIndex != e.NewValue)
|
|
||||||
// {
|
|
||||||
// SetPosition(e.NewValue);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
private void AddTabToView(TabItem tab)
|
private void AddTabToView(TabItem tab)
|
||||||
{
|
{
|
||||||
var tabSize = (TabSizeOption.IsAbsolute && TabSizeOption.Value.Equals(0)) ? new GridLength(1, GridUnitType.Star) : TabSizeOption;
|
var tabSize = (TabSizeOption.IsAbsolute && TabSizeOption.Value.Equals(0)) ? new GridLength(1, GridUnitType.Star) : TabSizeOption;
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user