Skip to content

Commit

Permalink
Dark mode
Browse files Browse the repository at this point in the history
sebarslan committed Dec 28, 2024
1 parent 6b1344c commit d165e3b
Showing 5 changed files with 149 additions and 22 deletions.
13 changes: 12 additions & 1 deletion Maui.NullableDateTimePicker.Samples/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -10,9 +10,20 @@
Padding="30,0"
VerticalOptions="Fill">

<!-- Nullable datetime picker -->
<Label Text="Maui Nullable and Clearable DateTimePicker Examples" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="Black" />

<HorizontalStackLayout VerticalOptions="Center">
<Label Text="Toggle Dark Mode"
FontSize="16"
HorizontalOptions="Center" />

<Switch x:Name="themeSwitch"
Toggled="OnThemeToggled"
HorizontalOptions="Center" />
</HorizontalStackLayout>
<!-- Nullable datetime picker -->


<Label Text="DateTimepicker" TextColor="Black" />

<ndtp:NullableDateTimePicker NullableDateTime="{Binding MyDateTime}"
8 changes: 8 additions & 0 deletions Maui.NullableDateTimePicker.Samples/MainPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ public MainPage()
{
BindingContext = this;
InitializeComponent();
themeSwitch.IsToggled = Application.Current.RequestedTheme == AppTheme.Dark;

// Create Datetimepicker Programmatically
CreateDateTimePickerProgrammatically();
@@ -108,6 +109,13 @@ private async void DateTimePicker_Clicked(object sender, EventArgs e)

public DateTime? MyMinDate => new DateTime(DateTime.Now.Year, DateTime.Now.Month, 10);
public DateTime? MyMaxDate => new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20);

private void OnThemeToggled(object sender, ToggledEventArgs e)
{
bool isDarkMode = e.Value;

App.Current.UserAppTheme = isDarkMode ? AppTheme.Dark : AppTheme.Light;
}
}

static class IconFont
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@
<ApplicationVersion>1</ApplicationVersion>

<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
<WindowsPackageType>None</WindowsPackageType>
<!-- <WindowsPackageType>None</WindowsPackageType> -->

<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
Original file line number Diff line number Diff line change
@@ -50,20 +50,67 @@ public string ItemDisplayBinding
set => SetValue(ItemDisplayBindingProperty, value);
}

// TextColor BindableProperty
public static readonly BindableProperty TextColorProperty =
// ItemTextColor BindableProperty
public static readonly BindableProperty ItemTextColorProperty =
BindableProperty.Create(
nameof(TextColor), // Property name
nameof(ItemTextColor), // Property name
typeof(Color), // Property type
typeof(NullableDateTimePickerSelectList), // Declaring type
Colors.Black, // Default value
BindingMode.OneWay // Binding mode
);

public Color TextColor
public Color ItemTextColor
{
get => (Color)GetValue(TextColorProperty);
set => SetValue(TextColorProperty, value);
get => (Color)GetValue(ItemTextColorProperty);
set => SetValue(ItemTextColorProperty, value);
}

// ItemBackgroundColor BindableProperty
public static readonly BindableProperty ItemBackgroundColorProperty =
BindableProperty.Create(
nameof(ItemBackgroundColor), // Property name
typeof(Color), // Property type
typeof(NullableDateTimePickerSelectList), // Declaring type
Colors.White, // Default value
BindingMode.OneWay // Binding mode
);

public Color ItemBackgroundColor
{
get => (Color)GetValue(ItemBackgroundColorProperty);
set => SetValue(ItemBackgroundColorProperty, value);
}

// SelectedItemTextColor BindableProperty
public static readonly BindableProperty SelectedItemTextColorProperty =
BindableProperty.Create(
nameof(SelectedItemTextColor), // Property name
typeof(Color), // Property type
typeof(NullableDateTimePickerSelectList), // Declaring type
Colors.Black, // Default value
BindingMode.OneWay // Binding mode
);

public Color SelectedItemTextColor
{
get => (Color)GetValue(SelectedItemTextColorProperty);
set => SetValue(SelectedItemTextColorProperty, value);
}
// SelectedItemBackgroundColor BindableProperty
public static readonly BindableProperty SelectedItemBackgroundColorProperty =
BindableProperty.Create(
nameof(SelectedItemBackgroundColor), // Property name
typeof(Color), // Property type
typeof(NullableDateTimePickerSelectList), // Declaring type
Colors.LightBlue, // Default value
BindingMode.OneWay // Binding mode
);

public Color SelectedItemBackgroundColor
{
get => (Color)GetValue(SelectedItemBackgroundColorProperty);
set => SetValue(SelectedItemBackgroundColorProperty, value);
}
#endregion //BindableProperties

@@ -94,12 +141,10 @@ public NullableDateTimePickerSelectList()
{
var label = new Label
{
TextColor = Colors.Black,
FontSize = 12,
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
FontAttributes = FontAttributes.Bold,
BackgroundColor = Colors.Transparent,
VerticalTextAlignment = TextAlignment.Center,
HorizontalTextAlignment = TextAlignment.Center,
Padding = 0,
@@ -108,6 +153,28 @@ public NullableDateTimePickerSelectList()

label.SetBinding(Label.TextProperty, new Binding(ItemDisplayBinding ?? "."));

VisualStateManager.SetVisualStateGroups(label, new VisualStateGroupList
{
new VisualStateGroup
{
Name = "CommonStates",
States =
{
new VisualState
{
Name = "Normal",
Setters = { new Setter { Property = Label.TextColorProperty, Value = ItemTextColor ?? Colors.Black } }
},
new VisualState
{
Name = "Selected",
Setters = { new Setter { Property = Label.TextColorProperty, Value = SelectedItemTextColor ?? Colors.Black } }
}
}
}

});

var border = new Border
{
StrokeShape = new RoundRectangle
@@ -134,8 +201,8 @@ public NullableDateTimePickerSelectList()
Name = "Normal",
Setters =
{
new Setter { Property = Border.BackgroundColorProperty, Value = Colors.White },
new Setter { Property = Border.BackgroundProperty, Value = Colors.White },
new Setter { Property = Border.BackgroundColorProperty, Value = ItemBackgroundColor ?? Colors.White },
new Setter { Property = Border.BackgroundProperty, Value = ItemBackgroundColor ?? Colors.White },
new Setter { Property = Border.StrokeProperty, Value = Colors.Gray },
new Setter { Property = Border.StrokeThicknessProperty, Value = 1 }
}
@@ -145,8 +212,8 @@ public NullableDateTimePickerSelectList()
Name = "Selected",
Setters =
{
new Setter { Property = Border.BackgroundColorProperty, Value = Colors.LightBlue },
new Setter { Property = Border.BackgroundProperty, Value = Colors.LightBlue },
new Setter { Property = Border.BackgroundColorProperty, Value = SelectedItemBackgroundColor ?? Colors.LightBlue },
new Setter { Property = Border.BackgroundProperty, Value = SelectedItemBackgroundColor ?? Colors.LightBlue },
new Setter { Property = Border.StrokeProperty, Value = Colors.Blue },
new Setter { Property = Border.StrokeThicknessProperty, Value = 2 }
}
@@ -166,7 +233,7 @@ public NullableDateTimePickerSelectList()
VerticalOptions = LayoutOptions.Fill,
RowDefinitions =
{
new RowDefinition { Height = new GridLength(22, GridUnitType.Absolute) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
}
};
@@ -178,12 +245,12 @@ public NullableDateTimePickerSelectList()
HorizontalOptions = LayoutOptions.End,
FontSize = 16,
MaximumWidthRequest = 50,
MaximumHeightRequest = 22,
MaximumHeightRequest = DeviceInfo.Platform == DevicePlatform.WinUI ? 20 : 25,
BorderWidth = 1,
WidthRequest = 50,
HeightRequest = 22,
HeightRequest = DeviceInfo.Platform == DevicePlatform.WinUI ? 20 : 25,
Padding = 0,
Margin = new Thickness(0, 0, 5, 0)
Margin = new Thickness(5)
};
closeButton.Clicked += (s, e) =>
{
@@ -264,6 +331,7 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName
if (propertyName == nameof(IsEnabled))
{
_collectionView.IsEnabled = this.IsEnabled;
this.IsEnabled = true;
}
}
}
48 changes: 44 additions & 4 deletions Maui.NullableDateTimePicker/Popup/NullableDateTimePickerContent.cs
Original file line number Diff line number Diff line change
@@ -1166,14 +1166,35 @@ private void CreateYearsSelectList()
{
years.Add(y);
}
var itemTextColor = Colors.Black;
var dayTextColorSetter = _dayStyle.Setters.FirstOrDefault(s => s.Property == Button.TextColorProperty);

if (dayTextColorSetter != null)
{
itemTextColor = (Color)dayTextColorSetter.Value;
}
var itemBackgroundColor = Colors.White;
var itemBackgroundColorSetter = _dayStyle.Setters.FirstOrDefault(s => s.Property == Button.BackgroundColorProperty);

if (itemBackgroundColorSetter != null)
{
itemBackgroundColor = (Color)itemBackgroundColorSetter.Value; // Colors.Transparent döner
}
var selectedItemBackgroundColor = Colors.White;
var selectedItemBackgroundColorSetter = _selectedDayStyle.Setters.FirstOrDefault(s => s.Property == Button.BackgroundColorProperty);
if (selectedItemBackgroundColorSetter != null)
{
selectedItemBackgroundColor = (Color)itemBackgroundColorSetter.Value; // Colors.Transparent döner
}
_yearsSelectList = new NullableDateTimePickerSelectList
{
AutomationId = _options.AutomationId + "_CalendarYearsSelectList",
Margin = new Thickness(0, 5),
TextColor = _options.HeaderForeColor ?? Colors.Black,
BackgroundColor = Colors.White,
BackgroundColor = _options.BodyBackgroundColor ?? (Application.Current.RequestedTheme == AppTheme.Dark ? Color.FromRgba("#434343") : Colors.White),
ItemTextColor = GetColorFromStyle(_dayStyle, Button.TextColorProperty, Colors.Black),
SelectedItemTextColor = GetColorFromStyle(_selectedDayStyle, Button.TextColorProperty, Colors.Black),
ItemBackgroundColor = GetColorFromStyle(_dayStyle, Button.BackgroundColorProperty, Colors.White),
SelectedItemBackgroundColor = GetColorFromStyle(_selectedDayStyle, Button.BackgroundColorProperty, Colors.LightBlue),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
ItemsSource = years,
@@ -1198,7 +1219,11 @@ private void CreateMonthsSelectList()
_monthsSelectList = new NullableDateTimePickerSelectList
{
AutomationId = _options.AutomationId + "_CalendarMonthsSelectList",
BackgroundColor = Colors.Transparent,
BackgroundColor = _options.BodyBackgroundColor ?? (Application.Current.RequestedTheme == AppTheme.Dark ? Color.FromRgba("#434343") : Colors.White),
ItemTextColor = GetColorFromStyle(_dayStyle, Button.TextColorProperty, Colors.Black),
SelectedItemTextColor = GetColorFromStyle(_selectedDayStyle, Button.TextColorProperty, Colors.Black),
ItemBackgroundColor = GetColorFromStyle(_dayStyle, Button.BackgroundColorProperty, Colors.White),
SelectedItemBackgroundColor = GetColorFromStyle(_selectedDayStyle, Button.BackgroundColorProperty, Colors.LightBlue),
Margin = 5,
Padding = 0,
IsVisible = false,
@@ -1220,7 +1245,6 @@ private void ShowYearsSelectList()
{
CreateYearsSelectList();


if (_daysGrid != null)
_daysGrid.IsVisible = false;

@@ -1370,4 +1394,20 @@ private static int UpdateHourByAmPmOption(int currentHour, string amPmOption)

return currentHour;
}

private static Color GetColorFromStyle(Style style, BindableProperty bindableProperty, Color defaultColor)
{
try
{
var colorSetter = style.Setters.FirstOrDefault(s => s.Property == bindableProperty);

if (colorSetter != null)
{
return (Color)colorSetter.Value;
}
}
catch (Exception ex) { }

return defaultColor;
}
}

0 comments on commit d165e3b

Please sign in to comment.