How to do superscript in WP XAML? - silverlight

Question

Here is the usercontrol which is used in my WP8 app. It displays current time. The fontsize is specified by the screen which uses this control. I want AM to be on top but with inline with the text.
Here is my XAML code for control. Also note that Typography.Variants is not supported in WP8
<TextBlock Text="{Binding BindingHour}" FontWeight="Bold" Name="txtHour"
Grid.Row="0" Grid.Column="0"
FontSize="{Binding BindingHourFontSize}" />
<TextBlock Text=":" FontWeight="ExtraLight"
Grid.Row="0" Grid.Column="1"
FontSize="{Binding BindingColonFontSize}" />
<TextBlock Text="{Binding BindingMinute}" FontWeight="Thin"
Grid.Row="0" Grid.Column="2"
FontSize="{Binding BindingMinuteFontSize}"/>
<TextBlock Text="{Binding BindingAmPm}" FontWeight="SemiBold" Grid.Row="0" Grid.Column="3" />
<TextBlock Grid.Row="1" HorizontalAlignment="Center" FontWeight="SemiBold"
Text="{Binding BindingFreeText}" Grid.ColumnSpan="5"/>
Here is how it looks on the screen where i use above control.
Here is how i want it to look but not able to do it in XAML. Also, superscript and subscript is not supported in WP XAML. odd.

Answer 1

Well, it appears that you can do it the same way it is done via WPF, through the Typography.Variants attached property.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.documents.typography.variants(v=vs.105).aspx
which allows you to specify superscript/subscript variants of the font. However, that's not really what you want. Your AM/PM appears vertically aligned within the grid control. If it appears too high relative to neighboring characters, simply push it down via its Margin.
Here is an example of the layout
<Grid
Width="auto"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
FontSize="80"
Text="09"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontSize="50"
Text=":"/>
<TextBlock
Grid.Column="2"
Grid.Row="0"
FontSize="80"
Text="11"/>
<TextBlock
Margin="0 20 0 0"
Grid.Column="3"
Grid.Row="0"
FontSize="20"
Text="AM"/>
</Grid>
And a snapshot of how it looks
To keep relative positions the same while stretching/compressing to fill existing space, use ViewBoxes.
If you create the following, and paste the grid into each of the following ViewBoxes
<Grid
Width="auto"
Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Viewbox Grid.ColumnSpan="2"></Viewbox>
<Viewbox Grid.Row="1"></Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1"></Viewbox>
</Grid>
you get the following