[Core] Add Selected VisualState for IndicatorView (#13534)

* [Controls] Add repo for issue #13515 * [Core] Add selected state to IndicatorView Fixes part of #13515
xamarin · Feb 10, 2021 · 109bc1a · 109bc1a
1 parent 020fc33
commit 109bc1a
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 7 deletions.
diff --git a/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorGalleries.cs b/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorGalleries.cs
@@ -19,7 +19,9 @@ public IndicatorGalleries()
 						GalleryBuilder.NavButton("IndicatorView Gallery", () =>
 							new IndicatorsSample(), Navigation),
 						GalleryBuilder.NavButton("Indicator MaxVisible Gallery", () =>
-							new IndicatorsSampleMaximumVisible(), Navigation)
+							new IndicatorsSampleMaximumVisible(), Navigation),
+						GalleryBuilder.NavButton("Indicator VisualState", () =>
+							new IndicatorsTemplateSample(), Navigation)
 					}
 				}
 			};

diff --git a/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSample.xaml b/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSample.xaml
@@ -5,7 +5,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:local="clr-namespace:Xamarin.Forms.Controls"
              mc:Ignorable="d"
-             x:Class="Xamarin.Forms.Controls.IndicatorsSample">
+             x:Class="Xamarin.Forms.Controls.GalleryPages.IndicatorsSample">
     <ContentPage.Resources>
         <OnPlatform x:Key="IonicsFontFamily" x:TypeArguments="x:String">
             <On Platform="iOS" Value="Ionicons" />
@@ -25,7 +25,7 @@
                 <DataTemplate>
                     <Frame BackgroundColor="{Binding Color}">
                         <Grid HorizontalOptions="Center" VerticalOptions="Center">
-                            <Label Text="{Binding Name}" FontSize="25"></Label>
+                            <Label Text="{Binding Name}" FontSize="25"/>
                         </Grid>
                     </Frame>
                 </DataTemplate>

diff --git a/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSample.xaml.cs b/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSample.xaml.cs
@@ -1,6 +1,6 @@
 using Xamarin.Forms.Xaml;
 
-namespace Xamarin.Forms.Controls
+namespace Xamarin.Forms.Controls.GalleryPages
 {
 	[XamlCompilation(XamlCompilationOptions.Compile)]
 	public partial class IndicatorsSample : ContentPage

diff --git a/...in.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSampleMaximumVisible.xaml b/...in.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSampleMaximumVisible.xaml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="Xamarin.Forms.Controls.IndicatorsSampleMaximumVisible">
+             x:Class="Xamarin.Forms.Controls.GalleryPages.IndicatorsSampleMaximumVisible">
     <ContentPage.Resources>
         <OnPlatform x:Key="IonicsFontFamily" x:TypeArguments="x:String">
             <On Platform="iOS" Value="Ionicons" />

diff --git a/...Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSampleMaximumVisible.xaml.cs b/...Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsSampleMaximumVisible.xaml.cs
@@ -1,7 +1,7 @@
 using System;
 using Xamarin.Forms.Controls.GalleryPages.CollectionViewGalleries.CarouselViewGalleries;
 
-namespace Xamarin.Forms.Controls
+namespace Xamarin.Forms.Controls.GalleryPages
 {
 	public partial class IndicatorsSampleMaximumVisible : ContentPage
 	{

diff --git a/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsTemplateSample.xaml b/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsTemplateSample.xaml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Xamarin.Forms.Controls.GalleryPages.IndicatorsTemplateSample">
+    <ContentPage.Resources>
+        <OnPlatform x:Key="IonicsFontFamily" x:TypeArguments="x:String">
+            <On Platform="iOS" Value="Ionicons" />
+            <On Platform="Android" Value="fonts/ionicons.ttf#" />
+            <On Platform="UWP" Value="Assets/Fonts/ionicons.ttf#ionicons" />
+        </OnPlatform>
+        <x:String x:Key="Indicator">&#xf30c;</x:String>
+        <Style x:Key="IndicatorLabelStyle" TargetType="Label">
+            <Setter Property="VisualStateManager.VisualStateGroups">
+                <VisualStateGroupList>
+                    <VisualStateGroup x:Name="CommonStates">
+                        <VisualState x:Name="Normal" >
+                            <VisualState.Setters>
+                                <Setter Property="TextColor"
+                                        Value="Red" />
+                            </VisualState.Setters>
+                        </VisualState>
+                        <VisualState x:Name="Selected">
+                            <VisualState.Setters>
+                                <Setter Property="TextColor"
+                                        Value="LightSkyBlue" />
+                            </VisualState.Setters>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </Setter>
+        </Style>
+    </ContentPage.Resources>
+    <Grid Margin="20,20,20,20">
+        <Grid.RowDefinitions>
+            <RowDefinition></RowDefinition>
+            <RowDefinition Height="Auto"></RowDefinition>
+            <RowDefinition Height="Auto"></RowDefinition>
+        </Grid.RowDefinitions>
+        <CarouselView x:Name="carousel" ItemsSource="{Binding Items}" Grid.Row="0" Grid.RowSpan="3" IndicatorView="indicators">
+            <CarouselView.ItemTemplate>
+                <DataTemplate>
+                    <Frame BackgroundColor="{Binding Color}">
+                        <Grid HorizontalOptions="Center" VerticalOptions="Center">
+                            <Label Text="{Binding Name}" FontSize="25"></Label>
+                        </Grid>
+                    </Frame>
+                </DataTemplate>
+            </CarouselView.ItemTemplate>
+        </CarouselView>
+        <IndicatorView x:Name="indicators" Grid.Row="1" IndicatorColor="Transparent" SelectedIndicatorColor="Transparent" HorizontalOptions="Center" >
+            <IndicatorView.IndicatorTemplate>
+                <DataTemplate>
+                    <Label Style="{StaticResource IndicatorLabelStyle}"
+                           Text="{StaticResource Indicator}"
+                           FontFamily="{StaticResource IonicsFontFamily}"/>
+                </DataTemplate>
+            </IndicatorView.IndicatorTemplate>
+        </IndicatorView>
+    </Grid>
+</ContentPage>
diff --git a/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsTemplateSample.xaml.cs b/Xamarin.Forms.Controls/GalleryPages/IndicatorViewGalleries/IndicatorsTemplateSample.xaml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+
+using Xamarin.Forms;
+
+namespace Xamarin.Forms.Controls.GalleryPages
+{
+	public partial class IndicatorsTemplateSample : ContentPage
+	{
+		public IndicatorsTemplateSample()
+		{
+			InitializeComponent();
+			BindingContext = new GalleryPages.CollectionViewGalleries.CarouselViewGalleries.CarouselItemsGalleryViewModel(false, false);
+
+		}
+	}
+}
diff --git a/Xamarin.Forms.Core/IndicatorStackLayout.cs b/Xamarin.Forms.Core/IndicatorStackLayout.cs
@@ -95,9 +95,15 @@ void ResetIndicatorStylesNonBatch()
 				var maxVisible = _indicatorView.MaximumVisible;
 				var position = _indicatorView.Position;
 				var selectedIndex = position >= maxVisible ? maxVisible - 1 : position;
-				Children[index].BackgroundColor = index == selectedIndex
+				bool isSelected = index == selectedIndex;
+				Children[index].BackgroundColor = isSelected
 					? GetColorOrDefault(_indicatorView.SelectedIndicatorColor, Color.Gray)
 					: GetColorOrDefault(_indicatorView.IndicatorColor, Color.Silver);
+
+				VisualStateManager.GoToState(Children[index], isSelected
+					? VisualStateManager.CommonStates.Selected
+					: VisualStateManager.CommonStates.Normal);
+
 			}
 
 			IsVisible = indicatorCount > 1 || !_indicatorView.HideSingle;