Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Use proper container for TabBar ItemTemplate #1261

Merged
merged 12 commits into from
Oct 16, 2024
Merged

fix: Use proper container for TabBar ItemTemplate #1261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
823b493
fix: Use proper container for TabBar ItemTemplate
eriklimakc Oct 8, 2024
8d5e967
chore: fix tabbar selection when using template with TBI
Xiaoy312 Oct 8, 2024
4eb4df9
chore: fix tabbar selection indicator
Xiaoy312 Oct 8, 2024
f425504
chore: fix SelectedIndexChanged when using tbi template
eriklimakc Oct 9, 2024
78ed3eb
chore: Fix tbi style when using ItemTemplate
eriklimakc Oct 9, 2024
61b455f
chore: Add ItemTemplate TabBarItem disabled example
eriklimakc Oct 9, 2024
8418378
fix: Remove unexistent tbi theme resource
eriklimakc Oct 10, 2024
b570680
test: Add templated tbi disabled is not selectable
eriklimakc Oct 10, 2024
3628d17
chore: Workaround test to pass on android
eriklimakc Oct 10, 2024
1c4ecec
chore: Properly have tbi container applied
eriklimakc Oct 11, 2024
8b35f42
test: Add tbi vs cp container test
eriklimakc Oct 14, 2024
af386dd
chore: Add comments for clarification on TabBar GetInnerContainer
eriklimakc Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 131 additions & 5 deletions ...les/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<DataTemplate>
<StackPanel Padding="0,20"
Spacing="20">
<!-- Standard TabBar Style -->
<!-- Standard TabBar Style -->
<TextBlock Text="Top TabBar Style"
Style="{StaticResource MaterialHeadline6}" />

Expand Down Expand Up @@ -106,7 +106,7 @@
Text="{Binding Data.Tab3Count}" />
</TextBlock>

<!-- Colored TabBar Style -->
<!-- Colored TabBar Style -->
<TextBlock Text="Top TabBar Colored Style"
Style="{StaticResource MaterialHeadline6}" />

Expand Down Expand Up @@ -182,7 +182,7 @@
</TextBlock>


<!-- Bottom TabBar Style -->
<!-- Bottom TabBar Style -->
<TextBlock Text="Bottom TabBar Style"
Style="{StaticResource MaterialHeadline6}" />

Expand Down Expand Up @@ -265,6 +265,7 @@
<DataTemplate>
<StackPanel Padding="0,20"
Spacing="20">

<!--#region TopTabBarStyle-->
<TextBlock Text="Standard TabBar Style"
Style="{StaticResource HeadlineSmall}" />
Expand Down Expand Up @@ -337,6 +338,7 @@
</utu:TabBar.Items>
</utu:TabBar>
</ContentControl>

<TextBlock HorizontalAlignment="Center"
Style="{StaticResource LabelSmall}">
<Run Text="Tab 1 clicked count:" />
Expand All @@ -352,6 +354,47 @@
AutomationProperties.AutomationId="M3_Tab3_Count"
Text="{Binding Data.Tab3Count}" />
</TextBlock>

<TextBlock Text="ItemTemplate with TabBarItem" />
<ContentControl Height="130"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource TopTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with TextBlock" />
<ContentControl Height="130"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource TopTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with Disabled item" />
<ContentControl Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar Style="{StaticResource TopTabBarStyle}"
ItemsSource="{Binding Data.MenuItems}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding Name}"
IsEnabled="{Binding IsSelectable}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>
<!--#endregion-->

<!--#region ColoredTopTabBarStyle-->
Expand Down Expand Up @@ -591,6 +634,47 @@
</utu:TabBar.Items>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with TabBarItem" />
<ContentControl Height="130"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource BottomTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with TextBlock" />
<ContentControl Height="130"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource BottomTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with Disabled item" />
<ContentControl Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar Style="{StaticResource BottomTabBarStyle}"
ItemsSource="{Binding Data.MenuItems}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding Name}"
IsEnabled="{Binding IsSelectable}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>
<!--#endregion-->

<!--#region VerticalTabBarStyle-->
Expand Down Expand Up @@ -677,6 +761,7 @@
</utu:TabBar.Items>
</utu:TabBar>
</ContentControl>

<TextBlock HorizontalAlignment="Center"
Style="{StaticResource LabelSmall}">
<Run Text="Tab 1 clicked count:" />
Expand Down Expand Up @@ -747,8 +832,49 @@
</utu:TabBar.Items>
</utu:TabBar>
</ContentControl>
<!--#endregion-->

<TextBlock Text="ItemTemplate with TabBarItem" />
<ContentControl Height="500"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource VerticalTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with TextBlock" />
<ContentControl Height="500"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar SelectedIndex="0"
ItemsSource="{Binding Data.Items}"
Style="{StaticResource VerticalTabBarStyle}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>

<TextBlock Text="ItemTemplate with Disabled item" />
<ContentControl Height="500"
Template="{StaticResource TabBarSampleTemplate}">
<utu:TabBar Style="{StaticResource VerticalTabBarStyle}"
ItemsSource="{Binding Data.MenuItems}">
<utu:TabBar.ItemTemplate>
<DataTemplate>
<utu:TabBarItem Content="{Binding Name}"
IsEnabled="{Binding IsSelectable}" />
</DataTemplate>
</utu:TabBar.ItemTemplate>
</utu:TabBar>
</ContentControl>
<!--#endregion-->
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
Expand All @@ -757,7 +883,7 @@
<DataTemplate>
<StackPanel Padding="0,20"
Spacing="20">
<!-- Bottom TabBar Style -->
<!-- Bottom TabBar Style -->
<TextBlock Text="Bottom TabBar Style"
Style="{StaticResource CupertinoHeadline}" />

Expand Down
56 changes: 30 additions & 26 deletions .../Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
using Uno.Toolkit.Samples.Content.NestedSamples;
using Uno.Toolkit.Samples.Entities;
using Uno.Toolkit.Samples.ViewModels;
using Uno.Toolkit.UI;
using Windows.Foundation;
using Windows.Foundation.Collections;

Expand Down Expand Up @@ -74,43 +75,46 @@ private void ShowM3MaterialVerticalBarSampleInNestedFrame(object sender, RoutedE

public class TabBarViewModel : ViewModelBase
{
public int Tab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int Tab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int Tab3Count { get => GetProperty<int>(); set => SetProperty(value); }
public int Tab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int Tab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int Tab3Count { get => GetProperty<int>(); set => SetProperty(value); }

public int MaterialBottomTab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialBottomTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialBottomTab3Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialBottomTab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialBottomTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialBottomTab3Count { get => GetProperty<int>(); set => SetProperty(value); }

public int MaterialVerticalTab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialVerticalTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialVerticalTab3Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialVerticalTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int MaterialVerticalTab3Count { get => GetProperty<int>(); set => SetProperty(value); }

public int CupertinoBottomTab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int CupertinoBottomTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int CupertinoBottomTab3Count { get => GetProperty<int>(); set => SetProperty(value); }
public int CupertinoBottomTab1Count { get => GetProperty<int>(); set => SetProperty(value); }
public int CupertinoBottomTab2Count { get => GetProperty<int>(); set => SetProperty(value); }
public int CupertinoBottomTab3Count { get => GetProperty<int>(); set => SetProperty(value); }

public List<string> Items { get => GetProperty<List<string>>(); set => SetProperty(value); }
public List<string> Items { get => GetProperty<List<string>>(); set => SetProperty(value); }
public List<TestRecord> MenuItems { get => GetProperty<List<TestRecord>>(); set => SetProperty(value); }

public ICommand Tab1CountCommand => new Command(_ => Tab1Count++);
public ICommand Tab2CountCommand => new Command(_ => Tab2Count++);
public ICommand Tab3CountCommand => new Command(_ => Tab3Count++);
public ICommand Tab1CountCommand => new Command(_ => Tab1Count++);
public ICommand Tab2CountCommand => new Command(_ => Tab2Count++);
public ICommand Tab3CountCommand => new Command(_ => Tab3Count++);

public ICommand MaterialBottomTab1CountCommand => new Command(_ => MaterialBottomTab1Count++);
public ICommand MaterialBottomTab2CountCommand => new Command(_ => MaterialBottomTab2Count++);
public ICommand MaterialBottomTab3CountCommand => new Command(_ => MaterialBottomTab3Count++);
public ICommand MaterialBottomTab1CountCommand => new Command(_ => MaterialBottomTab1Count++);
public ICommand MaterialBottomTab2CountCommand => new Command(_ => MaterialBottomTab2Count++);
public ICommand MaterialBottomTab3CountCommand => new Command(_ => MaterialBottomTab3Count++);

public ICommand MaterialVerticalTab1CountCommand => new Command(_ => MaterialVerticalTab1Count++);
public ICommand MaterialVerticalTab2CountCommand => new Command(_ => MaterialVerticalTab2Count++);
public ICommand MaterialVerticalTab3CountCommand => new Command(_ => MaterialVerticalTab3Count++);
public ICommand MaterialVerticalTab1CountCommand => new Command(_ => MaterialVerticalTab1Count++);
public ICommand MaterialVerticalTab2CountCommand => new Command(_ => MaterialVerticalTab2Count++);
public ICommand MaterialVerticalTab3CountCommand => new Command(_ => MaterialVerticalTab3Count++);

public ICommand CupertinoBottomTab1CountCommand => new Command(_ => CupertinoBottomTab1Count++);
public ICommand CupertinoBottomTab2CountCommand => new Command(_ => CupertinoBottomTab2Count++);
public ICommand CupertinoBottomTab3CountCommand => new Command(_ => CupertinoBottomTab3Count++);
public ICommand CupertinoBottomTab1CountCommand => new Command(_ => CupertinoBottomTab1Count++);
public ICommand CupertinoBottomTab2CountCommand => new Command(_ => CupertinoBottomTab2Count++);
public ICommand CupertinoBottomTab3CountCommand => new Command(_ => CupertinoBottomTab3Count++);

public TabBarViewModel()
public TabBarViewModel()
{
Items = new List<string> { "Tab 1", "Tab 2", "Tab 3" };
Items = new List<string> { "Tab 1", "Tab 2", "Tab 3" };
MenuItems = [new TestRecord("True", true), new TestRecord("False", false), new TestRecord("True", true)];
}
}
public record TestRecord(string Name, bool IsSelectable);
}
Loading
Loading