Skip to content
This repository was archived by the owner on May 1, 2024. It is now read-only.

Commit b3df22a

Browse files
jsuarezruizAndreiMisiukevichjfversluis
authored
TabViewItem VisualStates (#803)
Co-authored-by: Andrei <[email protected]> Co-authored-by: Gerald Versluis <[email protected]>
1 parent 6b8b7ef commit b3df22a

File tree

4 files changed

+131
-2
lines changed

4 files changed

+131
-2
lines changed

‎samples/XCT.Sample/Pages/Views/TabView/TabViewItemVisualStatePage.xaml‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<pages:BasePage
3+
xmlns:pages="clr-namespace:Xamarin.CommunityToolkit.Sample.Pages"
4+
xmlns="http://xamarin.com/schemas/2014/forms"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
6+
x:Class="Xamarin.CommunityToolkit.Sample.Pages.Views.TabView.TabViewItemVisualStatePage">
7+
<pages:BasePage.Resources>
8+
<ResourceDictionary>
9+
10+
</ResourceDictionary>
11+
</pages:BasePage.Resources>
12+
<ContentPage.Content>
13+
<xct:TabView
14+
TabStripPlacement="Bottom"
15+
TabStripBackgroundColor="Blue"
16+
TabStripHeight="60"
17+
TabIndicatorColor="Yellow"
18+
TabContentBackgroundColor="Yellow">
19+
<xct:TabViewItem
20+
Icon="triangle.png"
21+
Text="Tab 1"
22+
TextColor="White"
23+
TextColorSelected="Yellow"
24+
FontSize="12">
25+
<VisualStateManager.VisualStateGroups>
26+
<VisualStateGroup x:Name="CommonStates">
27+
<VisualState x:Name="Selected">
28+
<VisualState.Setters>
29+
<Setter Property="BackgroundColor" Value="Red" />
30+
</VisualState.Setters>
31+
</VisualState>
32+
<VisualState x:Name="Unselected">
33+
<VisualState.Setters>
34+
<Setter Property="BackgroundColor" Value="IndianRed" />
35+
</VisualState.Setters>
36+
</VisualState>
37+
</VisualStateGroup>
38+
</VisualStateManager.VisualStateGroups>
39+
<Grid
40+
BackgroundColor="Gray">
41+
<Label
42+
HorizontalOptions="Center"
43+
VerticalOptions="Center"
44+
Text="TabContent1" />
45+
</Grid>
46+
</xct:TabViewItem>
47+
<xct:TabViewItem
48+
Icon="circle.png"
49+
Text="Tab 2"
50+
TextColor="White"
51+
TextColorSelected="Yellow"
52+
FontSize="12">
53+
<VisualStateManager.VisualStateGroups>
54+
<VisualStateGroup x:Name="CommonStates">
55+
<VisualState x:Name="Selected">
56+
<VisualState.Setters>
57+
<Setter Property="BackgroundColor" Value="Green" />
58+
</VisualState.Setters>
59+
</VisualState>
60+
<VisualState x:Name="Unselected">
61+
<VisualState.Setters>
62+
<Setter Property="BackgroundColor" Value="LightGreen" />
63+
</VisualState.Setters>
64+
</VisualState>
65+
</VisualStateGroup>
66+
</VisualStateManager.VisualStateGroups>
67+
<Grid>
68+
<Label
69+
HorizontalOptions="Center"
70+
VerticalOptions="Center"
71+
Text="TabContent2" />
72+
</Grid>
73+
</xct:TabViewItem>
74+
<xct:TabViewItem
75+
Icon="rectangle.png"
76+
Text="Tab 3"
77+
TextColor="White"
78+
TextColorSelected="Yellow"
79+
FontSize="12">
80+
<VisualStateManager.VisualStateGroups>
81+
<VisualStateGroup x:Name="CommonStates">
82+
<VisualState x:Name="Selected">
83+
<VisualState.Setters>
84+
<Setter Property="BackgroundColor" Value="Pink" />
85+
</VisualState.Setters>
86+
</VisualState>
87+
<VisualState x:Name="Unselected">
88+
<VisualState.Setters>
89+
<Setter Property="BackgroundColor" Value="LightPink" />
90+
</VisualState.Setters>
91+
</VisualState>
92+
</VisualStateGroup>
93+
</VisualStateManager.VisualStateGroups>
94+
<Grid
95+
BackgroundColor="LightSteelBlue">
96+
<Label
97+
HorizontalOptions="Center"
98+
VerticalOptions="Center"
99+
Text="TabContent3" />
100+
</Grid>
101+
</xct:TabViewItem>
102+
</xct:TabView>
103+
</ContentPage.Content>
104+
</pages:BasePage>

‎samples/XCT.Sample/Pages/Views/TabView/TabViewItemVisualStatePage.xaml.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
namespace Xamarin.CommunityToolkit.Sample.Pages.Views.TabView
2+
{
3+
public partial class TabViewItemVisualStatePage : BasePage
4+
{
5+
public TabViewItemVisualStatePage() => InitializeComponent();
6+
}
7+
}

‎samples/XCT.Sample/ViewModels/Views/TabViewViewModel.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ protected override IEnumerable<SectionModel> CreateItems() => new[]
3838
new SectionModel(typeof(TabWidthPage), "TabWidth",
3939
"Customize the tabs width"),
4040

41+
new SectionModel(typeof(TabViewItemVisualStatePage), "TabViewItem VisualState",
42+
"Using TabViewItem VisualStates"),
43+
4144
new SectionModel(typeof(NoContentPage), "Tab without Content",
4245
"Only the TabStrip is visible")
4346
};

‎src/CommunityToolkit/Xamarin.CommunityToolkit/Views/TabView/TabViewItem.shared.cs‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ namespace Xamarin.CommunityToolkit.UI.Views
1010
[ContentProperty(nameof(Content))]
1111
public class TabViewItem : TemplatedView
1212
{
13+
public const string SelectedVisualState = "Selected";
14+
public const string UnselectedVisualState = "Unselected";
15+
1316
bool isOnScreen;
1417

1518
public static readonly BindableProperty TextProperty =
@@ -140,8 +143,11 @@ public bool IsSelected
140143

141144
static async void OnIsSelectedChanged(BindableObject bindable, object oldValue, object newValue)
142145
{
143-
(bindable as TabViewItem)?.UpdateCurrent();
144-
await (bindable as TabViewItem)?.UpdateTabAnimationAsync();
146+
if (bindable is TabViewItem tabViewItem)
147+
{
148+
tabViewItem.UpdateCurrent();
149+
await tabViewItem.UpdateTabAnimationAsync();
150+
}
145151
}
146152

147153
public static readonly BindableProperty BadgeTextProperty =
@@ -355,6 +361,7 @@ void UpdateCurrent()
355361
CurrentBadgeBorderColor = !IsSelected || BadgeBorderColorSelected == Color.Default ? BadgeBorderColor : BadgeBorderColorSelected;
356362

357363
UpdateCurrentContent();
364+
ApplyIsSelectedState();
358365
}
359366

360367
async Task UpdateTabAnimationAsync()
@@ -372,5 +379,13 @@ async Task UpdateTabAnimationAsync()
372379
else
373380
await TabAnimation.OnDeSelected(view);
374381
}
382+
383+
void ApplyIsSelectedState()
384+
{
385+
if (IsSelected)
386+
VisualStateManager.GoToState(this, SelectedVisualState);
387+
else
388+
VisualStateManager.GoToState(this, UnselectedVisualState);
389+
}
375390
}
376391
}

0 commit comments

Comments
 (0)