Basic Library for UWP
手順2:アプリケーションへの C1WrapPanel の追加
Basic Library for UWP > Layout Panels for UWP > クイックスタート > WrapPanel クイックスタート > 手順2:アプリケーションへの C1WrapPanel の追加

シンプルな HyperlinkButtons ボタンを使用して、コンテンツを垂直または水平方向に折り返す方法について説明します。これは Web アプリケーションで頻繁に使用される TagCloud ビューを作成する一般的なシナリオです。

次の手順に従います。

  1. 最初に、プロジェクトから Grid タグを取り除きます。
  2. C1WrapPanelコントロールをページにドラッグ&ドロップします。これにより、パネルと参照がページに追加されます。
  3. <Xaml:C1WrapPanel> タグを編集し、HyperlinkButtons を追加します。マークアップは次のようになります。
    マークアップ
    コードのコピー
    <Xaml:C1WrapPanel>
                <HyperlinkButton Content="サンプルテキスト" FontSize="25" />
                <HyperlinkButton Content="テキストを折り返すための長い文字列" />
                <HyperlinkButton Content="改行を追加しましょう" />
                <HyperlinkButton Xaml:C1WrapPanel.BreakLine="After" Content="後ろに改行を追加します" />
                <HyperlinkButton Content="C1WrapPanel" />
                <HyperlinkButton Content="垂直方向の折り返し" />
                <HyperlinkButton Content="水平方向の折り返し" FontSize="20"  />
                <HyperlinkButton Xaml:C1WrapPanel.BreakLine="Before" Content="Break Before" />
                <HyperlinkButton Content="コントロール" FontSize="8" />
                <HyperlinkButton Content="UWP" />
                <HyperlinkButton Content="コンポーネント" FontSize="18" />
                <HyperlinkButton Xaml:C1WrapPanel.BreakLine="AfterAndBefore" Content="前後に改行を追加します" />
                <HyperlinkButton Content="垂直または水平方向にコンテンツを折り返すフローレイアウト" />
                <HyperlinkButton Content="小さいフォントは推奨しません" FontSize="6" />
                <HyperlinkButton Content="終了です" FontSize="24" />
        </Xaml:C1WrapPanel>

次の手順では、このアプリケーションを実行します。

関連トピック