Basic Library for UWP
C1WrapPanel で項目を垂直方向に折り返す
Basic Library for UWP > Layout Panels for UWP > タスク別ヘルプ > C1WrapPanel で項目を垂直方向に折り返す

デフォルトでは、項目は水平方向に折り返されます。ただし、垂直方向に折り返すこともできます。垂直方向の折り返しを指定するには、Orientation プロパティを設定します。この例では、HyperlinkButtons を使用します。次の手順に従います。

  1. プロジェクトで、ツールボックスから C1WrapPanel コントロールをドラッグし、.xaml ページの </Grid> 終了タグの前に置きます。
  2. <Xaml:C1WrapPanel> タグで、Orientation プロパティを Vertical に設定します。XAML は次のようになります。
    マークアップ
    コードのコピー
    <Xaml:C1WrapPanel Orientation="Vertical">
  3. <Xaml:C1WrapPanel> タグの間にカーソルを置き、[Enter]キーを押します。
  4. 次の XAML を追加して HyperlinkButtons を折り返します。
    マークアップ
    コードのコピー
    <Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Orange">
        <HyperlinkButton Foreground="White" Content="サンプルテキスト" FontSize="25" />
    </Border>
    <Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Green" Xaml:C1WrapPanel.BreakLine="After">
        <HyperlinkButton Foreground="White" Content="後ろに改行を追加します" />
    </Border>
    <Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Blue">
        <HyperlinkButton Foreground="White" Content="C1WrapPanel" FontSize="16"/>
    </Border>
    <Border Margin="2" BorderBrush="Black" BorderThickness="2" Background="Red">
        <HyperlinkButton Foreground="White" Content="垂直方向に折り返し" />
    </Border>
    <Border Margin="2" BorderBrush="Black" BorderThickness="2"  Background="Purple">
        <HyperlinkButton Foreground="White" Content="UWP" FontSize="20"/>
    </Border>
  5. プロジェクトを実行します。C1WrapPanel は、次の図のようになります。    
関連トピック