Merge pull request #28 from DashTheDev/dev/fix-indicator-sizing

Fix changing an IndicatorItemView's size value.
AndreiMisiukevich · Jun 19, 2024 · ab3fe5c · ab3fe5c
2 parents 69aa1b5 + 708f866
commit ab3fe5c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/PanCardView/Common/Controls/CircleFrame.cs b/PanCardView/Common/Controls/CircleFrame.cs
@@ -6,7 +6,7 @@ namespace PanCardView.Controls
 {
     public class CircleFrame : Frame
     {
-        public static readonly BindableProperty SizeProperty = BindableProperty.Create(nameof(Size), typeof(double), typeof(CircleFrame), 0.0, propertyChanged: (bindable, oldValue, newValue) =>
+        public static readonly BindableProperty SizeProperty = BindableProperty.Create(nameof(Size), typeof(double), typeof(CircleFrame), 10.0, propertyChanged: (bindable, oldValue, newValue) =>
         {
             bindable.AsCircleFrame().OnSizeUpdated();
         });
@@ -17,6 +17,10 @@ public CircleFrame()
             HorizontalOptions = LayoutOptions.Center;
             HasShadow = false;
             Padding = 0;
+
+            // NOTE: Default Size was set either by bindable property default or
+            // applied style which doesn't call property changed. Need to manually update.
+            OnSizeUpdated();
         }
 
         [EditorBrowsable(EditorBrowsableState.Never)]

diff --git a/PanCardView/Common/Controls/IndicatorItemView.cs b/PanCardView/Common/Controls/IndicatorItemView.cs
@@ -1,17 +1,12 @@
 using System.ComponentModel;
-
-namespace PanCardView.Controls
-{
-    public class IndicatorItemView : CircleFrame
-    {
-        public IndicatorItemView()
-        {
-            Size = 10;
-        }
-
-        [EditorBrowsable(EditorBrowsableState.Never)]
-        public new static void Preserve()
-        {
-        }
-    }
+
+namespace PanCardView.Controls
+{
+    public class IndicatorItemView : CircleFrame
+    {
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public new static void Preserve()
+        {
+        }
+    }
 }
diff --git a/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml b/PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleIndicatorXamlView.xaml
@@ -15,11 +15,19 @@
     </ContentPage.BindingContext>
 
     <ContentPage.Resources>
-        <Style x:Key="SelectedIndicator" TargetType="Border">
+        <Style x:Key="SelectedIndicator" TargetType="controls:IndicatorItemView">
+            <Setter Property="Size" Value="50" />
+        </Style>
+
+        <Style x:Key="UnselectedIndicator" TargetType="controls:IndicatorItemView">
+            <Setter Property="Size" Value="20" />
+        </Style>
+
+        <Style x:Key="SelectedBorderIndicator" TargetType="Border">
             <Setter Property="BackgroundColor" Value="Yellow" />
         </Style>
 
-        <Style x:Key="UnselectedIndicator" TargetType="Border">
+        <Style x:Key="UnselectedBorderIndicator" TargetType="Border">
             <Setter Property="BackgroundColor" Value="Black" />
         </Style>
     </ContentPage.Resources>
@@ -46,9 +54,9 @@
             </cards:CarouselView.ItemsSource>
 
             <controls:IndicatorsControl
-                SelectedIndicatorStyle="{StaticResource SelectedIndicator}"
+                SelectedIndicatorStyle="{StaticResource SelectedBorderIndicator}"
                 ToFadeDuration="1500"
-                UnselectedIndicatorStyle="{StaticResource UnselectedIndicator}">
+                UnselectedIndicatorStyle="{StaticResource UnselectedBorderIndicator}">
                 <controls:IndicatorsControl.ItemTemplate>
                     <DataTemplate>
                         <Border
@@ -60,16 +68,22 @@
                 </controls:IndicatorsControl.ItemTemplate>
             </controls:IndicatorsControl>
 
+            <!--  NOTE: Example of setting styles of default ItemTemplate  -->
+            <!--<controls:IndicatorsControl
+                SelectedIndicatorStyle="{StaticResource SelectedIndicator}"
+                ToFadeDuration="1500"
+                UnselectedIndicatorStyle="{StaticResource UnselectedIndicator}" />-->
+
             <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}"
+            SelectedIndicatorStyle="{StaticResource SelectedBorderIndicator}"
             ToFadeDuration="1500"
-            UnselectedIndicatorStyle="{StaticResource UnselectedIndicator}"
+            UnselectedIndicatorStyle="{StaticResource UnselectedBorderIndicator}"
             UseParentAsBindingContext="False">
             <controls:IndicatorsControl.ItemTemplate>
                 <DataTemplate>