Skip to content

Commit

Permalink
update date picker ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@RezaShaban
RezaShaban committed Sep 11, 2023
1 parent 807e09d commit 13b95c5
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 161 deletions.
55 changes: 32 additions & 23 deletions PersianUIControlsMaui/Controls/DatePicker.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,18 @@
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid HorizontalOptions="FillAndExpand" ColumnDefinitions="28,100*,Auto,24" RowDefinitions="50" Padding="0,10" ColumnSpacing="0" RowSpacing="0" x:Name="container">
<Label Text="{Binding Icon,Source={x:Reference ucDatePicker}}" FontSize="18" WidthRequest="28" Grid.Column="0" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" TextColor="{Binding PlaceHolderColor,Source={x:Reference ucDatePicker}}" InputTransparent="True" Padding="0,0,5,0" x:Name="lblIcon" FontFamily="FontAwesome">
<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 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>
<DataTrigger TargetType="Label" Binding="{Binding Icon,Source={x:Reference ucDatePicker}}" Value="">
<Setter Property="IsVisible" Value="False"/>
</DataTrigger>
</Label.Triggers>
</Label>

<Border Stroke="Gainsboro" Grid.Row="0" Grid.Column="0" x:Name="rectangle" Background="Transparent" HorizontalOptions="Fill" Grid.ColumnSpan="4" Padding="0,0,24,0">
<Border Stroke="Gainsboro" Grid.Row="1" Grid.Column="0" x:Name="rectangle" Background="Transparent" HorizontalOptions="Fill" Grid.ColumnSpan="4" Padding="0,0,48,0" InputTransparent="True">
<Border.Triggers>
<DataTrigger TargetType="Border" Binding="{Binding Icon,Source={x:Reference ucDatePicker}}" Value="">
<Setter Property="Padding" Value="0"/>
Expand All @@ -35,30 +37,37 @@
<Border.StrokeShape>
<RoundRectangle Fill="Transparent" CornerRadius="5" StrokeThickness="1" StrokeLineJoin="Round" Stroke="Gainsboro"/>
</Border.StrokeShape>
<Label HorizontalOptions="Fill" Text="{Binding FormattedDate,Source={x:Reference ucDatePicker}}" Margin="0" FontSize="Small" x:Name="txtEntry" HorizontalTextAlignment="Center" HeightRequest="42" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="{Binding TextColor,Source={x:Reference ucDatePicker}}" TranslationY="3" FontFamily="IranianSans"/>
</Border>
<ScrollView Grid.Column="1" Margin="0,0,0,-15" VerticalOptions="End">
<HorizontalStackLayout HorizontalOptions="Fill" BindableLayout.ItemsSource="{Binding BadgeDates,Source={x:Reference ucDatePicker}}">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Button FontSize="Micro" Padding="4,0" Text="{Binding .}" Grid.Column="0" Background="Gray" VerticalOptions="End" HorizontalOptions="Start" Margin="1,0" TextColor="White"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
</ScrollView>
<StackLayout Margin="0,0,38,0">
<Label HorizontalOptions="Fill" Text="{Binding FormattedDate,Source={x:Reference ucDatePicker}}" Margin="0" FontSize="Small" x:Name="txtEntry" HorizontalTextAlignment="Start" HeightRequest="42" VerticalOptions="Center" VerticalTextAlignment="Center" TextColor="{Binding TextColor,Source={x:Reference ucDatePicker}}" TranslationY="3" FontFamily="IranianSans" IsVisible="False">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding CalendarOption.SelectionMode,Source={x:Reference ucDatePicker}}" Value="Single">
<Setter Property="IsVisible" Value="True"/>
</DataTrigger>
</Label.Triggers>
</Label>

<Label Grid.Column="1" 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}}"/>
<HorizontalStackLayout HorizontalOptions="Fill" BindableLayout.ItemsSource="{Binding BadgeDates,Source={x:Reference ucDatePicker}}" VerticalOptions="Fill" HeightRequest="50" InputTransparent="True" IsVisible="True">
<HorizontalStackLayout.Triggers>
<DataTrigger TargetType="HorizontalStackLayout" Binding="{Binding CalendarOption.SelectionMode,Source={x:Reference ucDatePicker}}" Value="Single">
<Setter Property="IsVisible" Value="False"/>
</DataTrigger>
</HorizontalStackLayout.Triggers>
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Button FontSize="13" Padding="10,2" Text="{Binding .}" Background="{Binding CalendarOption.InRangeDayColor,Source={x:Reference ucDatePicker}}" VerticalOptions="Center" HorizontalOptions="Start" Margin="1,0" TextColor="{Binding CalendarOption.SelectDayColor,Source={x:Reference ucDatePicker}}" InputTransparent="True"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyView>
<Label FontSize="13" Padding="10,2" Text="انتخاب تاریخ" Background="White" VerticalOptions="Center" HorizontalOptions="Start" Margin="1,0" TextColor="Gray" InputTransparent="True"/>
</BindableLayout.EmptyView>
</HorizontalStackLayout>
</StackLayout>
</Border>

<Label Text="{Binding ErrorMessage,Source={x:Reference ucDatePicker}}" Grid.Column="0" Grid.ColumnSpan="2"
HorizontalOptions="EndAndExpand" VerticalTextAlignment="Center" x:Name="lblMessage"
Grid.Row="1" InputTransparent="True" VerticalOptions="Center" Margin="0,-10,0,-24"
Grid.Row="2" InputTransparent="True" VerticalOptions="Center" Margin="0,-10,0,-24"
IsVisible="{Binding IsValid,Source={x:Reference ucDatePicker}}" FontFamily="IranianSans"/>
<Label Text="&#xf107;" Grid.Column="3" Grid.Row="0" StyleId="x" VerticalOptions="Center"
HorizontalOptions="Center" FontSize="Medium" FontFamily="FontAwesome" TextColor="#333"/>

<ActivityIndicator IsVisible="{Binding IsLoading,Source={x:Reference ucDatePicker}}" IsRunning="True" HorizontalOptions="End" Margin="5" HeightRequest="38" Background="Transparent" Color="OrangeRed" VerticalOptions="Center"/>
<Button Text="&#xf107;" Margin="-10,0,0,0" Grid.Column="3" Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" FontFamily="FontAwesome" TextColor="#333" FontAutoScalingEnabled="True" CornerRadius="100" WidthRequest="28" HeightRequest="28" Background="White" Padding="1" FontSize="Medium"/>
</Grid>
</ContentView>
114 changes: 32 additions & 82 deletions PersianUIControlsMaui/Controls/DatePicker.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
using CommunityToolkit.Maui.Views;
using PersianUIControlsMaui.Enums;
using PersianUIControlsMaui.Models;
using System.Linq.Expressions;
using System.Runtime.CompilerServices;

namespace PersianUIControlsMaui.Controls;
Expand Down Expand Up @@ -136,33 +137,40 @@ private Task InitPickerView()

return Task.Run(() =>
{
this.IsLoading = true;
this.CalendarOption.SelectedPersianDate = this.SelectedPersianDate ?? DateTime.Now.ToPersianDate();
this.CalendarOption.AutoCloseAfterSelectDate = this.CalendarOption.SelectionMode != Enums.SelectionMode.Multiple ? this.CalendarOption.AutoCloseAfterSelectDate : false;
this.view = new DatePickerView(this.CalendarOption);
this.view.SelectedDateChanged += (object sender, SelectedDateChangedEventArgs e) =>
try
{
if (this.CalendarOption.SelectionMode == Enums.SelectionMode.Single)
this.IsLoading = true;
this.CalendarOption.SelectedPersianDate = this.SelectedPersianDate ?? DateTime.Now.ToPersianDate();
this.CalendarOption.SelectedPersianDates = this.BadgeDates;
this.CalendarOption.AutoCloseAfterSelectDate = this.CalendarOption.SelectionMode != Enums.SelectionMode.Multiple ? this.CalendarOption.AutoCloseAfterSelectDate : false;
this.view = new DatePickerView(this.CalendarOption);
this.view.SelectedDateChanged += (object sender, SelectedDateChangedEventArgs e) =>
{
this.SelectedPersianDate = e.SelectedDate.PersianDate.ToString();
SetFormattedDate();
OnChangeDateCommand?.Execute(SelectedPersianDate);
}
if ((CalendarOption.AutoCloseAfterSelectDate && this.CalendarOption.SelectionMode == Enums.SelectionMode.Single)
|| (CalendarOption.AutoCloseAfterSelectDate && e.SelectedDates.Count == 2 && this.CalendarOption.SelectionMode == Enums.SelectionMode.Range))
this.view.Close();
};
this.view.Opened += (object sender, CommunityToolkit.Maui.Core.PopupOpenedEventArgs e) =>
{
this.OnOpenedCommand?.Execute(e);
};
this.view.Closed += (object sender, CommunityToolkit.Maui.Core.PopupClosedEventArgs e) =>
if (this.CalendarOption.SelectionMode == Enums.SelectionMode.Single)
{
this.SelectedPersianDate = e.SelectedDate.PersianDate.ToString();
SetFormattedDate();
OnChangeDateCommand?.Execute(SelectedPersianDate);
}
if ((CalendarOption.AutoCloseAfterSelectDate && this.CalendarOption.SelectionMode == Enums.SelectionMode.Single)
|| (CalendarOption.AutoCloseAfterSelectDate && e.SelectedDates.Count == 2 && this.CalendarOption.SelectionMode == Enums.SelectionMode.Range))
this.view.Close();
};
this.view.Opened += (object sender, CommunityToolkit.Maui.Core.PopupOpenedEventArgs e) =>
{
this.OnOpenedCommand?.Execute(e);
};
this.view.Closed += (object sender, CommunityToolkit.Maui.Core.PopupClosedEventArgs e) =>
{
this.view = null;
initedView = InitPickerView();
};
this.IsLoading = false;
}
catch (Exception ex)

Check warning on line 171 in PersianUIControlsMaui/Controls/DatePicker.xaml.cs

View workflow job for this annotation

GitHub Actions / build 

The variable 'ex' is declared but never used

Check warning on line 171 in PersianUIControlsMaui/Controls/DatePicker.xaml.cs

View workflow job for this annotation

GitHub Actions / build 

The variable 'ex' is declared but never used
{
this.view = null;
initedView = InitPickerView();
};
this.IsLoading = false;
}
});
}

Expand Down Expand Up @@ -201,14 +209,6 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName
SetFormattedDate();
this.initedView = this.InitPickerView();
}

if (string.IsNullOrEmpty(txtEntry.Text))
PullDownPlaceHolder();
else
{
SetFormattedDate();
PullUpPlaceHolder();
}
}
}

Expand All @@ -217,25 +217,6 @@ private void ucDatePicker_Loaded(object sender, EventArgs e)
this.initedView = this.InitPickerView();
}

private void Entry_Focused(object sender, FocusEventArgs e)
{
PullUpPlaceHolder();
}

private void Entry_Unfocused(object sender, FocusEventArgs e)
{
if (string.IsNullOrEmpty(txtEntry.Text))
PullDownPlaceHolder();
}

private void txtEntry_TextChanged(object sender, TextChangedEventArgs e)
{
if (string.IsNullOrEmpty(txtEntry.Text))
PullDownPlaceHolder();
else
PullUpPlaceHolder();
}

#endregion

#region Method's
Expand All @@ -257,37 +238,6 @@ void SetFormattedDate()
.Replace("d", dateParts[2].ToInt().ToString())
.Replace("DD", dateParts[2]);
}
void PullUpPlaceHolder()
{
lblPlaceholder.TranslateTo(0, -28);
if (PlaceHolderColor != ActivePlaceHolderColor)
_color = PlaceHolderColor; //Application.Current.Resources[$"Primary{Application.Current.RequestedTheme}"];
if (this.txtEntry.IsFocused)
{
var activeColor = this.ActivePlaceHolderColor;// ((Color)Application.Current.Resources[$"Primary{Application.Current.RequestedTheme}"]);
this.PlaceHolderColor = activeColor; //this.ActivePlaceHolderColor;
rectangle.Stroke = new SolidColorBrush(activeColor);
}
else
{
this.PlaceHolderColor = Color.FromArgb("#a4a6a9");
rectangle.Stroke = new SolidColorBrush(Color.FromArgb("#a4a6a9"));
}
lblPlaceholder.BackgroundColor = Colors.White;
//PlaceHolderColor = ActivePlaceHolderColor;
}
void PullDownPlaceHolder()
{
lblPlaceholder.TranslateTo(0, 0);
ActivePlaceHolderColor = PlaceHolderColor;
PlaceHolderColor = _color;
if (!this.txtEntry.IsFocused)
{
rectangle.Stroke = new SolidColorBrush(Color.FromArgb("#a4a6a9"));
ActivePlaceHolderColor = Color.FromArgb("#a4a6a9");// PlaceHolderColor;
PlaceHolderColor = Color.FromArgb("#a4a6a9");// _color;
}
}

#endregion
}
Loading

0 comments on commit 13b95c5

Please sign in to comment.