955746 - Customize PopupSize Support for Picker and Calendar

MAUI/Calendar/calendar-mode.md

@@ -117,3 +117,31 @@ private void Button_Clicked(object sender, System.EventArgs e)
 {% endhighlight %} 
 
 {% endtabs %}
+
+### PopupSize
+
+SfCalendar allows the display of the Popup to render at any desired size by setting the [PopupWidth] and [PopupWidth] properties.
+
+The default value of `PopupWidth` and `PopupHeight` is set to 200.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<calendar:SfCalendar x:Name="calendar" 
+                         Mode="Dialog"
+                         PopupWidth="300"
+                         PopupHeight=400/>
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.calendar.PopupWidth = 300;
+this.calendar.PopupHeight = 400;
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+    ![PopupSize in .NET MAUI Calendar](calendar_PopupSize_support.png)

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 to render at any desired size by setting the [PopupWidth] and [PopupWidth] properties.
+
+The default value of `PopupWidth` and `PopupHeight` is set to 200.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="datePicker" 
+                         Mode="Dialog"
+                         PopupWidth="300"
+                         PopupHeight="400"/>
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.datePicker.PopupWidth = 300;
+this.datePicker.PopupHeight = 400;
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+    ![PopupSize in .NET MAUI Date Picker](maui-date-picker-relative-dialog-mode2.png)

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 to render at any desired size by setting the [PopupWidth] and [PopupWidth] properties.
+
+The default value of `PopupWidth` and `PopupHeight` is set to 200.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="picker" 
+                         Mode="Dialog"
+                         PopupWidth="300"
+                         PopupHeight="400"/>
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.picker.PopupWidth = 300;
+this.picker.PopupHeight = 400;
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+    ![PopupSize in .NET MAUI Date Time Picker](maui-date-time-picker-popupsize.png)

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 to render at any desired size by setting the [PopupWidth] and [PopupWidth] properties.
+
+The default value of `PopupWidth` and `PopupHeight` is set to 200.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<Grid>
+    <picker:SfPicker 
+            x:Name="picker"
+            Mode="Dialog"
+            RelativePosition="AlignToRightOf"
+            PopupWidth="200"
+            PopupHeight="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.PopupWidth = 300;
+    this.picker.PopupHeight = 440;
+}
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+    ![PopupSize in .Net Maui Picker.](maui-picker-popupsize.png)

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 to render at any desired size by setting the [PopupWidth] and [PopupWidth] properties.
+
+The default value of `PopupWidth` and `PopupHeight` is set to 200.
+
+{% tabs %}
+
+{% highlight xaml tabtitle="XAML" %}
+
+<picker:SfdatePicker x:Name="timePicker" 
+                         Mode="Dialog"
+                         PopupWidth="300"
+                         PopupHeight="400"/>
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="C#" %}
+
+this.timePicker.PopupWidth = 300;
+this.timePicker.PopupHeight = 400;
+
+{% endhighlight %} 
+
+{% endtabs %}
+
+    ![PopupSize in .NET MAUI Time Picker.](maui-time-picker-popupsize.png)