How can I fire DatePicker when a button is clicked

[amuza2]

Hi everyone, I need some help please,
what I want to achieve is once I click on the calendar button the DatePicker should display to select the date.
note that, the icon is just a button:

<Button Background="Transparent" Command="{Binding OpenDatePickerCommand}">
           <PathIcon Data="{StaticResource calendar_regular}" />
</Button>

[LaurentInSeattle]

One possible solution:

Add an (by default invisible) DatePicker to the view, bound to a boolean property in the VM.
Clicking the button activate the OpenDatePickerCommand in the VM , which toggles the above property.

[amuza2]

if I understand what you are saying is: toggling the visibility!!
but I want to fire on the DatePicker to select the data.

why I am even doing that way, I don't know to make (override) the DatePicker as a square calendar icon, that's why I created a button to try to fire the DatePicker from it.

[LaurentInSeattle]

Use something like :
XAML property: SelectedDate="{Binding YourSelectedDateProperty}"

[amuza2]

I think you didn't understand my question.

[amuza2]

I solved the problem, I chose a different control, instead of DatePicker I used CalendarDatePicker because it has the IsDropDownOpen property that I can use to show the drop down when clicked on a button.

for code, here is what I did:

<CalendarDatePicker
       IsDropDownOpen="{Binding IsOpenDropDown}"
       SelectedDate="{Binding SelectedDate}"
       Width="0" />

<Button Background="Transparent" Command="{Binding OpenCalendarCommand}">
       <PathIcon Data="{StaticResource calendar_regular}" />
</Button>

[ObservableProperty] private bool _isOpenDropDown;

[RelayCommand]
    private void OpenCalendar()
    {
        IsOpenDropDown = false;
        Dispatcher.UIThread.Post(() =>
        {
            IsOpenDropDown = true;
        });
    }

also I had an issue, I wanted to add the selected date to the textbox, the CalendarDatePicker didn't work with DateTimeOffset I had to use DateTime.

[amuza2]

After few days I was back to the DatePicker as it fits better than CalendarDatePicker, hopefully I found the solution after looking at the DatePicker source code.
here is how I did it:

I have this:

I want once I click on the calendar button, the datepicker fires and show the date selection, like below:

<StackPanel Grid.Column="1" Orientation="Horizontal">
                        <DatePicker
                            DayFormat="ddd dd"
                            Opacity="0"
                            SelectedDate="{Binding SelectedDate}"
                            Width="0"
                            x:Name="MyDatePicker" />
                        <Button
                            Background="Transparent"
                            Command="{Binding OpenDatePickerCommand}"
                            CommandParameter="{Binding #MyDatePicker}">
                            <PathIcon Data="{StaticResource calendar_regular}" />
                        </Button>
                        <Button Background="Transparent" Command="{Binding ClearDateCommand}">
                            <PathIcon Data="{StaticResource erase_regular}" />
                        </Button>
                    </StackPanel>

[RelayCommand]
    private void OpenDatePicker(DatePicker? datePicker)
    {
        if (datePicker != null)
        {
            // Find the internal flyout button using the template part name
            var flyoutButton = datePicker.GetTemplateChildren()
                .OfType<Button>()
                .FirstOrDefault(b => b.Name == "PART_FlyoutButton");
            
            if (flyoutButton != null)
            {
                // Simulate a click on the internal button
                flyoutButton.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
                
               // I added this part to align the popup to the center as it was pushed to the right, I couldn't see the year
                Dispatcher.UIThread.Post(() =>
                {
                    var popup = datePicker.GetTemplateChildren()
                        .OfType<Popup>()
                        .FirstOrDefault(p => p.Name == "PART_Popup");
                
                    if (popup != null)
                    {
                        popup.Placement = PlacementMode.Pointer;
                        popup.HorizontalOffset = -250;
                        popup.VerticalOffset = -50;
                    }
                }, DispatcherPriority.Background);
            }
        }
    }

I hard coded the horizontal and vertical positions.