WPF 入門:テキストの表示 ~TextBlock~【初心者講座】

WPFアプリケーションの画面にテキストを表示する方法についてご紹介致します。
テキストを表示する方法はいくつかありますが、ここではTextBlockを使いたいと思います。

テキストの配置

プロジェクトを新規作成したら、自動で生成されるMainWindow.xamlを編集していきます。
ソリューションエクスプローラーの「MainWindow.xaml」をダブルクリックして、エディターに表示させます。
ツールボックスを展開して、「TextBlock」をウィンドウの中にドラッグ&ドロップで配置します。

Visual Studio WPFのツールボックス

「TextBlock」の文字がウィンドウに追加されます。
ウィンドウの中にTextBlockを配置すると、画面下のXAMLにも同時にコードが追加されます。

Visual Studio TextBlockの追加
<TextBlock HorizontalAlignment="Left" Margin="91,67,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

配置したTextBlockはドラッグ&ドロップで表示位置を自由に移動することができます。

テキスト内容の変更

次に配置したTextBlockのテキストを変更します。

「デザイン」ペインのTextBlockをダブルクリックしてください。
TextBlockのテキストが選択状態になります。

Visual Studio TextBlockのテキスト編集

この状態で文字を入力すると、TextBlockのテキストを編集することが可能です。
(下の画像は「Hello!」と入力)

Visual Studio TextBlockのテキストをHelloに変更

デザインを変更すると、XAMLも同時に変更され以下となります。

<TextBlock HorizontalAlignment="Left" Margin="91,67,0,0" TextWrapping="Wrap" Text="Hello!" VerticalAlignment="Top"/>

同様にXAMLでコードを変更しても即時にデザインも変更されます。
例えば

<TextBlock HorizontalAlignment="Left" Margin="91,67,0,0" TextWrapping="Wrap" Text="World!" VerticalAlignment="Top"/>

に変更すると以下のようになります。

Visual Studio TextBlockのテキストをWorldに変更

フォント変更

TextBlockを選択して、プロパティ > テキスト を開きます。
開いた中のフォントタブで以下の設定ができます。

  • フォントの種類
  • フォントサイズ
  • 太字
  • 斜体
  • アンダーライン
VIsual Studio TextBlockのプロパティ

今回は以下の設定に変更します。

  • フォントの種類:Yu Mincho
  • フォントサイズ:24 px
  • 太字:ON
  • 斜体:ON
  • アンダーライン:ON
VIsual Studio TextBlockのプロパティでフォント変更

テキスト色の変更

TextBlockを選択して、プロパティ > ブラシ を開きます。

Visual Studio TextBlockのForegroundプロパティ設定

「Foreground」を選択してカラーピッカーで色を選択すると、テキスト色の設定が可能です。

Visual Studio TextBlockのForegroundプロパティを変更

実行画面

実行すると以下のように、ウィンドウに「World!」の文字が表示されます。

TextBlock変更した時の実行画面

ソースコード MainWindow.xaml

<Window x:Class="TestWpf02.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestWpf02"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="91,67,0,0" TextWrapping="Wrap" Text="Wordl!" VerticalAlignment="Top" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline" FontSize="24" FontFamily="Yu Mincho" Foreground="#FFF12364"/>
    </Grid>
</Window>


TextBlockクラスの詳細については以下をご参照ください。

TextBlock クラス (System.Windows.Controls)
少量のフロー コンテンツを表示するライトウェイト コントロールを提供します。Provides a lightweight control for displaying small amounts of flow content.

コメント

タイトルとURLをコピーしました