Preventing MaskedTextBox from going vertical

My MaskedTextBox is displaying its content vertically rather than horizontally. How can I prevent that?

The MaskedTextBox allows user to enter a time of day (hour, minute, seconds) as a string in the format 00:00:00.

    <ms:MaskedTextBox x:Name="TimeOfDay"
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="4,2"
                        Mask="00:00:00"
                        AutoSkipLiterals="True"
                        Text="{Binding Path=ToD}" />

The RowDefinition the MaskedTextBox is in has a Height of "Auto" (although setting it to specific values does not change the behavior) and the ColumnDefinition's width is set to "*".

When the window is displayed, the MaskedTextBox looks like this:

_
_
:
_
_
:
_
_

although you can only see one line of it at a time in the cell.

I would have expected it to look like this:

__:__:__

BTW, I use the same declaration for a MaskedTextBox in the DataTemplate for a custom TypeEditor for my WPF Elements PropertyGrid control. It looks and works just fine there.

How can I get the MaskedTextBox to display horizontally?

Thanks in advance,

BillBR

For some reason the example of how the text actually looks does not appear as I entered it in my original post. It should show each character on a separate line, not all in a row on a single line. (This RichText editor appears to be stripping out my CRLF characters if the line contains only underscores or colons.)

On further investigation, this seems to be happening only when the MaskedTextBox is used in the item template for my ListBox. I've pulled together a quick sample to show the problem (attached). The MaskedTextBox, when it is free-standing in the main grid it appears correctly. But when it is used in the DataTemplate for the ListBox's ItemTemplate, it exhibits the problem. Setting the height of the row or the control itself (the commented lines in the xaml) has no effect. Nor does it matter if the DataTemplate's grid is in a StackPanel or not.

Any ideas?

Hello BillBR

This is a very unusual issue. My only guess is that there could be a bug in the WPF RichTextBox when calculating the PageWidth of the Document. In the next nightly build of version 6.0 there will be an IsTextWrappingEnabled property on MaskedTextBox. Setting this to false will force the RichTextBox to not wrap the text and solve the issue in your scenario.

Jason Fauchelle

Thanks Jason! That helped get rid of the issue of the text appearing vertical.

However, there's another issue now. When the textbox displays in the column with width="*", the textbox is not as wide as the text it contains. That means the user has to scroll the content to see all of it. I've attached a screen shot (TextWidthIssue.JPG12) of the problem using the example code I sent before (with the IsTextWrappingEnabled="False" line added, of course). In the first ListBoxItem, the text of the MaskedTextBox (next to Label 2) abuts the right border of the containing textbox (very different than the same text as it appears in the standard textbox next to Label 1 above it). In the second ListBoxItem, the cursor has been place in the MaskedTextBox's text and moved to the end of it. Note that there is additional space to the right of the cursor and that the beginning of the left side of the text is now truncated (again unlike in the standard textbox above it). Apparently the MaskedTextBox is not reporting the desired width correctly during layout.

If I comment out the standard TextBox in the first row from the item template, the issue is even more pronounced (see TextWidthIssue2.JPG12). In that case, the MaskedTextBox has only a minimal width -- enough to show a single character.

Hello BillBR

Unfortunately this is another issue in WPF. The RichTextBox control at the core of the MaskedTextBox does not calculate it's size in the same way that a standard TextBox does. It simply uses whatever space is available to it to render. When in an auto column, it just calculates a minimum width. When the TextBox is present, the width of the Grid column is determined by the TextBox, and the RichTextBox uses that.

One option which works well with your code sample is to set the Padding of the MaskedTextBox to 0,4,0,0. This causes the text within the MaskedTextBox to line up with the text in the standard TextBox which solves the issue with the extra space. The only other option is to set the MinWidth or Width property of the MaskedTextBox to force its size.

Jason Fauchelle

Thanks for the suggestion, Jason.

Unfortunately, setting the Padding on the MaskedTextBox to 0,4,0,0 (or any other value) seems to have no effect on the alignment of the text. However, setting the Padding on the standard TextBox to 4,0,0,0 did move it's text to align with the text in the MaskedTextBox.

In any case, thanks for looking into this for us.

BillBR

Hello BillBR

This would be because the generic MaskedTextBox style did not support the Padding property. This has been resolved for the next nightly build - just in case you ever need to adjust the Padding.

Jason Fauchelle

Thanks again, Jason. With the most recent nightly build, the MaskedTextBox does now respond to the Padding attribute.

Unfortunately, it doesn't resolve the issue. When I set Padding="0,0,4,0", all it does is provide some space on the right side of the textbox, but that means the right side of the contained text is eclipsed by that same space (see the attached screenshot in TextWidthIssue3.JPG). The text still requires scrolling to see it all.

BillBR

Hello BillBR

The padding of 4 should be on the top, not the right, this is for pushing the text inside the MaskedTextBox down so that it lines up with the text of the Label. In any case, it looks like the padding in your setup is different to mine. This is not a problem, simply set the padding on one or both of the text controls in order for the text to line up, and to prevent the scrolling on the MaskedTextBox. Looks like a Padding of 3 on the left of the TextBox and a padding of 2 on the top of both controls should do the trick.

Jason Fauchelle

Hi Jason,

You're correct that adding the padding to the top of the MaskedTextBox (Padding=0,4,0,0) does align it's text with the Label. But that wasn't really the main issue. The problem was that the MaskedTextBox was not sizing itself properly so that all of its text appears within its border without the need to scroll. The new Padding property did not fix that (in fact it made it worse if you applied it to the sides).

The workaround of adding padding to at least one other TextBox in the column so that it forces the column wide enough for the MaskedTextBox to display correctly is a kludge at best. In this case it worked OK, but what about the cases when a) the MaskedTextBox could have widely differing sizes depending on its content or b) the column has no other control to use for sizing? For a), you're pretty much stuck with the problem. For b), you could specify a MinWidth, but as soon as the control requires more than that width, the MaskedTextBox exhibits the problem again.

For these reasons, the MaskedTextBox is just not the right choice.

This might be a tough one for you guys to correct, but you've done some great fixes in the past. And hey, there's nothing like a challenge to get the creative juices going!

Thanks,

BillBR

Hello BillBR

I'll look at implementing a better auto sizing calculation to override the RichTextBox behavior soon.

Jason Fauchelle

Hello BillBR

The MaskedTextBox will properly measure itself in the next nightly build. You'll still want to play around with the padding to line up the text in the MaskedTextBox and standard TextBox, but now the MaskedTextBox will be sized based on its content - so there won't be a scrolling issue any more.

Jason Fauchelle

Hi Jason,

You guys are really trying to nail this one! I appreciate that, but the nightly build for July 9th didn't seem to fix the problem. The MaskedTextBox still sizes to the width of the TextBox in the same column, so it's not sizing based on its own content.

That's confirmed if I delete characters from the TextBox; the TextBox narrows with each deletion and the MaskedTextBox also narrows despite having content that's wider and not changing. The same thing is true if I comment out the TextBox and leave only the MaskedTextBox in that column; despite content that's 8 letters long, the MaskedTextBox is only wide enough to show ~1.5 characters at a time.

BillBR

Hello BillBR

It's working fine at my end based on the original code example you sent me, as long as IsTextWrappingEnabled is set to False.

I have made a small change for the only thing I can think of why it might not be working for you. This tweak will be available in the next nightly build. If it still doesn't work, you might need to send me a new set of sample code in case your setup is changed.

Jason Fauchelle

Thanks for trying another tweak at the code. I'll be out of the office for awhile so won't have an opportunity to download the nightly to check if it worked until the end of next week. In the meantime, I've attached the code that demonstrates the problem.

Built as-is, the both text boxes in the DataTemplate for the list look fine at first. But if you remove characters from the TextBox, both controls re-size to match the width of the TextBox.

If you comment out the TextBox in the DataTemplate and uncomment the version right below it that doesn't have the padding, you can see the problem as well. Aside from the (expected) misalignment of the texts, the size of both is determined once again by the size of the TextBox. The MaskedTextBox should require more width and so should control the width of the column (and the TextBox should widen itself to match), but that's not what happens.

Finally, if you comment out the TextBox entirely, you'll see that the text of the MaskedTextBox has no effect on the width of the control. It sizes itself to show only a little more than a single character.

Hopefully this will help you figure out what's happening.

Thanks again for your efforts to get this fixed,

BillBR

Hello BillBR

I've resolved a bug in the auto MaskedTextBox sizing that was preventing the size to be recalculated at the right time. This will all work correctly in the next nightly build.

Jason Fauchelle

Thanks for sticking with this, Jason.

The nightly build fixed the problem. Hurrah! I still have to adjust the padding on the standard TextBox (to "3,0", not "4,0"), but having the MaskedTextBox resize itself properly makes all the difference.

Thanks again,

BillBR