Hide DateTimePicker text and change Usercontrol

Question

I have a user control that has a DateTimePicker superimposed on a single line text field (Tb)
covering the text part of DateTimePicker. Text field Tb ( green ) pinned (LTRB).

The problem occurs when resizing usercontrol.
The overlay datetimepicker appears behind Tb.

Currently, user control is 242 (W) x 20 (H). Problems arise when resizing controls below 100 (Width).

I tried blank text with CustomFormat set to "", but the user control supports many datetimepicker functions, so this is not an option.

I tried to set the minimum size in the user control, but this does not work either.

Edit:
The control is already used in several applications. In these applications, the minimum size of the control is 90X20, while the minimum size that we have set now is 97x20.
Will the VS designer have the size of existing controls up to 97x20 after making the change?
How to achieve this effect (resize to 97x20)?

Change **** after adding the minimum size ****

namespace WindowsFormsApplication1 { partial class CDatePicker { private System.ComponentModel.IContainer components = null; protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region Component Designer generated code private void InitializeComponent() { this.splitContainer1 = new System.Windows.Forms.SplitContainer(); this.datepanel = new System.Windows.Forms.Panel(); this.datetxt = new System.Windows.Forms.TextBox(); this.dateTimePicker1 = new System.Windows.Forms.DateTimePicker(); this.timepanel = new System.Windows.Forms.Panel(); this.timetxt = new System.Windows.Forms.TextBox(); ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).BeginInit(); this.splitContainer1.Panel1.SuspendLayout(); this.splitContainer1.Panel2.SuspendLayout(); this.splitContainer1.SuspendLayout(); this.datepanel.SuspendLayout(); this.timepanel.SuspendLayout(); this.SuspendLayout(); // // splitContainer1 // this.splitContainer1.Dock = System.Windows.Forms.DockStyle.Fill; this.splitContainer1.Location = new System.Drawing.Point(0, 0); this.splitContainer1.Name = "splitContainer1"; // // splitContainer1.Panel1 // this.splitContainer1.Panel1.Controls.Add(this.datepanel); this.splitContainer1.Panel1MinSize = 105; // // splitContainer1.Panel2 // this.splitContainer1.Panel2.Controls.Add(this.timepanel); this.splitContainer1.Size = new System.Drawing.Size(236, 20); this.splitContainer1.SplitterDistance = 178; this.splitContainer1.SplitterWidth = 1; this.splitContainer1.TabIndex = 0; // // datepanel // this.datepanel.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) | System.Windows.Forms.AnchorStyles.Left) | System.Windows.Forms.AnchorStyles.Right))); this.datepanel.Controls.Add(this.datetxt); this.datepanel.Controls.Add(this.dateTimePicker1); this.datepanel.Location = new System.Drawing.Point(0, 0); this.datepanel.Margin = new System.Windows.Forms.Padding(0); this.datepanel.Name = "datepanel"; this.datepanel.Size = new System.Drawing.Size(175, 20); this.datepanel.TabIndex = 0; // // datetxt // this.datetxt.BackColor = System.Drawing.Color.Gainsboro; this.datetxt.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle; this.datetxt.Location = new System.Drawing.Point(0, 0); this.datetxt.MinimumSize = new System.Drawing.Size(60, 20); this.datetxt.Name = "datetxt"; this.datetxt.Size = new System.Drawing.Size(71, 20); this.datetxt.TabIndex = 3; this.datetxt.Text = "date"; // // dateTimePicker1 // this.dateTimePicker1.Dock = System.Windows.Forms.DockStyle.Fill; this.dateTimePicker1.Format = System.Windows.Forms.DateTimePickerFormat.Short; this.dateTimePicker1.Location = new System.Drawing.Point(0, 0); this.dateTimePicker1.Margin = new System.Windows.Forms.Padding(0); this.dateTimePicker1.MinimumSize = new System.Drawing.Size(65, 20); this.dateTimePicker1.Name = "dateTimePicker1"; this.dateTimePicker1.Size = new System.Drawing.Size(175, 20); this.dateTimePicker1.TabIndex = 2; this.dateTimePicker1.Value = new System.DateTime(2012, 11, 15, 0, 0, 0, 0); // // timepanel // this.timepanel.Controls.Add(this.timetxt); this.timepanel.Dock = System.Windows.Forms.DockStyle.Fill; this.timepanel.Location = new System.Drawing.Point(0, 0); this.timepanel.Margin = new System.Windows.Forms.Padding(0); this.timepanel.Name = "timepanel"; this.timepanel.Size = new System.Drawing.Size(57, 20); this.timepanel.TabIndex = 0; // // timetxt // this.timetxt.Dock = System.Windows.Forms.DockStyle.Fill; this.timetxt.Location = new System.Drawing.Point(0, 0); this.timetxt.Name = "timetxt"; this.timetxt.Size = new System.Drawing.Size(57, 20); this.timetxt.TabIndex = 1; this.timetxt.Text = "time"; this.timetxt.TextAlign = System.Windows.Forms.HorizontalAlignment.Center; // // CDatePicker // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.AutoSize = true; this.Controls.Add(this.splitContainer1); this.MaximumSize = new System.Drawing.Size(236, 20); this.MinimumSize = new System.Drawing.Size(100, 20); this.Name = "CDatePicker"; this.Size = new System.Drawing.Size(236, 20); this.splitContainer1.Panel1.ResumeLayout(false); this.splitContainer1.Panel2.ResumeLayout(false); ((System.ComponentModel.ISupportInitialize)(this.splitContainer1)).EndInit(); this.splitContainer1.ResumeLayout(false); this.datepanel.ResumeLayout(false); this.datepanel.PerformLayout(); this.timepanel.ResumeLayout(false); this.timepanel.PerformLayout(); this.ResumeLayout(false); } #endregion private System.Windows.Forms.SplitContainer splitContainer1; private System.Windows.Forms.Panel datepanel; private System.Windows.Forms.TextBox datetxt; private System.Windows.Forms.DateTimePicker dateTimePicker1; private System.Windows.Forms.Panel timepanel; private System.Windows.Forms.TextBox timetxt; } } 

Edit: By adding a minimum size, it looks better, but the calendar frame disappears. when the control is changed to min and the project will be rebuilt ..
Also, the text field does not remain attached to the calendar button.

edit: pic added for above .. calender disappears.

Edit : Oh, I missed one more thing when the date field and time field are reset. That is why container partitions. Minimum size calculations should also be aware of this. (I think two different minimum sizes depending on the visibility of the time field.)

Questions:

a) How can I prevent user control from resizing beyond a certain minimum limit to avoid the problem above? (pic1 is the size of the idea)

b) Can I draw a datetimepicker so that the text is muted and we only see the image of the calendar expansion button? If so, will I still have to handle resize events?

c) How can I resize a text box so that it always spans the text portion of the DTP date.

Answer 1

You have a simple problem and a difficult problem. A simple problem is obvious from the screenshots. DateTimePicker does not resize correctly, pay attention to how the drop-down button is cropped on the right side. UserControl is too weird to really identify the problem, but I think it is a datePanel. You are using Anchor.Right instead of Dock.Fill.

The tough problem is that the drop-down button changes dynamically by itself based on the amount of space available for rendering the DTP content. At least in Windows 7, earlier versions use a different rendering strategy. Unfortunately, VisualStyles api does not return the actual button size. The only decent way to handle this is to make sure the text box is large enough to cover the icon, so the down arrow is visible.

I can't do much with UserControl, I suggest a much simpler solution that comes only from the DateTimePicker class and inserts a TextBox into it. Also during operation it is much cheaper:

 using System; using System.Drawing; using System.Windows.Forms; using System.Windows.Forms.VisualStyles; using System.Runtime.InteropServices; class MyDateTimePicker : DateTimePicker { private TextBox editbox; private int buttonWidth; public MyDateTimePicker() { editbox = new TextBox(); editbox.BorderStyle = BorderStyle.None; editbox.BackColor = Color.Gold; // debugging this.Controls.Add(editbox); } public override Font Font { get { return base.Font; } set { base.Font = editbox.Font = value; } } protected override void OnResize(EventArgs e) { if (buttonWidth == 0) measureButtonWidth(); var margin = (this.ClientSize.Height - editbox.PreferredHeight) / 2; editbox.Location = new Point(margin, margin); editbox.Width = this.ClientSize.Width - margin - buttonWidth; base.OnResize(e); } private void measureButtonWidth() { if (!Application.RenderWithVisualStyles) buttonWidth = 21; // TODO: measure else { var renderer = new VisualStyleRenderer("DATEPICKER", 3, 1); using (var gr = CreateGraphics()) { buttonWidth = renderer.GetPartSize(gr, ThemeSizeType.True).Height; } } } protected override void Dispose(bool disposing) { if (disposing) editbox.Dispose(); base.Dispose(disposing); } } 

Overriding OnResize allows you to maintain the correct size of the TextBox. Add the code needed to handle the editbox.Text property. The only detail that was not taken care of was the size of the drop-down button when visual styles were disabled. Unusual these days, but still possible. Turn them off on your machine and adjust the hard size to fit the look.

Answer 2

I do not think that you will get a good result by superimposing DateTimePicker on the text box. There will always be changes in size and focus.

I would use one of the following options:

• Use a third-party control like DevExpress PopupContainerEdit . You can then view the standard Windows Forms MonthCalendar and customize the displayed text as needed. I am sure that similar controls are available from Telerik, etc.

• Use or configure a similar drop-down container control somewhere like a code project. There are at least two that you could use as inspiration:

  • Dropdownowncontainer
  • Create a custom dropdown

• You can even adapt the drop-down part of my color selection in the draft code

The last option, which will give you more flexibility, is the transition from Windows Forms to WPF. Creating custom controls like this is a lot easier (well after a steep learning curve anyway).