Windowsストアアプリケーションのデザインガイドラインに「パンの方向は一方向まで」というのがあります。
Windows8端末(特にタブレット)は横持ちがデフォルトです(Windowsボタンは横持ちにあわせた位置にあり、多くのアプリケーションが横にスワイプしてスクロールします)。
アプリケーションを設計する際に、画面に収まらない場合に横にスクロールするアプリが多いことが予想されます。その場合大量の文字データを処理する場合にWebビューやTextBlockなどで縦スクロールを表示させるのはNGとなります。
その場合に「一定の高さを超えたら、横に新しい段組みを作成して拡張するようなコントロール」がほしくなります。
RichTextColumnsコントロールがそれに該当します。
RitchTextColumnsコントロールを使うと自動で横に新しい段組みを作成して拡張してくれる。
プロジェクトを作成する際に「グリッドアプリケーション」を選ぶと自動でRitchTextColumnsのためのクラスなどを作成してくれます。CommonディレクトリにRitchTextColumn.csが追加されているのがわかると思います。
実際にRitchTextColumnsを使うサンプルコードは以下です(グリッドアプリケーションプロジェクトのItemDetailPage.xamlのコードを抜粋)。
<common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47"> <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False"> <Paragraph> <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/> <LineBreak/> <LineBreak/> <Run FontWeight="Normal" Text="{Binding Subtitle}"/> </Paragraph> <Paragraph LineStackingStrategy="MaxHeight"> <InlineUIContainer> <Image x:Name="image" MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}" AutomationProperties.Name="{Binding Title}"/> </InlineUIContainer> </Paragraph> <Paragraph> <Run FontWeight="SemiLight" Text="{Binding Content}"/> </Paragraph> </RichTextBlock> <!-- 追加の列は、このテンプレートから作成されます --> <common:RichTextColumns.ColumnTemplate> <DataTemplate> <RichTextBlockOverflow Width="560" Margin="80,0,0,0"> <RichTextBlockOverflow.RenderTransform> <TranslateTransform X="-1" Y="4"/> </RichTextBlockOverflow.RenderTransform> </RichTextBlockOverflow> </DataTemplate> </common:RichTextColumns.ColumnTemplate> </common:RichTextColumns>
前半はRitchTextBlockの記述ですが、後半で「RichTextBlockOverflow」を定義しています。
これが新しい段組みを作る時の指定です。
空のプロジェクトにRitchTextColumn.csを追加したい場合は、
追加→新しい項目→基本ページでページを追加すると追加されます。
ほかにもいろいろ便利なクラスが追加されるのでCommonディレクトリの中を見てみると良いと思います。
Please give us your valuable comment