眠るシーラカンスと水底のプログラマー

　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ディレクトリの中を見てみると良いと思います。

Tweet