Merge pull request #29 from DashTheDev/dev/frame-to-border

Convert CircleFrame to CircleBorder

PanCardView/Common/AppBuilderExtensions.cs

@@ -16,7 +16,7 @@ public static MauiAppBuilder UseCardsView(this MauiAppBuilder builder)
             ArrowControl.Preserve();
             LeftArrowControl.Preserve();
             RightArrowControl.Preserve();
-            CircleFrame.Preserve();
+            CircleBorder.Preserve();
             IndicatorItemView.Preserve();
             IndicatorsControl.Preserve();
             TabsControl.Preserve();

PanCardView/Common/Controls/CircleFrame.cs → PanCardView/Common/Controls/CircleBorder.cs

@@ -1,22 +1,21 @@
 using System.ComponentModel;
+using Microsoft.Maui.Controls.Shapes;
 using PanCardView.Extensions;
-using static System.Math;
 
 namespace PanCardView.Controls
 {
-    public class CircleFrame : Frame
+    public class CircleBorder : Border
     {
-        public static readonly BindableProperty SizeProperty = BindableProperty.Create(nameof(Size), typeof(double), typeof(CircleFrame), 10.0, propertyChanged: (bindable, oldValue, newValue) =>
+        public static readonly BindableProperty SizeProperty = BindableProperty.Create(nameof(Size), typeof(double), typeof(CircleBorder), 25.0, propertyChanged: (bindable, oldValue, newValue) =>
         {
-            bindable.AsCircleFrame().OnSizeUpdated();
+            bindable.AsCircleBorder().OnSizeUpdated();
         });
 
-        public CircleFrame()
+        public CircleBorder()
         {
             VerticalOptions = LayoutOptions.Center;
             HorizontalOptions = LayoutOptions.Center;
-            HasShadow = false;
-            Padding = 0;
+            StrokeShape = new Ellipse();
 
             // NOTE: Default Size was set either by bindable property default or
             // applied style which doesn't call property changed. Need to manually update.
@@ -34,15 +33,6 @@ public double Size
             set => SetValue(SizeProperty, value);
         }
 
-        protected override void OnSizeAllocated(double width, double height)
-        {
-            base.OnSizeAllocated(width, height);
-            if(width > 0 && height > 0)
-            {
-                SetCornerRadius(Min(width, height));
-            }
-        }
-
         protected void OnSizeUpdated()
         {
             var size = Size;
@@ -56,15 +46,11 @@ protected void OnSizeUpdated()
                 BatchBegin();
                 HeightRequest = size;
                 WidthRequest = size;
-                SetCornerRadius(size);
             }
             finally
             {
                 BatchCommit();
             }
         }
-
-        private void SetCornerRadius(double size)
-            => CornerRadius = (float)size / 2;
     }
 }

PanCardView/Common/Controls/IndicatorItemView.cs

@@ -2,7 +2,7 @@
 
 namespace PanCardView.Controls
 {
-    public class IndicatorItemView : CircleFrame
+    public class IndicatorItemView : CircleBorder
     {
         [EditorBrowsable(EditorBrowsableState.Never)]
         public new static void Preserve()

PanCardView/Common/Extensions/CardViewExtensions.cs

@@ -22,8 +22,8 @@ public static CoverFlowView AsCoverFlowView(this BindableObject bindable)
         public static IndicatorsControl AsIndicatorsControl(this BindableObject bindable)
             => bindable as IndicatorsControl;
 
-        public static CircleFrame AsCircleFrame(this BindableObject bindable)
-            => bindable as CircleFrame;
+        public static CircleBorder AsCircleBorder(this BindableObject bindable)
+            => bindable as CircleBorder;
 
         public static ArrowControl AsArrowControl(this BindableObject bindable)
             => bindable as ArrowControl;

PanCardView/Common/Styles/DefaultIndicatorItemStyles.cs

@@ -10,20 +10,20 @@ static DefaultIndicatorItemStyles()
         }
 
         public static Style DefaultSelectedIndicatorItemStyle
-        => _defaultSelectedIndicatorItemStyle ?? (_defaultSelectedIndicatorItemStyle = new Style(typeof(Frame))
+        => _defaultSelectedIndicatorItemStyle ??= new Style(typeof(Border))
         {
             Setters = {
                 new Setter { Property = VisualElement.BackgroundColorProperty, Value = Colors.White.MultiplyAlpha(.8f) }
             }
-        });
+        };
 
         public static Style DefaultUnselectedIndicatorItemStyle
-        => _defaultUnselectedIndicatorItemStyle ?? (_defaultUnselectedIndicatorItemStyle = new Style(typeof(Frame))
+        => _defaultUnselectedIndicatorItemStyle ??= new Style(typeof(Border))
         {
             Setters = {
                 new Setter { Property = VisualElement.BackgroundColorProperty, Value = Colors.Transparent },
-                new Setter { Property = Frame.BorderColorProperty, Value = Colors.White.MultiplyAlpha(.8f) }
+                new Setter { Property = Border.StrokeProperty, Value = Colors.White.MultiplyAlpha(.8f) }
             }
-        });
+        };
     }
 }

PanCardViewSample/PanCardViewSample/Common/Views/CarouselSampleSrollView.cs

@@ -18,7 +18,7 @@ public CarouselSampleSrollView()
 				Children = {
 					new IndicatorsControl
 					{
-						SelectedIndicatorStyle = new Style(typeof(Frame))
+						SelectedIndicatorStyle = new Style(typeof(Border))
 						{
 							BasedOn = DefaultIndicatorItemStyles.DefaultSelectedIndicatorItemStyle,
 							Setters = {

README.md

@@ -121,12 +121,12 @@ Indicators styling:
 ``` xml
  <ContentPage.Resources>
     <ResourceDictionary>
-        <Style x:Key="ActiveIndicator" TargetType="Frame">
+        <Style x:Key="ActiveIndicator" TargetType="Border">
             <Setter Property="BackgroundColor" Value="Red" />
         </Style>
-        <Style x:Key="InactiveIndicator" TargetType="Frame">
+        <Style x:Key="InactiveIndicator" TargetType="Border">
             <Setter Property="BackgroundColor" Value="Transparent" />
-            <Setter Property="OutlineColor" Value="Red" />
+            <Setter Property="Stroke" Value="Red" />
         </Style>
     </ResourceDictionary>
 </ContentPage.Resources>
@@ -197,7 +197,7 @@ if you want to achieve scale or opacity changing effects for side views (**Scale
 -> If you want to customize indicators, you need set *SelectedIndicatorStyle* and/or *UnselectedIndicatorStyle*, or you are able to extend this class and override several methods.
 Also you can customize position of indicators (You need to set Rotation / Layout Options, Bounds etc.)
 
-This class is describing default indicators styles (each default indicator item is Frame)
+This class is describing default indicators styles (each default indicator item is a Border)
 https://github.com/AndreiMisiukevich/CardView.MAUI/blob/main/PanCardView/Common/Styles/DefaultIndicatorItemStyles.cs
 
 

docs/IndicatorItemView.md

@@ -4,9 +4,8 @@ The default Indicator template this has the following properties:
 ```csharp
     VerticalOptions = LayoutOptions.Center;
     HorizontalOptions = LayoutOptions.Center;
-    HasShadow = false;
-    Padding = 0;
-    HeightRequest = 10;
-    WidthRequest = 10;
-    CornerRadius = 5; 
+    StrokeShape = new Ellipse();
+    HeightRequest = 25;
+    WidthRequest = 25;
+    Size = 25;
 ```

docs/IndicatorsControl.md

@@ -13,7 +13,7 @@ If the IndicatorsControl is nested in a [CarouselView](CarouselView.md) or [Card
 
 ### Custom Indicator
 
-The default indicator is a `Frame` control that is a 10px by 10px circle. This can be change by setting the `ItemTemplate` then setting the `SelectedIndicatorStyle` and `UnselectedIndicatorStyle` styles.
+The default indicator is a `Border` control that is a 25px by 25px circle. This can be change by setting the `ItemTemplate` then setting the `SelectedIndicatorStyle` and `UnselectedIndicatorStyle` styles.
 
 ### Properties
 
@@ -23,8 +23,8 @@ Property | Type | Default | Description
 --- | --- | --- | ---
 SelectedIndex | `int` | 0 | The currently selected index this will disaplyed with the `SelectedIndicatorStyle`
 ItemsCount | `int` | 0 | The number of items the indicator should display.
-SelectedIndicatorStyle | `Style` | DefaultSelectedIndicatorItemStyle - Frame style that sets `Background` to White with .8 Alpha  | The style used when the indicator is selected.
-UnselectedIndicatorStyle | `Style` | DefaultUnselectedIndicatorItemStyle - Frame style that sets `Background` to Transparent and `OutlineColor` to White with .8 Alpha | The style used when the indicator is not selected.
+SelectedIndicatorStyle | `Style` | DefaultSelectedIndicatorItemStyle - Border style that sets `Background` to White with .8 Alpha  | The style used when the indicator is selected.
+UnselectedIndicatorStyle | `Style` | DefaultUnselectedIndicatorItemStyle - Border style that sets `Background` to Transparent and `Stroke` to White with .8 Alpha | The style used when the indicator is not selected.
 IsUserInteractionRunning | `bool` | true | Is used when `ToFadeDuration` is greater than 0 to show and hide the IndicatorControl.
 IsAutoInteractionRunning | `bool` | true | Is used when `ToFadeDuration` is greater than 0 to show and hide the IndicatorControl.
 HidesForSingleIndicator | `bool` | tru | Determines if we should hide indicators in case 1 element.