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 を使用します。

以下を作成し、グリッドを次の各 ViewBox に貼り付ける場合

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

あなたは以下を得る