How to style "form" field labels in Windows Phone 7?
- by Jeremy Bell
Is there any standards guidance on how to style field labels next to form fields in windows phone 7 silverlight applications?
For example, let's say I have a StackPanel with the TextBlock label and a TextBox for data entry. Currently I am using the default TextBlock Margin included in the PhoneTextSubtleStyle ("12,0,12,0"), and using a Margin of "0,-12,0,0" to push the TextBox up closer to the label:
<StackPanel HorizontalAlignment="Left">
<TextBlock VerticalAlignment="Center" Text="Name" Style="{StaticResource PhoneTextSubtleStyle}" />
<TextBox Text="{Binding ItemName, Mode=TwoWay}" TextChanged="TextBox_TextChanged" VerticalAlignment="Center" Width="433" Margin="0,-12,0,0" />
</StackPanel>
Note that the TextBox seems to have some internal padding of 12 pixels to the left and right, so that the TextBlock label and the TextBox control visually line up perfectly on the left.
The problem is, I see existing apps with widely varying conventions for field label styling. Some do not do the negative margin adjustment, like I have above. Some don't. Some appear to override the label TextBlock Margin so that it is indented an additional 12 pixels on the left (i.e. "24,0,12,0" instead of the default "12,0,12,0"). Some apps put the labels to the left of the fields themselves (I hate that).
Is there some standard design guidance on field labels in Windows Phone 7? I read through the design template PDF and could only determine that the field labels should be upper case on the first word (preferably only one word labels), and should NOT have a colon at the end. I didn't see anything with regards to margins or alignment between the label and the field.
