Skip to content

Commit

Permalink
Merge pull request #1261 from unoplatform/dev/ERLI/1129-TabBar-ItemTe…
Browse files Browse the repository at this point in the history 
…mplate

fix: Use proper container for TabBar ItemTemplate
  • Loading branch information
@eriklimakc
eriklimakc authored Oct 16, 2024
2 parents b8b4f16 + af386dd commit 9085724
Show file tree
Hide file tree
Showing 7 changed files with 368 additions and 71 deletions.
136 changes: 131 additions & 5 deletions ...les/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml
View file
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
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

0 comments on commit 9085724

Please sign in to comment.