955746 - Customize PopupSize Support for Picker and Calendar

MAUI/Calendar/calendar-mode.md

@@ -117,3 +117,27 @@ private void Button_Clicked(object sender, System.EventArgs e)
 {% endhighlight %} 
 
 {% endtabs %}
+
+### PopupSize
+
+SfCalendar allows the display of the Popup at any desired size by setting the [PopupSize] property.
+
+The default value of the `PopupSize` height is calculated based on the `SfCalendar.HeaderView.Height`, `SfCalendar.MonthView.HeaderView.height`, `SfCalendar.FooterView.Height`.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<calendar:SfCalendar x:Name="calendar" 
+                         Mode="Dialog"
+                         PopupSize="300,400" />
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.calendar.PopupSize = new Size(300,400);
+
+{% endhighlight %} 
+
+{% endtabs %}

MAUI/DatePicker/date-picker-mode.md

@@ -161,4 +161,32 @@ private void Button_Clicked(object sender, System.EventArgs e)
 
    ![Relative dialog mode in .NET MAUI Date picker.](images/date-picker-mode/maui-date-picker-relative-dialog-mode1.png)
 
-   ![Relative dialog mode in .NET MAUI Date picker.](images/date-picker-mode/maui-date-picker-relative-dialog-mode2.png)
+   ![Relative dialog mode in .NET MAUI Date picker.](images/date-picker-mode/maui-date-picker-relative-dialog-mode2.png)
+
+### PopupSize
+
+SfDatePicker allows the display of the Popup at any desired size by setting the [PopupSize] property.
+
+The default value of the `PopupSize` height is calculated based on the number of items available in the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_ItemsSource) property and the default value of the `SfDatePicker.HeaderView.Height`, `SfDatePicker.ColumnHeaderView.Height` and `SfDatePicker.FooterView.Height`.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="datePicker" 
+                         Mode="Dialog"
+                         PopupSize="300,400" />
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.datePicker.PopupSize = new Size(300,400);
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+N>
+* SfDatePicker in the popup will not be rendered properly if the `PopupSize` property is less than the combined height of the `SfDatePicker.HeaderView.Height`, `SfDatePicker.ColumnHeaderView.Height` and `SfDatePicker.FooterView.Height`.
+* If the `PopupSize` property is greater than the combined height of the `SfDatePicker.HeaderView.Height`, `SfDatePicker.ColumnHeaderView.Height` and `SfDatePicker.FooterView.Height`, the remaining height will be allocated to the datepicker container.

MAUI/DateTimePicker/date-time-picker-mode.md

@@ -150,4 +150,32 @@ private void Button_Clicked(object sender, EventArgs e)
 
    ![Relative dialog mode in .NET MAUI Date Time picker.](images/date-time-picker-mode/maui-date-time-picker-relative-dialog-mode1.png)
 
-   ![Relative dialog mode in .NET MAUI Date Time picker.](images/date-time-picker-mode/maui-date-time-picker-relative-dialog-mode2.png)
+   ![Relative dialog mode in .NET MAUI Date Time picker.](images/date-time-picker-mode/maui-date-time-picker-relative-dialog-mode2.png)
+
+### PopupSize
+
+SfDateTimePicker allows the display of the Popup at any desired size by setting the [PopupSize] property.
+
+The default value of the `PopupSize` height is calculated based on the number of items available in the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_ItemsSource) property and the default value of the `SfDateTimePicker.HeaderView.Height`, `SfDateTimePicker.ColumnHeaderView.Height` and `SfDateTimePicker.FooterView.Height`.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="picker" 
+                         Mode="Dialog"
+                         PopupSize="300,400" />
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.picker.PopupSize = new Size(300,400);
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+N>
+* SfDateTimePicker in the popup will not be rendered properly if the `PopupSize` property is less than the combined height of the `SfDateTimePicker.HeaderView.Height`, `SfDateTimePicker.ColumnHeaderView.Height` and `SfDateTimePicker.FooterView.Height`.
+* If the `PopupSize` property is greater than the combined height of the `SfDateTimePicker.HeaderView.Height`, `SfDateTimePicker.ColumnHeaderView.Height` and `SfDateTimePicker.FooterView.Height`, the remaining height will be allocated to the datetimepicker container.

MAUI/Picker/picker-mode.md

@@ -161,4 +161,61 @@ private void Button_Clicked(object sender, System.EventArgs e)
 
    ![Relative dialog mode in .NET MAUI Picker.](images/picker-mode/maui-picker-relative-dialog-mode1.png)
 
-   ![Relative dialog mode in .NET MAUI Picker.](images/picker-mode/maui-picker-relative-dialog-mode2.png)
+   ![Relative dialog mode in .NET MAUI Picker.](images/picker-mode/maui-picker-relative-dialog-mode2.png)
+
+### PopupSize
+
+SfPicker allows the display of the Popup at any desired size by setting the [PopupSize] property.
+
+The default value of the `PopupSize` height is calculated based on the number of items available in the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_ItemsSource) property and the default value of the `SfPicker.HeaderView.Height`, `SfPicker.ColumnHeaderView.Height` and `SfPicker.FooterView.Height`.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<Grid>
+    <picker:SfPicker 
+            x:Name="picker"
+            Mode="Dialog"
+            RelativePosition="AlignToRightOf"
+            PopupSize="200,440">
+        <picker:SfPicker.HeaderView >
+            <picker:PickerHeaderView Height="40" Text="Select a color" />
+        </picker:SfPicker.HeaderView>
+        <picker:SfPicker.Columns>
+            <picker:PickerColumn HeaderText="Colors" ItemsSource="{Binding DataSource}"/>
+        </picker:SfPicker.Columns>
+        <picker:SfPicker.ColumnHeaderView >
+            <picker:PickerColumnHeaderView Height="40"/>
+        </picker:SfPicker.ColumnHeaderView>
+        <picker:SfPicker.FooterView>
+            <picker:PickerFooterView  Height="40"/>
+        </picker:SfPicker.FooterView>
+    </picker:SfPicker>
+    <Button Text="Open Text"
+            x:Name="pickerButton"
+            Clicked="pickerButton_Clicked"
+            HorizontalOptions="Center"
+            VerticalOptions="Center"
+            HeightRequest="40"
+            WidthRequest="150">
+    </Button>
+</Grid>
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+private void pickerButton_Clicked(object sender, System.EventArgs e)
+{
+    this.picker.IsOpen = true;
+    this.picker.PopupSize = new Size(200,440);
+}
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+N>
+* SfPicker in the popup will not be rendered properly if the `PopupSize` property is less than the combined height of the `SfPicker.HeaderView.Height`, `SfPicker.ColumnHeaderView.Height`, `SfPicker.FooterView.Height` and Picker items.
+* If the `PopupSize` property is greater than the combined height of the `SfPicker.HeaderView.Height`, `SfPicker.ColumnHeaderView.Height`, `SfPicker.FooterView.Height` and Picker items, the remaining height will be allocated to the picker container.

MAUI/TimePicker/time-picker-mode.md

@@ -161,4 +161,32 @@ private void Button_Clicked(object sender, System.EventArgs e)
 
    ![Relative dialog mode in .NET MAUI Time picker.](images/time-picker-mode/maui-time-picker-relative-dialog-mode1.png)
 
-   ![Relative dialog mode in .NET MAUI Time picker.](images/time-picker-mode/maui-time-picker-relative-dialog-mode2.png)
+   ![Relative dialog mode in .NET MAUI Time picker.](images/time-picker-mode/maui-time-picker-relative-dialog-mode2.png)
+
+### PopupSize
+
+SfTimePicker allows the display of the Popup at any desired size by setting the [PopupSize] property.
+
+The default value of the `PopupSize` height is calculated based on the number of items available in the [ItemSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerColumn.html#Syncfusion_Maui_Picker_PickerColumn_ItemsSource) property and the default value of the `SfTimePicker.HeaderView.Height`, `SfTimePicker.ColumnHeaderView.Height` and `SfTimePicker.FooterView.Height`.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="timePicker" 
+                         Mode="Dialog"
+                         PopupSize="300,400" />
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.timePicker.PopupSize = new Size(300,400);
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+N>
+* SfTimePicker in the popup will not be rendered properly if the `PopupSize` property is less than the combined height of the `SfTimePicker.HeaderView.Height`, `SfTimePicker.ColumnHeaderView.Height` and `SfTimePicker.FooterView.Height`.
+* If the `PopupSize` property is greater than the combined height of the `SfTimePicker.HeaderView.Height`, `SfTimePicker.ColumnHeaderView.Height` and `SfTimePicker.FooterView.Height`, the remaining height will be allocated to the datepicker container.