Examples of using the Translates property with static resources, bindings and C#.

Author: sebarslan

Maui.NullableDateTimePicker.Samples/MainPage.xaml

@@ -4,8 +4,17 @@
              xmlns:local="clr-namespace:Maui.NullableDateTimePicker.Samples"
              xmlns:ndtp="clr-namespace:Maui.NullableDateTimePicker;assembly=Maui.NullableDateTimePicker"
              x:Class="Maui.NullableDateTimePicker.Samples.MainPage"
+             xmlns:collections="clr-namespace:System.Collections.ObjectModel;assembly=netstandard"
              BackgroundColor="{AppThemeBinding Light=AliceBlue, Dark=DarkGray}"
              x:DataType="local:MainPage">
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <collections:ObservableCollection x:Key="ClockTranslates" x:TypeArguments="ndtp:TranslateItem">
+                <ndtp:TranslateItem Key="Hour" Value="Saat" />
+                <ndtp:TranslateItem Key="Minute" Value="Dakika" />
+            </collections:ObservableCollection>
+        </ResourceDictionary>
+    </ContentPage.Resources>
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="Modal" Command="{Binding OpenModalCommand}"/>
     </ContentPage.ToolbarItems>
@@ -16,6 +25,8 @@
             VerticalOptions="Fill">
             <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"
@@ -37,12 +48,8 @@
                             HorizontalOptions="Start"
                             CornerRadius="5"
                             Padding="5,0,5,0"
-                            SelectedDayStyle="{StaticResource SelectedDayStyle}">
-                <ndtp:NullableDateTimePicker.Translates>
-                    <ndtp:TranslateItem Key="Hour" Value="Saat"/>
-                    <ndtp:TranslateItem Key="Minute" Value="Dakika"/>
-                </ndtp:NullableDateTimePicker.Translates>
-            </ndtp:NullableDateTimePicker>
+                            SelectedDayStyle="{StaticResource SelectedDayStyle}"
+                            Translates="{StaticResource ClockTranslates}" />
 
             <Label Text="Date time picker control with border + popup with border and translates binding" TextColor="Black" />
 

Maui.NullableDateTimePicker/Controls/ButtonTemplate.xaml.cs

@@ -16,7 +16,7 @@ public ButtonTemplate()
         TapCommand = new Command(OnTapped);
         BindingContext = this;
         UpdateVisualState();
-        
+
     }
 
     public static readonly BindableProperty TextProperty =
@@ -62,29 +62,13 @@ private void UpdateVisualState()
     {
         if (Selected)
         {
-            if (Application.Current.RequestedTheme == AppTheme.Dark)
-            {
-                OuterBorder.BackgroundColor = Colors.DimGray; 
-                InnerLabel.TextColor = Colors.White;
-            }
-            else
-            {
-                OuterBorder.BackgroundColor = Colors.Blue;
-                InnerLabel.TextColor = Colors.White;
-            }
+            OuterBorder.BackgroundColor = Application.Current.RequestedTheme == AppTheme.Dark ? Colors.DimGray : Colors.Blue;
+            InnerLabel.TextColor = Colors.White;
         }
         else
         {
-            if (Application.Current.RequestedTheme == AppTheme.Dark)
-            {
-                OuterBorder.BackgroundColor = Colors.DarkGray;
-                InnerLabel.TextColor = Colors.White;
-            }
-            else
-            {
-                OuterBorder.BackgroundColor = Colors.LightGray;
-                InnerLabel.TextColor = Colors.Black;
-            }
+            OuterBorder.BackgroundColor = Application.Current.RequestedTheme == AppTheme.Dark ? Colors.DarkGray : Colors.LightGray;
+            InnerLabel.TextColor = Colors.Black;
         }
     }
 }

Maui.NullableDateTimePicker/Controls/ClockDrawable.cs

@@ -62,12 +62,13 @@ public void Draw(ICanvas canvas, RectF dirtyRect)
                     //clickablePoints.Add((x, y, "Hour", i));
 
                     // Draw the large dot
+                    canvas.FontSize = 11;
                     canvas.FillColor = Color.FromArgb("#4f20b0");
                     canvas.FillCircle(x, y, 3);
 
                     // Place the _hour12 number on the inner side of the circle
                     canvas.FontColor = Colors.Black;
-                    canvas.FontSize = 10; // More visible font size
+
                     float textX = (float)((ClockRadius - 10) * Math.Cos(angle));
                     float textY = (float)((ClockRadius - 10) * Math.Sin(angle));
 
@@ -97,6 +98,7 @@ public void Draw(ICanvas canvas, RectF dirtyRect)
                     //clickablePoints.Add((x, y, "Minute", i));
 
                     // Set color and size (large in 5 minutes)
+                    canvas.FontSize = 11;
                     canvas.FillColor = Color.FromArgb("#4f20b0");
                     float radius = i % 5 == 0 ? 3 : 1;
                     canvas.FillCircle(x, y, radius);

README.md

@@ -168,6 +168,7 @@ More examples, please see the samples project
 | ShowWeekNumbers | Determines whether to display week numbers in the calendar.	| false |
 | ToolButtonsStyle | Style of the control's tool buttons. | null |
 | WeekNumberStyle | Style of the week numbers in the calendar. | null |
+| Translates | This property is used to customize certain texts. Currently, it allows changing the text of the AM/PM buttons and the Hour/Minute group buttons in the clock view. | In 12-hour format: AM/PM, and in 24-hour format: 00–11 / 12–23, Hour/Minute |
 
 
 ## Datetimepicker Input Options (If NullableDateTimePicker is used as ContentView)
@@ -234,11 +235,11 @@ on ios, android, windows, maccatalyst
 
 # Changelog
 
-### 3.1.2 Preview
+### 3.1.2
 - Fixed ClockView freeze when SelectedDate is null and changing hour, minute, or AM/PM. (Thanks @universaldata-eu)
 - Fixed the clock display issue on Windows.
 - Group buttons have been added instead of toggle buttons that changed AM/PM and hour/minute.
-- A Translates list has been added. With this, the hour,minute,AM,PM texts on the group buttons can be customized. (See examples for usage.)
+- A Translates property has been added. With this, the hour,minute,AM,PM texts on the group buttons can be customized. (See examples for usage.)
 
 ### 3.1.1
 - Fixed issue where item colors in SelectList were not applied correctly.