A PleasantUI-styled DatePicker that decouples the visual container from the internal flyout button, allowing full theme control over the outer shape. The template must provide a click area and a hidden flyout button for Avalonia's internal wiring.
<PleasantDatePicker Watermark="Select a date" />Inherits all properties from DatePicker:
SelectedDate- The currently selected dateWatermark- Placeholder text shown when no date is selectedMinYear- Minimum year that can be selectedMaxYear- Maximum year that can be selectedIsTodayHighlighted- Whether today's date is highlighted in the calendarDisplayDate- The date to display in the calendar view- And other standard DatePicker properties
The control template must provide:
PART_ClickArea- The visible, styled container that the user clicksPART_FlyoutButton- A hidden zero-size Button kept for Avalonia's internal wiring
<PleasantDatePicker Watermark="Select a date"
SelectedDate="{Binding BirthDate}" />Restrict selectable dates:
<PleasantDatePicker MinYear="1900"
MaxYear="2100" />Control whether today's date is highlighted:
<PleasantDatePicker IsTodayHighlighted="True" />Bind to a DateTime property:
<PleasantDatePicker SelectedDate="{Binding SelectedDate, Mode=TwoWay}" />public DateTime? SelectedDate
{
get => _selectedDate;
set
{
_selectedDate = value;
OnPropertyChanged();
}
}<StackPanel Spacing="12" Width="250">
<TextBlock Text="Date Selection" FontWeight="Bold" />
<PleasantDatePicker Watermark="Start date"
SelectedDate="{Binding StartDate}" />
<PleasantDatePicker Watermark="End date"
SelectedDate="{Binding EndDate}"
MinYear="2020"
MaxYear="2030" />
</StackPanel>- The control uses a custom click area to trigger the calendar popup, allowing complete control over the visual styling
- The internal flyout button is kept in the visual tree (zero size) to maintain Avalonia's DatePicker functionality