😎

AvaloniaUIのTextBlockのテキストの一部の色や装飾をコードから設定する

2024/03/30に公開

やりたいこと

AvaloniaUIのTextBlockはいろいろな機能を持っており、一部に色をつけたり画像を挿入したりできる。
https://docs.avaloniaui.net/docs/reference/controls/detailed-reference/textblock

上記の例ではこれをaxamlでおこなっているが、これをC#のコードから行いたい。

使用環境

Windows 11 : Home 22H2 + Visual Studio Community 2022(64bit)
Linuxテスト環境 : 上記Windows上のWSL2 Ubuntsu 22.04.2 LTS
Visual Studio2022, AvaloniaUI 11.0.2

テストに使っているaxmalはこれ。TextBlockの定義のみを行い、ここにC#のコードからTextを追加する。

axaml
<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="400"
             x:Class="TestApp.Views.TextBlockExample">
	<TextBlock Name="TextBlock1" />	
</UserControl>

テキストに色や装飾を付ける


TextBlock.InlinesにRunを追加していく。Runごとに色を指定できる。
Boldで表記する場合はBoldをTextBlock.Inlinesに追加し、Bold.InlinesにRunを追加する。(分かりにくい。。。)Underlineも同じやり方。なんかItalicはできなかった。よくわからない。

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Documents;
using Avalonia.Markup.Xaml.Converters;
using Avalonia.Media;
using Avalonia.Media.Imaging;
using Avalonia.Platform;
using DynamicData;
using Svg;
using System;
using System.ComponentModel;
using System.Globalization;
using static System.Net.Mime.MediaTypeNames;

namespace AjkAvaloniaLibs.Views
{
    public partial class TextBlockExample : UserControl
    {
        public TextBlockExample()
        {
            InitializeComponent();

            {
                Run run = new Run("TextBlock Example\n");
                TextBlock1.Inlines.Add(run);
            }
            {
                Run run = new Run("Colored Text\n");
                run.Foreground = new SolidColorBrush(Avalonia.Media.Colors.Red);
                run.Background = new SolidColorBrush(Avalonia.Media.Color.FromRgb(200, 200, 200));
                TextBlock1.Inlines.Add(run);
            }
            {
                Run run = new Run("Bold Text\n");
                Bold bold = new Bold();
                bold.Inlines.Add(run);
                TextBlock1.Inlines.Add(bold);
            }
            {
                Run run = new Run("Underline Text\n");
                Underline underline = new Underline();
                underline.Inlines.Add(run);
                TextBlock1.Inlines.Add(underline);
            }
            {
                Run run = new Run("Italic Text?\n");
                Italic italic = new Italic();
                italic.Inlines.Add(run);
                TextBlock1.Inlines.Add(italic);
            }
        }
    }
}

イメージやボタンの挿入

公式ドキュメントにある例をコードで生成。

avaloniaマークはassetのicoから表示。ほかのマークはすべて絵文字。手のマークの箇所はボタンになっている。

TextBlock.InlinesにInlineUIContainerを追加する。InlineUIContainerのChildにイメージやボタンを指定する。

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Documents;
using Avalonia.Markup.Xaml.Converters;
using Avalonia.Media;
using Avalonia.Media.Imaging;
using Avalonia.Platform;
using Svg;
using System;
using System.ComponentModel;
using System.Globalization;
using static System.Net.Mime.MediaTypeNames;

namespace TestApp.Views
{
    public partial class TextBlockExample : UserControl
    {
        public TextBlockExample()
        {
            InitializeComponent();

            TextBlock1.ClipToBounds = false;
            TextBlock1.FontSize = 32.0;
            TextBlock1.TextWrapping = TextWrapping.Wrap;
            
            TextBlock1.Inlines.Add("\ud83d\ude80 This ");

            {
                Span span = new Span();
                span.BaselineAlignment = BaselineAlignment.TextTop;
                span.Inlines.Add("example");
                TextBlock1.Inlines.Add(span);
            }

            TextBlock1.Inlines.Add(" shows the ");

            {
                Bold bold = new Bold();
                bold.Inlines.Add("power");
                TextBlock1.Inlines.Add(bold);
            }

            TextBlock1.Inlines.Add(" of ");

            {
               Avalonia.Controls.Image image = new Avalonia.Controls.Image();
                image.Source = new Bitmap(AssetLoader.Open(new Uri("avares://TestApp/Assets/avalonia-logo.ico")));
                image.Width = 32.0;
                image.Height = 32.0;
                image.VerticalAlignment = Avalonia.Layout.VerticalAlignment.Top;

                InlineUIContainer inlineUIContainer = new InlineUIContainer();
                inlineUIContainer.BaselineAlignment = BaselineAlignment.Baseline;
                inlineUIContainer.Child = image;

                TextBlock1.Inlines.Add(inlineUIContainer);
            }

            TextBlock1.Inlines.Add(" in creating rich text displays with ");

            {
                TextBlock textBlock = new TextBlock();
                textBlock.ClipToBounds = false;
                textBlock.FontSize = 24.0;
                textBlock.Text = "\ud83d\udc4d\ud83d\udc4d\ud83c\udffc\ud83d\udc4d\ud83c\udffd\ud83d\udc4d\ud83c\udffe\ud83d\udc4d\ud83c\udfff";

                Button button = new Button();
                button.Padding = new Thickness(0.0, 8.0, 0.0, 0.0);
                button.Content = textBlock;

                InlineUIContainer inlineUIContainer = new InlineUIContainer();
                inlineUIContainer.Child = button;
                TextBlock1.Inlines.Add(inlineUIContainer);
            }

            TextBlock1.Inlines.Add(" inline controls \ud83d\udcc8");

        }
    }
}

Discussion