Monday, August 10, 2015

How to center the hint in a WP8 Toolkit PhoneTextBox


Problem:
I'm using a WP8 toolkit PhoneTextBox control. I'd like the hint to be set top and left. The following code should work but it is like the HintCustom Style is begin ignored!

<toolkit:PhoneTextBox Name="textLongUrl" TextWrapping="Wrap" InputScope="Url" Height="150" MaxLength="250" DisplayedMaxLength="250" LengthIndicatorVisible="True" FontSize="20" Hint="Type or paste URL" HintStyle="{StaticResource HintCustomStyle}" ActionIcon="Assets\Images\icon-button-32.png" ActionIconTapped="textLongUrl_ActionIconTapped" KeyDown="textLongUrl_KeyDown" />


And here's the hint style I'm using:
<Style TargetType="ContentControl" x:Key="HintCustomStyle">
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="FontSize" Value="36"/>
</Style>


Solution:

The issue is the toolkit itself.  The PhoneTextBox is predefined and that is what needs to overridden.  The Hint style I had created was being overridded each time the screen loaded by the PhoneTextBox.
This means that I needed to override the PhoneTextBox itself.

Do the following:

Open the project in blend and Right click on the PhoneTextBox and select Style > Edit a copy to edit the template. Find the Border named "HintBorder" and expand it to see "HintContent" and "ContentElement" ContentControls. "HintBorder" is the one you want. Select it and from the property panel set the HorizontalAlignment to Left and VerticalAlignment to Top, that should do it. Your Hint Text is vertically aligned to the top and left adjusted. I also added some Fontsize specifics for my app.




Source:
http://stackoverflow.com/questions/20778159/how-to-center-the-hint-in-a-wp8-toolkit-phonetextbox

No comments:

Post a Comment