Can't set background colour of sfDatePicker when Mode is Dialog

[Shaun]

Hi, I'm unable to find a way to set the background colour of the sfDatePicker when the Mode=Dialog?

In addition to that, if I use Mode=Default and use the sfDatePicker (with other controls) in a self declared sfPopup, the sfDatePicker takes up the space on the parent page even though it isn't visible and should only exist in the sfPopup?

[Edit to the above problem] - when the sfPopup is in a StackLayout on the page (and not visible) it seems that when the popup is shown, and the space added to the StackLayout, this doesn't occur if the sfPopup is declared in a grid.

Does anyone have any suggestions for a) changing the colour of the entire sfDatePicker when in Dialog mode or b) the sfDatePicker taking up space when presented in a sfPopup? Or can't it exist in a sfPopup and you have to use the Dialog mode?

Regards

Shaun

[SaiGanesh Sakthivel]

Hi Shaun,

#Query 1: Regarding Unable to set the background colour of the sfDatePicker when the Mode=Dialog

Currently, we are checking the reported query from our end. We will check and update you on the further details on September 20, 2023. We appreciate your patience until then.

#Query 2: the sfDatePicker taking up space when presented in a sfPopup? Or can't it exist in a sfPopup and you have to use the Dialog mode?

We suggest you set the HeightRequest and WidthRequest for the SfDatePicker and set the AutoSizeMode property as both for the SfPopup control to overcome the reported scenario in the sample level. please refer to the following code snippet.

Code snippet

<StackLayout>

    <Button Text="Open the Picker" Clicked="Button_Clicked"/>

    <sfPopup:SfPopup x:Name="popup" AutoSizeMode="Both"

        ShowFooter="False" ShowHeader="False"

        >

        <sfPopup:SfPopup.ContentTemplate>

            <DataTemplate>

                <picker:SfDatePicker HeightRequest="300" WidthRequest="300" x:Name="datepicker" Mode="Default" OkButtonClicked="datepicker_OkButtonClicked" CancelButtonClicked="datepicker_CancelButtonClicked" Background="red">

                    <picker:SfDatePicker.HeaderView>

                        <picker:PickerHeaderView Text="DatePicker" Height="40"/>

                    </picker:SfDatePicker.HeaderView>

                    <picker:SfDatePicker.FooterView>

                        <picker:PickerFooterView Height="40" />

                    </picker:SfDatePicker.FooterView>

                </picker:SfDatePicker>

            </DataTemplate>

        </sfPopup:SfPopup.ContentTemplate>

    </sfPopup:SfPopup>

</StackLayout>

We suggest you set the ShowHeader and ShowFeader as false in the SfPopup control and enable the header and footer for the SfDatePicker by settings the height for the HeaderView and FooterView for the SfDatePicker control. You can close the SfPopup inside the OkButtonClicked and CancelButtonClicked event.

Code Snippet

<picker:SfDatePicker HeightRequest="300" WidthRequest="300" x:Name="datepicker" Mode="Default" OkButtonClicked="datepicker_OkButtonClicked" CancelButtonClicked="datepicker_CancelButtonClicked" Background="red">

    <picker:SfDatePicker.HeaderView>

        <picker:PickerHeaderView Text="DatePicker" Height="40"/>

    </picker:SfDatePicker.HeaderView>

    <picker:SfDatePicker.FooterView>

        <picker:PickerFooterView Height="40" />

    </picker:SfDatePicker.FooterView>

</picker:SfDatePicker>

private void datepicker_OkButtonClicked(object sender, EventArgs e)

{

    popup.IsOpen = false;

}

 

private void datepicker_CancelButtonClicked(object sender, EventArgs e)

{

    popup.IsOpen = false;

}

Please refer to the demo sample in the attachment. please let us know if you have any concerns.

Regards,
SaiGanesh Sakthivel

Attachment: SfPickerMAUI_3f069535.zip

[Shaun]

Thank you for your reply, will implement the suggestions.

Regards

Shaun

[Indumathi Ravichandran]

Hi Shaun,

Thanks for the update. Please get in touch with us if you would require any further assistance.

Regards,

Indumathi R