set tab page items style

PersianUIControlsMaui/Controls/DatePicker.xaml

@@ -18,7 +18,7 @@
         </ResourceDictionary>
     </ContentView.Resources>
     <Grid HorizontalOptions="FillAndExpand" ColumnDefinitions="38,100*,Auto,38" RowDefinitions="30,50,15" Padding="0,10" ColumnSpacing="0" RowSpacing="0" x:Name="container">
-        <Label Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding PlaceHolder,Source={x:Reference ucDatePicker}}" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" x:Name="lblPlaceholder" Grid.Row="0" VerticalOptions="Center" InputTransparent="True" FontFamily="IranianSans" TextColor="{Binding PlaceHolderColor,Source={x:Reference ucDatePicker}}" Margin="5,0,0,0"/>
+        <Label Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding PlaceHolder,Source={x:Reference ucDatePicker}}" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" x:Name="lblPlaceholder" Grid.Row="0" VerticalOptions="Center" InputTransparent="True" FontFamily="IranianSans" TextColor="{Binding PlaceHolderColor,Source={x:Reference ucDatePicker}}" Margin="5,0,0,0" FontAttributes="Bold"/>
 
         <Label Text="{Binding Icon,Source={x:Reference ucDatePicker}}" FontSize="18" WidthRequest="38" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" TextColor="{Binding PlaceHolderColor,Source={x:Reference ucDatePicker}}" InputTransparent="True" Padding="0,0,15,0" x:Name="lblIcon" FontFamily="FontAwesome">
             <Label.Triggers>

PersianUIControlsMaui/Controls/DatePicker.xaml.cs

@@ -9,7 +9,6 @@ namespace PersianUIControlsMaui.Controls;
 public partial class DatePicker : ContentView
 {
     #region Field's
-    private Color _color;
     private ContentPage parentPage;
     private DatePickerView view = null;
     private Task initedView;

PersianUIControlsMaui/Controls/DatePickerView.xaml

@@ -4,6 +4,7 @@
                xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                xmlns:vm="clr-namespace:PersianUIControlsMaui.ViewModels"
                xmlns:models="clr-namespace:PersianUIControlsMaui.Models"
+               xmlns:core="clr-namespace:System.Collections.Generic;assembly=System.Core"
                x:Class="PersianUIControlsMaui.Controls.DatePickerView" x:DataType="vm:DatePickerViewModel"
                x:Name="ucDatePicker" Color="Transparent" HorizontalOptions="Fill">
 
@@ -45,8 +46,8 @@
                     </DataTrigger>
                 </FlexLayout.Triggers>
                 <BindableLayout.ItemTemplate>
-                    <DataTemplate x:DataType="x:String">
-                        <Button Text="{Binding}" Margin="0" BackgroundColor="White" BorderColor="Gray" FontSize="12" FontFamily="IranianSans" FlexLayout.Basis="25%" FlexLayout.Grow="1" Command="{Binding SelectMonthCommand,Source={RelativeSource AncestorType={x:Type vm:DatePickerViewModel}}}" CommandParameter="{Binding}">
+                    <DataTemplate x:DataType="models:PuiTuple">
+                        <Button Text="{Binding Item2}" Margin="0" BackgroundColor="White" BorderColor="Gray" FontSize="12" FontFamily="IranianSans" FlexLayout.Basis="25%" FlexLayout.Grow="1" Command="{Binding SelectMonthCommand,Source={RelativeSource AncestorType={x:Type vm:DatePickerViewModel}}}" CommandParameter="{Binding}">
                             <Button.Triggers>
                                 <DataTrigger TargetType="Button" Binding="{Binding .}" Value="{Binding Text,Source={x:Reference btnCurrentMonth}}">
                                     <Setter Property="TextColor" Value="{Binding Options.SelectDayColor,Source={RelativeSource AncestorType={x:Type vm:DatePickerViewModel}}}"/>

PersianUIControlsMaui/Controls/EntryView.xaml

@@ -6,7 +6,7 @@
     <Grid HorizontalOptions="Fill" ColumnDefinitions="Auto,100*,Auto" RowDefinitions="Auto,50" Padding="0,10" ColumnSpacing="0">
         <Label Text="{Binding Icon,Source={x:Reference entryView}}" FontSize="18" WidthRequest="32" Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="Fill" TextColor="{Binding PlaceHolderColor,Source={x:Reference entryView},Mode=OneWay}" HorizontalTextAlignment="Center" FontFamily="FontAwesome"/>
 
-        <Label Grid.Column="0" Text="{Binding PlaceHolder,Source={x:Reference entryView}}" Padding="0" HorizontalOptions="Start" VerticalTextAlignment="Center" x:Name="lblPlaceholder" Grid.Row="0" InputTransparent="True" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{Binding PlaceHolderColor,Source={x:Reference entryView},Mode=OneWay}" Grid.ColumnSpan="2" FontFamily="IranianSans"/>
+        <Label Grid.Column="0" Text="{Binding PlaceHolder,Source={x:Reference entryView}}" Padding="0" HorizontalOptions="Start" VerticalTextAlignment="Center" x:Name="lblPlaceholder" Grid.Row="0" InputTransparent="True" VerticalOptions="Center" TextColor="{Binding PlaceHolderColor,Source={x:Reference entryView},Mode=OneWay}" Grid.ColumnSpan="2" FontFamily="IranianSans" FontAttributes="Bold"/>
 
         <Border Stroke="Gainsboro" Grid.Row="1" Grid.Column="0" Background="Transparent" HorizontalOptions="Fill" Grid.ColumnSpan="4" Padding="0,0,24,0">
             <Border.StrokeShape>

PersianUIControlsMaui/Controls/TabView.xaml

@@ -3,11 +3,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              x:Class="PersianUIControlsMaui.Controls.TabView">
   <ContentView.Content>
-        <Grid RowDefinitions="100*,55" x:Name="tabPages" RowSpacing="0" ColumnSpacing="0">
+        <Grid RowDefinitions="100*,64" x:Name="tabPages" RowSpacing="0" ColumnSpacing="0">
             <!--tab contents here-->
 
             <Frame CornerRadius="0" Padding="0" Grid.Row="1" Grid.Column="0" BackgroundColor="White" Margin="0">
-                <Grid HorizontalOptions="FillAndExpand" RowDefinitions="55" ColumnDefinitions="20*,20*,20*,20*,20*" x:Name="tabButtons" RowSpacing="0" ColumnSpacing="0">
+                <Grid HorizontalOptions="FillAndExpand" RowDefinitions="64" ColumnDefinitions="20*,20*,20*,20*,20*" x:Name="tabButtons" RowSpacing="0" ColumnSpacing="0">
                     <!--tab buttons here--> 
                 </Grid>
             </Frame>

PersianUIControlsMaui/Controls/TabView.xaml.cs

@@ -1,9 +1,12 @@
-using System.Runtime.CompilerServices;
+using Microsoft.Maui.Controls.Shapes;
+using Microsoft.Maui.Platform;
+using System.Data;
+using System.Runtime.CompilerServices;
 
 namespace PersianUIControlsMaui.Controls;
 
 [XamlCompilation(XamlCompilationOptions.Compile)]
-public partial class TabView : ContentView
+public partial class TabView : Microsoft.Maui.Controls.ContentView
 {
     #region Field's
     private bool IsGeneratedTabs = false;
@@ -79,33 +82,52 @@ private void GenerateTabPages()
                 {
                     IsEnabled = item.IsEnabled,
                     Text = item.Icon,
-                    StyleId = "icon",
                     FontFamily = "FontAwesome",
                     FontSize = 24,
-                    Padding = new Thickness(0, 5, 0, (AnimateCaptions ? 5 : 23)),
+                    Padding = new Thickness(0, 10, 0, (AnimateCaptions ? 5 : 24)),
                     HorizontalOptions = LayoutOptions.Fill,
                     VerticalOptions = LayoutOptions.Fill,
                     TextColor = UnSelectedTabColor,
-                    BackgroundColor = Colors.White
+                    BackgroundColor = Colors.White,
+                    HeightRequest = 64
                 };
+
                 var label = new Label()
                 {
                     IsEnabled = item.IsEnabled,
                     Text = item.Title,
-                    FontSize = 13,
+                    FontSize = 12,
                     VerticalOptions = LayoutOptions.End,
                     HorizontalOptions = LayoutOptions.Center,
                     InputTransparent = true,
                     TextColor = UnSelectedTabColor,
-                    Margin = new Thickness(0, 0, 5, 0),
+                    Margin = new Thickness(0, 0, 5, 5),
                     Scale = AnimateCaptions ? 0 : 1,
-                    FontFamily = "IranianSans"
+                    FontFamily = "IranianSans",
+                };
+
+                var shape = new Microsoft.Maui.Controls.Shapes.Path()
+                {
+                    ClassId = ItemsSource.IndexOf(item).ToString(),
+                    Data = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M53.5 12H16.5C16.5 14.2091 18.2909 16 20.5 16H49.5C51.7091 16 53.5 14.2091 53.5 12ZM33.3257 19.3366C33.8419 20.2986 36.1581 20.2986 36.6743 19.3366C37.6164 17.5805 38.9944 16 40.9025 16L29.0975 16C31.0056 16 32.3835 17.5805 33.3257 19.3366Z"),
+                    VerticalOptions = LayoutOptions.Start,
+                    Fill = new SolidColorBrush(Colors.Transparent),
+                    HorizontalOptions = LayoutOptions.Fill,
+                    IsVisible = true,
+                    InputTransparent = true,
+                    HeightRequest = 8,
+                    TranslationY = 0,
                 };
+                double width = DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Portrait ?
+                    DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density :
+                    DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
+                shape.TranslationX = ((width / ItemsSource.Count) / 2) - (37 / 2);
                 //if (AnimateCaptions)
                 //    label.ScaleTo(0);
-                tabButton.Command = new Command(() => ExecuteChangeTabCommand(item, tabButton, label));
+                tabButton.Command = new Command(() => ExecuteChangeTabCommand(item, tabButton, label, shape));
                 this.tabButtons.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100 / ItemsSource.Count, GridUnitType.Star) });
                 this.tabButtons.Add(tabButton, ItemsSource.IndexOf(item), 0);
+                this.tabButtons.Add(shape, ItemsSource.IndexOf(item), 0);
                 this.tabButtons.Add(label, ItemsSource.IndexOf(item), 0);
                 if (ItemsSource.IndexOf(item) == SelectedTab)
                     currentTab = tabButton;
@@ -118,7 +140,7 @@ private void GenerateTabPages()
         }
     }
 
-    private void ExecuteChangeTabCommand(object control, object button, object label)
+    private void ExecuteChangeTabCommand(object control, Button currentBtn, Label currentLabel, Microsoft.Maui.Controls.Shapes.Path shape)
     {
         if (control is not TabItemView tab)
             return;
@@ -133,24 +155,41 @@ private void ExecuteChangeTabCommand(object control, object button, object label
             {
                 if (AnimateCaptions)
                     btn.Padding = new Thickness(0, 5);
-                btn.TextColor = UnSelectedTabColor;
+                btn.TextColor = this.UnSelectedTabColor;
             }
             if (item is Label lbl)
             {
                 if (AnimateCaptions)
                     lbl.Scale = (0);
-                lbl.TextColor = UnSelectedTabColor;
+                lbl.TextColor = this.UnSelectedTabColor;
+            }
+            if (item is Microsoft.Maui.Controls.Shapes.Path _shape)
+            {
+                if (AnimateCaptions)
+                    _shape.Scale = (0);
+                _shape.Fill = new SolidColorBrush(Colors.Transparent);
+                _shape.Shadow = new Shadow()
+                {
+                    Brush = new SolidColorBrush(Colors.Black),
+                    Offset = new Point(0, 10),
+                    Radius = 80,
+                };
+                //_shape.IsVisible = _shape.ClassId == shape.ClassId;
             }
         }
 
-        var currentBtn = ((Button)button);
         currentBtn.TextColor = SelectedTabColor;
         if (AnimateCaptions)
             currentBtn.Padding = new Thickness(0, 5, 0, 23);
-        var currentLabel = ((Label)label);
+
         currentLabel.TextColor = SelectedTabColor;
         if (AnimateCaptions)
             currentLabel.Scale = (1);// = 0;
+
+        shape.Fill = new SolidColorBrush(SelectedTabColor);
+        if (AnimateCaptions)
+            shape.Scale = (1);// = 0;
+
         tab.IsVisible = true;
 
         if (ChangedTabCommand != null)

PersianUIControlsMaui/Enums/PersianMonthNames.cs

@@ -1,17 +1,31 @@
-namespace PersianUIControlsMaui.Enums;
+using System.ComponentModel.DataAnnotations;
+
+namespace PersianUIControlsMaui.Enums;
 
 public enum PersianMonthNames
 {
-    فروردین = 0,
-    اردیبهشت,
-    خرداد,
-    تیر,
-    مرداد,
-    شهریور,
-    مهر,
-    آبان,
-    آذر,
-    دی,
-    بهمن,
-    اسفند
+    [Display(Name = "فروردین")]
+    Farvardin = 0,
+    [Display(Name = "اردیبهشت")]
+    Ordibehesht,
+    [Display(Name = "خرداد")]
+    Khordad,
+    [Display(Name = "تیر")]
+    Tir,
+    [Display(Name = "مرداد")]
+    Mordad,
+    [Display(Name = "شهریور")]
+    Shahrivar,
+    [Display(Name = "مهر")]
+    Mehr,
+    [Display(Name = "آبان")]
+    Aban,
+    [Display(Name = "آذر")]
+    Azar,
+    [Display(Name = "دی")]
+    Day,
+    [Display(Name = "بهمن")]
+    Bahman,
+    [Display(Name = "اسفند")]
+    Esfand
 }

PersianUIControlsMaui/Extensions/EnumExtensions.cs

@@ -0,0 +1,14 @@
+using System.ComponentModel.DataAnnotations;
+using System.Reflection;
+
+namespace PersianUIControlsMaui.Extensions;
+
+public static class EnumExtensions
+{
+    public static string GetDisplay(this Type type, int value)
+    {
+        var enumItem = Enum.Parse(type, value.ToString());
+        var displayName = type.GetField(enumItem.ToString()).GetCustomAttribute<DisplayAttribute>().Name;
+        return displayName;
+    }
+}

PersianUIControlsMaui/Models/PuiTuple.cs

@@ -0,0 +1,8 @@
+namespace PersianUIControlsMaui.Models;
+
+public class PuiTuple : Tuple<string, string>
+{
+    public PuiTuple(string key, string value) : base(key, value)
+    {
+    }
+}

PersianUIControlsMaui/ViewModels/DatePickerViewModel.cs

@@ -1,9 +1,9 @@
 using PersianUIControlsMaui.Enums;
 using PersianUIControlsMaui.Models;
-using System.Collections.Immutable;
 using System.Collections.ObjectModel;
 using System.ComponentModel.DataAnnotations;
 using System.Reflection;
+using PersianUIControlsMaui.Extensions;
 
 namespace PersianUIControlsMaui.ViewModels;
 
@@ -29,14 +29,14 @@ public class DatePickerViewModel : ObservableObject
     #region Field's
     private List<string> daysOfWeek;
     private List<DayOfMonth> daysOfMonth;
-    private List<string> persianMonths;
+    private List<PuiTuple> persianMonths;
     private ObservableCollection<DayOfMonth> selectedDays;
     #endregion
 
     public List<string> DaysOfWeek { get => daysOfWeek; set => SetProperty(ref daysOfWeek, value); }
     public List<DayOfMonth> DaysOfMonth { get => daysOfMonth; set => SetProperty(ref daysOfMonth, value); }
     public ObservableCollection<DayOfMonth> SelectedDays { get => selectedDays; set => SetProperty(ref selectedDays, value); }
-    public List<string> PersianMonths { get => persianMonths; set => SetProperty(ref persianMonths, value); }
+    public List<PuiTuple> PersianMonths { get => persianMonths; set => SetProperty(ref persianMonths, value); }
     #endregion
 
     #region Command's
@@ -68,7 +68,7 @@ public DatePickerViewModel(CalendarOptions options)
     {
         Options = options;
         SelectedDays = new ObservableCollection<DayOfMonth>(GetSelectedDates(options.SelectedPersianDates));
-        PersianMonths = new List<string>();
+        PersianMonths = new List<PuiTuple>();
         SelectDateMode = options.SelectDateMode;
 
         if (this.DaysOfWeek == null)
@@ -114,8 +114,8 @@ private void InitCalendarDays(object obj)
         if (obj is not DateTime date)
             return;
 
-        CurrentMonth = Enum.GetNames(typeof(PersianMonthNames))[date.GetPersianMonth() - 1];
-        PersianMonths = Enum.GetNames(typeof(PersianMonthNames)).ToList();
+        CurrentMonth = typeof(PersianMonthNames).GetDisplay(date.GetPersianMonth() - 1);
+        PersianMonths = GetMonths();
         CurrentYear = date.GetPersianYear();
 
         var firstDayOfMonth = date.GetPersianBeginningMonth().ToDateTime();
@@ -153,6 +153,13 @@ private List<DayOfMonth> GetDaysOfMonth(List<int> monthDaysCount, DateTime first
         }).ToList();
     }
 
+    private List<PuiTuple> GetMonths()
+    {
+        var members = typeof(PersianMonthNames).GetFields(BindingFlags.Static | BindingFlags.Public);
+        var items = members.Select(x => new PuiTuple(x.Name, x.GetCustomAttribute<DisplayAttribute>().Name)).ToList();
+        return items;
+    }
+
     private void SelectDate(object obj)
     {
         if (obj is not DayOfMonth dayOfMonth || !dayOfMonth.CanSelect)
@@ -283,14 +290,15 @@ private void GotoToday(object obj)
 
     private void SelectMonth(object obj)
     {
-        var month = Enum.Parse<PersianMonthNames>(obj.ToString());
+        if (obj is not PuiTuple value)
+            return;
+
+        var month = Enum.Parse<PersianMonthNames>(value.Item1);
         var date = $"{CurrentYear}/{(int)month+1}/01".ToDateTime();
         SelectDateMode = SelectionDateMode.Day;
         InitCalendarDays(date);
     }
 
-
-
     private DateTime GetSelectedDate()
     {
         DateTime date = DateTime.Now;

PersianUISamples/MainPage.xaml

@@ -6,9 +6,9 @@
              xmlns:vm="clr-namespace:PersianUISamples.ViewModels"
              x:DataType="vm:MainViewModel">
 
-    <pui:TabView SelectedTabColor="OrangeRed" UnSelectedTabColor="Gray" SelectedTab="1" AnimateCaptions="True">
+    <pui:TabView SelectedTabColor="{Binding CalendarOption.SelectDayColor}" UnSelectedTabColor="Gray" SelectedTab="0">
         <pui:TabView.ItemsSource>
-            <pui:TabItemView Title="تاریخ" Icon="&#xf133;" Padding="15">
+            <pui:TabItemView Title="تقویم" Icon="&#xf133;" Padding="15">
                 <VerticalStackLayout Spacing="25" Padding="0" VerticalOptions="Fill">
                     <VerticalStackLayout>
                         <pui:CircleImageView ImageSource="dotnet_bot.svg" Margin="25,25,25,0" ImageHeight="96" ImageWidth="96" BorderThickness="2" BorderColor="BlueViolet" VerticalOptions="Center" HorizontalOptions="Center"/>
@@ -26,7 +26,7 @@
                     </pui:ContainerView>
                 </VerticalStackLayout>
             </pui:TabItemView>
-            <pui:TabItemView Title="کنترل" Icon="&#xf00c;" Padding="15">
+            <pui:TabItemView Title="کنترل ها" Icon="&#xf00c;" Padding="15">
                 <pui:ContainerView Title=" کنترل ها" Icon="&#xf00c;" IsExpanded="True">
                     <pui:ContainerView.Contents>
                         <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto">
@@ -55,7 +55,7 @@
                     </pui:ContainerView.Contents>
                 </pui:ContainerView>
             </pui:TabItemView>
-            <pui:TabItemView Padding="15" Title="Dialogs" Icon="&#xf00d;">
+            <pui:TabItemView Padding="15" Title="ناتیف ها" Icon="&#xf00d;">
                 <Grid ColumnDefinitions="33*,33*,33*" RowDefinitions="40,40" RowSpacing="10">
                     <Button Text="Alert me" TextColor="White" Grid.Column="0"
                 SemanticProperties.Hint="Counts the number of times you click"