Blog

Controls - How to set the date picker icon size - Workaround

The date picker control contains no built-in property to set the date picker icon. This post describes a workaround to this issue.

An interesting question I recently saw related to the sizing of the date picker icon. 

With both the modern and classic date picker controls, there's no property to set the size of the icon. As a result, if we resize the control's height and width, the icon looks odd because it retains its initial small size (as illustrated below).



Because the icon cannot be resized, a workaround is to hide it and replace it with an image or icon. Here are the steps to carry out this task.

The first step is to hide the date picker icon by setting the 3 properties Fill, IconBackground and IconFill to Color.Transparent.

The result is shown below.



The next step is to insert an icon or image control and place it over the date picker control

In the screenshot below, I added a 'Calendar Blank' icon and set the Padding, Color, and Fill properties to match the appearance of the original icon.


The important step is to place the icon behind the date control by right-clicking the icon and selecting Reorder > 'Send to back'. This ensures that when the user clicks the icon, the date picker captures the click and displays the date picker.

The final result is shown here. Hopefully this workaround will help app makers who want to resize the date picker icon.

Previous