WinUI3 TextBlockを扱いたい


:::note info
WinUI3のTextBlockについて学んだ事をアウトプットしていきたいと思います。

何か追加情報があれば都度記事を更新していこうと思います。
:::

## TextBlockとは
編集できない文字を出力します。
そのため、`TextBlock`で設定するものは主に表示テキスト関連の設定になります。

## 基本定義
`Text`属性に値を設定することで、これが画面に出力されます。

```xml:MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical">
        <TextBlock Text="紫咲シオン" />
    </StackPanel>
</Window>
```

![2025.2.23-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/9262a20d-f926-4a19-a26b-099a28a08fe5.jpeg)

## 文字の大きさ
`FontSize`属性に値を設定することで文字の大きさを変更できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical">
        <TextBlock Text="紫咲シオン" FontSize="32" />
    </StackPanel>
</Window>
```

![2025.2.23-02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/7fa05b2a-94dd-4d9d-9e81-b0c662de553b.jpeg)

## 書体
`FontFamily`属性に値を設定することで書体を設定できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" FontFamily="Utatane" FontSize="32" />
    </StackPanel>
</Window>
```

![2025.2.23-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/526a6563-7a3a-4c06-8b65-9d78c0973b3f.jpeg)

## 太さ
`FontWeight`属性に値を設定することで文字の太さを設定できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" FontWeight="Thin" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontWeight="Light" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontWeight="Normal" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontWeight="Bold" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontWeight="ExtraBold" FontSize="32" />
    </StackPanel>
</Window>
```

![2025.2.23-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/2e04b4d2-e564-4271-9129-e8719ea22bc6.jpeg)

## 文字スタイル
`FontStyle`属性に値を設定することで文字スタイルを設定できます。

斜体を表現する値として`Italic`と`Oblique`が提供されています。
ここは使用するフォントによって表示に差がでてくるのではないかと思います。

```xml:MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" FontStyle="Normal" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontStyle="Italic" FontSize="32" />
        <TextBlock Text="紫咲シオン" FontStyle="Oblique" FontSize="32" />
    </StackPanel>
</Window>
```

![2025.2.23-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/3286ad26-da91-40e3-86b3-e43670a670bc.jpeg)

## 折り返し
`TextWrapping`属性を使用することで文字の折り返し設定ができます。

値ととして`NoWrap`、`Wrap`、`WrapWholeWords`がありますが、
現時点で`Wrap`と`WrapWholeWords`の違いがよくわかりませんでした。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="MAGE OF VIOLET - MURASAKI SHION" 
                   TextWrapping="NoWrap" FontSize="32" />
        <TextBlock Text="MAGE OF VIOLET - MURASAKI SHION" 
                   TextWrapping="Wrap" FontSize="32" />
        <TextBlock Text="MAGE OF VIOLET - MURASAKI SHION" 
                   TextWrapping="WrapWholeWords" FontSize="32" />
    </StackPanel>
</Window>
```
![2025.2.23-06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/d3ff0a00-15fd-4cc3-a7ad-b96c8db29366.jpeg)

## 文字の色
`Foreground`属性の値を設定することで文字の色を設定できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" Foreground="Violet" FontSize="32" />
    </StackPanel>
</Window>
```
![2025.2.23-07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/2362e1f0-7de4-4dc6-9fc0-c2819f8ce4ac.jpeg)

## 文字の横幅
`CharacterSpacing`属性に値を設定することで文字の横幅を設定できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" Foreground="Violet" FontSize="32" />
        <TextBlock Text="紫咲シオン" CharacterSpacing="300"  
                   Foreground="Violet" FontSize="32" />
    </StackPanel>
</Window>
```
![2025.2.23-08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/5399e20f-1aae-4d60-90a0-ca59eee8a439.jpeg)


## 選択可能なテキスト
通常、`TextBlock`では文字列を選択できませんが、`IsTextSelectionEnabled`属性を`True`にすることでテキストを選択できるようになります。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" IsTextSelectionEnabled="True" 
                   Foreground="Violet" FontSize="32" />
    </StackPanel>
</Window>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/4c67c618-64db-4dba-a29d-ba0e5289e863.png)

## 選択テキストの背景色
`TextBlock`では`SelectionHighlightColor`を使用することで選択されたテキストの背景色を設定できます。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock Text="紫咲シオン" IsTextSelectionEnabled="True" 
                   SelectionHighlightColor="Aqua" Foreground="Violet" FontSize="32" />
    </StackPanel>
</Window>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/3ae4998e-ca65-4307-a864-8c4a1236394c.png)

## テキスト内での細かな装飾
`TextBlock`要素内に特定の要素を子供にすることで`TextBlock`内のテキストを個々に装飾することが可能です。

ここでは私が分かった分の要素を挙げます。
他にもあるかもしれませんので、何かわかったら更新しようと思います。

```xml: MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="TextBlock.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TextBlock">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center">
        <TextBlock TextWrapping="Wrap">
            <Span FontFamily="Utatane" FontSize="24">紫咲シオン</Span>
            <LineBreak />
            <LineBreak />
            <Span FontSize="16">
            魔界学校に出没する子供…ではなく本人曰く大人（らしい）。
            <LineBreak />
            自称<Underline>名門の出身</Underline>で<Bold>黒魔術</Bold>を得意としている（らしい）
            あまり「<Italic>こんしお</Italic>」とは言わない。
            </Span>
        </TextBlock>
    </StackPanel>
</Window>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3976537/031aaa70-1154-4646-a761-5dcf81215e4b.png)


## おわりに
現段階で`TextBlock`にていて学べた事は以上です。

プレーンなテキストを表示するだけあって設定項目は少なかったですが、どうやらテキストにエフェクトも付けられるようです。

このエフェクトは結構ボリュームがありそうな予感がしていますので、別な記事にしようかと思います。