Merge pull request #27 from DashTheDev/dev/improve-indicator-templates

Improvements to IndicatorsControl
AndreiMisiukevich · Jun 18, 2024 · f5a7fbf · f5a7fbf
2 parents ef0d320 + a986be0
commit f5a7fbf
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 7 deletions.
diff --git a/PanCardView/Common/Controls/IndicatorsControl.cs b/PanCardView/Common/Controls/IndicatorsControl.cs
@@ -52,7 +52,10 @@ public class IndicatorsControl : HorizontalStackLayout
             bindable.AsIndicatorsControl().ResetItemsSource(oldValue as IEnumerable);
         });
 
-        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(IndicatorsControl), new DataTemplate(typeof(IndicatorItemView)));
+        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(IndicatorsControl), new DataTemplate(typeof(IndicatorItemView)), propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            bindable.AsIndicatorsControl().ResetIndicatorsLayout();
+        });
 
         public static readonly BindableProperty UseParentAsBindingContextProperty = BindableProperty.Create(nameof(UseParentAsBindingContext), typeof(bool), typeof(IndicatorsControl), true);
 

diff --git a/PanCardViewSample/PanCardViewSample/Common/App.xaml.cs b/PanCardViewSample/PanCardViewSample/Common/App.xaml.cs
@@ -56,6 +56,12 @@ public StartPage()
                 this.Navigation.PushAsync(new CarouselSampleXamlView());
             };
 
+            var toCarouselIndicatorXamlBtn = new Button { Text = "CarouselView Indicator Xaml", FontSize = 20, TextColor = Colors.Black };
+            toCarouselIndicatorXamlBtn.Clicked += (sender, e) =>
+            {
+                this.Navigation.PushAsync(new CarouselSampleIndicatorXamlView());
+            };
+
             var toCarouselListBtn = new Button { Text = "Carousel ListView" };
             toCarouselListBtn.Clicked += (sender, e) =>
             {
@@ -83,6 +89,7 @@ public StartPage()
                     Children = {
                         toCardsBtn,
                         toCarouselXamlBtn,
+                        toCarouselIndicatorXamlBtn,
                         toCoverFlowBtn,
                         toCubeBtn,
                         toCarouselNestedBtn,

diff --git a/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml b/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<ContentPage
+    x:Class="PanCardViewSample.Views.CarouselSampleIndicatorXamlView"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
+    xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
+    xmlns:proc="clr-namespace:PanCardView.Processors;assembly=PanCardView"
+    xmlns:viewModels="clr-namespace:PanCardViewSample.ViewModels"
+    Title="Carousel Indicator Xaml"
+    BackgroundColor="Black">
+
+    <ContentPage.BindingContext>
+        <viewModels:CardsSampleViewModel />
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <Style x:Key="SelectedIndicator" TargetType="Border">
+            <Setter Property="BackgroundColor" Value="Yellow" />
+        </Style>
+
+        <Style x:Key="UnselectedIndicator" TargetType="Border">
+            <Setter Property="BackgroundColor" Value="Black" />
+        </Style>
+    </ContentPage.Resources>
+
+    <Grid>
+        <cards:CarouselView
+            x:Name="Carousel"
+            Padding="50"
+            SelectedIndex="{Binding CurrentIndex}"
+            SlideShowDuration="3500">
+            <x:Arguments>
+                <proc:CarouselProcessor
+                    OpacityFactor="0"
+                    RotationFactor="0.1"
+                    ScaleFactor="0.5" />
+            </x:Arguments>
+
+            <cards:CarouselView.ItemsSource>
+                <x:Array Type="{x:Type View}">
+                    <BoxView Color="Red" />
+                    <BoxView Color="Green" />
+                    <BoxView Color="Blue" />
+                </x:Array>
+            </cards:CarouselView.ItemsSource>
+
+            <controls:IndicatorsControl
+                SelectedIndicatorStyle="{StaticResource SelectedIndicator}"
+                ToFadeDuration="1500"
+                UnselectedIndicatorStyle="{StaticResource UnselectedIndicator}">
+                <controls:IndicatorsControl.ItemTemplate>
+                    <DataTemplate>
+                        <Border
+                            HeightRequest="20"
+                            Stroke="White"
+                            StrokeShape="RoundRectangle 20,0,0,20"
+                            WidthRequest="20" />
+                    </DataTemplate>
+                </controls:IndicatorsControl.ItemTemplate>
+            </controls:IndicatorsControl>
+
+            <controls:LeftArrowControl ToFadeDuration="2500" />
+            <controls:RightArrowControl ToFadeDuration="2500" />
+        </cards:CarouselView>
+
+        <!--  NOTE: This is an example of setting up an IndicatorsControl that's not nested in the CarouselView  -->
+        <!--<controls:IndicatorsControl
+            BindingContext="{x:Reference Carousel}"
+            SelectedIndicatorStyle="{StaticResource SelectedIndicator}"
+            ToFadeDuration="1500"
+            UnselectedIndicatorStyle="{StaticResource UnselectedIndicator}"
+            UseParentAsBindingContext="False">
+            <controls:IndicatorsControl.ItemTemplate>
+                <DataTemplate>
+                    <Border
+                        HeightRequest="20"
+                        Stroke="White"
+                        StrokeShape="RoundRectangle 20,0,0,20"
+                        WidthRequest="20" />
+                </DataTemplate>
+            </controls:IndicatorsControl.ItemTemplate>
+        </controls:IndicatorsControl>-->
+    </Grid>
+
+</ContentPage>
diff --git a/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml.cs b/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml.cs
@@ -0,0 +1,11 @@
+namespace PanCardViewSample.Views
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class CarouselSampleIndicatorXamlView : ContentPage
+    {
+        public CarouselSampleIndicatorXamlView()
+        {
+                InitializeComponent();
+        }
+    }
+}
diff --git a/PanCardViewSample/PanCardViewSample/PanCardViewSample.csproj b/PanCardViewSample/PanCardViewSample/PanCardViewSample.csproj
@@ -53,16 +53,13 @@
 		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
 	</ItemGroup>
 
-	<ItemGroup>
-	  <None Remove="Common\" />
-	</ItemGroup>
-	<ItemGroup>
-	  <Folder Include="Common\" />
-	</ItemGroup>
 	<ItemGroup>
 	  <MauiXaml Update="Common\Views\CarouselSampleNestedXamlView.xaml">
 	    <SubType></SubType>
 	  </MauiXaml>
+	  <MauiXaml Update="Common\Views\CarouselSampleIndicatorXamlView.xaml">
+	    <SubType></SubType>
+	  </MauiXaml>
 	  <MauiXaml Update="Common\Views\CarouselSampleXamlView.xaml">
 	    <SubType></SubType>
 	  </MauiXaml>