silverlight - 如何在 WP XAML 中做上标？

Question

这是在我的 WP8 应用程序中使用的用户控件。它显示当前时间。字体大小由使用此控件的屏幕指定。我希望 AM 位于顶部，但与文本内联。

这是我用于控制的 XAML 代码。另请注意，WP8 不支持 Typography.Variants

<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"/>

这是它在我使用上述控件的屏幕上的外观。

这是我希望它看起来但不能在 XAML 中实现的方式。此外，WP XAML 不支持上标和下标。奇怪的。

Answer 1

好吧，您似乎可以通过Typography.Variants附加属性通过 WPF 完成此操作。

http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.documents.typography.variants(v=vs.105).aspx

它允许您指定字体的上标/下标变体。然而，这并不是你真正想要的。您的 AM/PM 在网格控件中显示为垂直对齐。如果它相对于相邻字符显得太高，只需通过其边距将其向下推。

这是布局的示例

<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>

以及它的外观快照

要在拉伸/压缩以填充现有空间时保持相对位置相同，请使用 ViewBoxes。

如果您创建以下内容，并将网格粘贴到以下每个 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>

你得到以下