LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nogino_sanebou(ノ木乃 サネボウ)

WinUI3 TextBlockを扱いたい

Posted at

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

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

TextBlockとは

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

基本定義

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

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

文字の大きさ

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

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

書体

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

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

太さ

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

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

文字スタイル

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

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

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

折り返し

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

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

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

文字の色

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

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

文字の横幅

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

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

選択可能なテキスト

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

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

選択テキストの背景色

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

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

テキスト内での細かな装飾

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

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

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

おわりに

現段階でTextBlockにていて学べた事は以上です。

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?