😎
AvaloniaUIのTextBlockのテキストの一部の色や装飾をコードから設定する
やりたいこと
AvaloniaUIの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