Skip to content

Commit

Permalink
Merge pull request #362 from trimble-oss/350-the-first-tab-view-is-no…
Browse files Browse the repository at this point in the history 
…t-displaying-in-tabbedpage-in-windows

Changes for supporting tabbed page in windows
  • Loading branch information
@Sofiya-kumar
Sofiya-kumar committed Apr 1, 2024
2 parents aba9775 + 1520ce2 commit 416614e
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 134 deletions.
176 changes: 91 additions & 85 deletions Trimble.Modus.Components/Controls/TabBar/TMTabbedPage.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ public partial class TMTabbedPage : ContentPage
#region Private Fields
private Grid mainContainer;
private Grid tabStripContainer;
private CarouselView contentContainer;
private ObservableCollection<TabViewItem>? contentTabItems;
private CarouselView contentContainer;
private ContentView contentViewContainer;
private ObservableCollection<TabViewItem>? contentTabItems;
#endregion
#region Public Fields
public ObservableCollection<TabViewItem> TabItems { get; set; } = new();
Expand Down Expand Up @@ -61,26 +62,8 @@ public IList? TabItemsSource
#region Constructor
public TMTabbedPage()
{
InitializeComponent();

contentContainer = new CarouselView
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.GrayLight),
ItemsSource = TabItems,
ItemTemplate = new DataTemplate(() =>
{
var contentView = new ContentView();
contentView.SetBinding(ContentView.ContentProperty, "ContentView");
return contentView;
}),
IsSwipeEnabled = true,
IsScrollAnimated = true,
Loop = false,
HorizontalScrollBarVisibility = ScrollBarVisibility.Never,
VerticalScrollBarVisibility = ScrollBarVisibility.Never,

};

InitializeComponent();

tabStripContainer = new Grid
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.TrimbleBlue),
Expand All @@ -89,26 +72,61 @@ public TMTabbedPage()
};

mainContainer = new Grid
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.Red),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Children = { contentContainer, tabStripContainer },
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.Red),
RowSpacing = 0
};

mainContainer.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
mainContainer.RowDefinitions.Add(new RowDefinition { Height = 70 });

Grid.SetRow(contentContainer, 0);
mainContainer.RowDefinitions.Add(new RowDefinition { Height = 70 });

// TODO: Having issue with caursel view. So fixed the tabbed page to work with content view.
var isCurrentDevicePlatformIsWindows = DeviceInfo.Current.Platform == DevicePlatform.WinUI;
if (isCurrentDevicePlatformIsWindows)
{
contentViewContainer = new ContentView
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.GrayLight)
};
Grid.SetRow(contentViewContainer, 0);
mainContainer.Children.Add(contentViewContainer);
}
else
{
contentContainer = new CarouselView
{
BackgroundColor = ResourcesDictionary.ColorsDictionary(ColorsConstants.GrayLight),
ItemsSource = TabItems,
ItemTemplate = new DataTemplate(() =>
{
var contentView = new ContentView();
contentView.SetBinding(ContentView.ContentProperty, "ContentView");
return contentView;
}),
// TODO: Disbaled Swipe and Scroll animation. While scrolling tabs updating wrong content.
IsSwipeEnabled = false,
IsScrollAnimated = false,
Loop = false,
HorizontalScrollBarVisibility = ScrollBarVisibility.Never,
VerticalScrollBarVisibility = ScrollBarVisibility.Never,

};

contentContainer.PropertyChanged += OnContentContainerPropertyChanged;
// TODO: Disbaled Swipe and Scroll animation. While scrolling tabs updating wrong content.
//contentContainer.Scrolled += OnContentContainerScrolled;
Grid.SetRow(contentContainer, 0);
mainContainer.Children.Add(contentContainer);
}

mainContainer.Children.Add(tabStripContainer);
Grid.SetRow(tabStripContainer, 1);

Content = mainContainer;

TabItems.CollectionChanged += TabItems_CollectionChanged;
contentContainer.PropertyChanged += OnContentContainerPropertyChanged;
contentContainer.Scrolled += OnContentContainerScrolled;

TabItems.CollectionChanged += TabItems_CollectionChanged;


}
#endregion
#region Private Methods
Expand All @@ -123,7 +141,7 @@ private static void OnSelectedIndexChanged(BindableObject bindable, object oldVa
return;
}
if ((int)oldValue != selectedIndex)
tabView.UpdateSelectedIndex(selectedIndex);
tabView.UpdateSelectedIndex((int)oldValue, selectedIndex);
}
}
private static void OnTabColorPropertyChanged(BindableObject bindable, object oldValue, object newValue)
Expand Down Expand Up @@ -159,8 +177,8 @@ private void OnContentContainerPropertyChanged(object? sender, PropertyChangedEv
{
var selectedIndex = contentContainer.Position;
if (SelectedIndex != selectedIndex)
{
UpdateSelectedIndex(selectedIndex, true);
{
SelectedIndex = selectedIndex;
}
}
}
Expand All @@ -185,9 +203,9 @@ private void TabItems_CollectionChanged(object sender, System.Collections.Specia
AddTabViewItem(tabViewItem, TabItems.IndexOf(tabViewItem));
}
}
}

private void AddTabViewItem(TabViewItem item, int index = -1)
}

private void AddTabViewItem(TabViewItem tabViewItem, int index = -1)
{
var tabItem = new Grid()
{
Expand All @@ -211,12 +229,12 @@ private void AddTabViewItem(TabViewItem item, int index = -1)
{
Width = GridLength.Star
});
item.TabColor = TabColor;
item.Orientation = Orientation;
tabStripContainer.Add(item, index, 0);
AddSelectionTapRecognizer(item);
if (SelectedIndex != 0)
UpdateSelectedIndex(0);
tabViewItem.TabColor = TabColor;
tabViewItem.Orientation = Orientation;
tabStripContainer.Add(tabViewItem, index, 0);
AddSelectionTapRecognizer(tabViewItem);
if (SelectedIndex < 0)
SelectedIndex = 0;
}
private void AddSelectionTapRecognizer(View view)
{
Expand All @@ -237,9 +255,9 @@ private void AddSelectionTapRecognizer(View view)
if (CanUpdateSelectedIndex(capturedIndex))
{
if (SelectedIndex != capturedIndex)
UpdateSelectedIndex(capturedIndex);
}
SelectedIndex = capturedIndex;
}
};

view.GestureRecognizers.Add(tapGestureRecognizer);
Expand All @@ -262,62 +280,50 @@ private bool CanUpdateSelectedIndex(int selectedIndex)
return true;
}

private void UpdateSelectedIndex(int position, bool hasCurrentItem = false)
{
if (position < 0)
return;
var oldposition = SelectedIndex;

var newPosition = position;

private void UpdateSelectedIndex(int oldValue, int newValue)
{
MainThread.BeginInvokeOnMainThread(() =>
{
if (contentTabItems == null || contentTabItems.Count != TabItems.Count)
contentTabItems = new ObservableCollection<TabViewItem>(TabItems.Where(t => t.Content != null));
var contentIndex = position;
var tabStripIndex = position;
if (TabItems.Count > 0)
{
TabViewItem? currentItem = null;
if (hasCurrentItem)
currentItem = (TabViewItem)contentContainer.CurrentItem;
var tabViewItem = TabItems[position];
contentIndex = contentTabItems.IndexOf(tabViewItem);
tabStripIndex = TabItems.IndexOf(tabViewItem);
position = tabStripIndex;
{
for (var index = 0; index < TabItems.Count; index++)
{
if (index == position)
if (index == newValue)
{
TabItems[position].IsSelected = true;
TabItems[newValue].IsSelected = true;
}
else
{
TabItems[index].IsSelected = false;
TabItems[index].IsSelected = false;
}
}
}
// TODO: Having issue with caursel view. So fixed the tabbed page to work with content view.
if (contentViewContainer != null)
{
contentViewContainer.Content = TabItems[newValue].ContentView;
}
if (contentContainer != null)
{
if (tabStripContainer.Children.Count > 0)
contentContainer.ScrollTo(newValue, 1, ScrollToPosition.MakeVisible, false);
contentContainer.Position = newValue;
}
if (contentIndex >= 0)
contentContainer.Position = contentIndex;
if (tabStripContainer.Children.Count > 0)
contentContainer.ScrollTo(tabStripIndex, 1, ScrollToPosition.MakeVisible, false);
SelectedIndex = position;
if (oldposition != SelectedIndex)
if (oldValue != SelectedIndex)
{
var selectionChangedArgs = new TabSelectionChangedEventArgs()
{
NewPosition = newPosition,
OldPosition = oldposition
NewPosition = newValue,
OldPosition = oldValue
};
OnTabSelectionChanged(selectionChangedArgs);
Expand Down
40 changes: 24 additions & 16 deletions Trimble.Modus.Components/Controls/TabBar/TabViewItem.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,32 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Trimble.Modus.Components.TabViewItem">
<ContentView.Content>
<StackLayout x:Name="fullTab" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="4,0">
<Border x:Name="selectedBorder" Stroke="Transparent" >
<StackLayout x:Name="fullTab"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Padding="4,0">
<Border x:Name="selectedBorder"
Stroke="Transparent">
<Border.StrokeShape>
<RoundRectangle CornerRadius="40" />
<RoundRectangle CornerRadius="40" />
</Border.StrokeShape>
<StackLayout x:Name="tabItem" VerticalOptions="Center" HorizontalOptions="Center" Spacing="0" Padding="4">
<Image x:Name="icon" Source="{Binding Icon}"
HeightRequest="20"
WidthRequest="20"
HorizontalOptions="Center"/>
<Label
x:Name="text"
Text="{Binding Text}"
FontFamily="OpenSansBold"
FontSize="12"
TextColor="{Binding CurrentTextColor}"
VerticalOptions="Center"
HorizontalOptions="Center" />
<StackLayout x:Name="tabItem"
VerticalOptions="Center"
HorizontalOptions="Center"
Spacing="0"
Padding="4">
<Image x:Name="icon"
Source="{Binding Icon}"
HeightRequest="20"
WidthRequest="20"
HorizontalOptions="Center" />

<Label x:Name="text"
Text="{Binding Text}"
FontFamily="OpenSansBold"
FontSize="12"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</Border>
</StackLayout>
Expand Down

0 comments on commit 416614e

Please sign in to comment.