MetroStyleApp入門 vol57.RichTextColumnsコントロール

月曜日 , 3, 9月 2012 Leave a comment

 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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です