背景
Avalonia には現在、ログ出力表示用のリッチテキストボックスがありませんが、代わりに SelectableTextBlock コントロールを使用できます。これはサイト運営者が実装したログコンポーネントの例です：
ログの日時、ログレベル、ログ詳細などを表示できます。バックグラウンドでは画面出力に加えてテキストファイルへの永続化出力も可能です。さらなるログ情報表示は自由に拡張してください。以下では実装プロセスを説明し、既存の問題を指摘します。PR をお待ちしています。
使用方法
インストール：
NuGet\Install-Package CodeWF.LogViewer.Avalonia -Version 1.0.10.2
ビューでの使用：
xmlns:log="https://codewf.com"
<log:LogView />
ログ出力：
Logger.Debug("デバッグログ");
Logger.Info("情報ログ");
Logger.Warn("警告ログ");
Logger.Error("エラーログ");
Logger.Fatal("致命的ログ");
実装
ここでは主要部分のみ説明します。詳細なコードは CodeWF.LogViewer リポジトリをご覧ください。
プログラムは Logger クラスを使用してログを出力します。このクラスはログ情報を ConcurrentQueue<LogInfo> Logs コレクションにキャッシュします。Logger クラスの定義は以下の通りです：
public static class Logger
{
public static LogType Level = LogType.Info;
public static string LogDir = AppDomain.CurrentDomain.BaseDirectory;
internal static readonly ConcurrentQueue<LogInfo> Logs = new();
public static void RecordToFile()
{
Task.Run(async () =>
{
while (true)
{
while (TryDequeue(out var log))
{
var content =
$"{log.RecordTime}: {log.Level.Description()} {log.Description}{Environment.NewLine}";
AddLogToFile(content);
}
await Task.Delay(TimeSpan.FromMilliseconds(100));
}
});
}
public static bool TryDequeue(out LogInfo info)
{
return Logs.TryDequeue(out info);
}
public static void Log(int type, string content)
{
var logType = (LogType)type;
if (Level > logType) return;
Logs.Enqueue(new LogInfo(logType, content));
}
public static void Debug(string content)
{
if (Level <= LogType.Debug)
{
Logs.Enqueue(new LogInfo(LogType.Debug, content));
}
}
public static void Info(string content)
{
if (Level <= LogType.Info)
{
Logs.Enqueue(new LogInfo(LogType.Info, content));
}
}
public static void Warn(string content)
{
if (Level <= LogType.Warn)
{
Logs.Enqueue(new LogInfo(LogType.Warn, content));
}
}
public static void Error(string content, Exception? ex = null)
{
if (Level > LogType.Error) return;
var msg = ex == null ? content : $"{content}\r\n{ex.ToString()}";
Logs.Enqueue(new LogInfo(LogType.Error, msg));
}
public static void Fatal(string content, Exception? ex = null)
{
if (Level > LogType.Fatal) return;
var msg = ex == null ? content : $"{content}\r\n{ex.ToString()}";
Logs.Enqueue(new LogInfo(LogType.Fatal, msg));
}
public static void AddLogToFile(string msg)
{
try
{
var logFolder = System.IO.Path.Combine(LogDir, "Log");
if (!Directory.Exists(logFolder))
{
Directory.CreateDirectory(logFolder);
}
var logFileName = System.IO.Path.Combine(logFolder, $"Log_{DateTime.Now:yyyy_MM_dd}.log");
File.AppendAllText(logFileName, msg);
}
catch
{
// 無視
}
}
}
ログをテキストファイルのみに出力する
ログをテキストファイルのみ出力し、画面には出力しない場合は、Logger.RecordToFile() メソッドを明示的に呼び出して定期的にログ出力をチェックする必要があります。
ログをテキストファイルとビューの両方に出力する
前提：ここでは Logger.RecordToFile() メソッドを呼び出す必要はありません
まずビュー LogView.axaml を見てみましょう。この部分では ScrollViewer で SelectableTextBlock をラップし、ログのスクロール表示とテキストの選択・コピーを可能にしています：
<ScrollViewer
x:Name="LogScrollViewer"
HorizontalScrollBarVisibility="Auto"
PointerPressed="LogScrollViewer_OnPointerPressed"
VerticalScrollBarVisibility="Auto">
<SelectableTextBlock
x:Name="LogTextView"
TextAlignment="Start"
TextWrapping="Wrap">
<SelectableTextBlock.ContextMenu>
<ContextMenu x:Name="LogContextMenu">
<MenuItem Click="Copy_OnClick" Header="コピー" />
<MenuItem Click="Clear_OnClick" Header="クリア" />
<MenuItem Click="Location_OnClick" Header="ログを確認" />
</ContextMenu>
</SelectableTextBlock.ContextMenu>
</SelectableTextBlock>
</ScrollViewer>
LogView.axaml.cs 内で RecordLog() メソッドを呼び出し、定期的にキャッシュされたログを読み取り、LogNotifyHandler メソッドで画面に書き込み、Logger.AddLogToFile メソッドでテキストファイルに書き込みます。コード量は少なく、以下が核心部分です：
partial class LogView : UserControl
{
// ...
private void RecordLog()
{
if (_isRecording) return;
_isRecording = true;
Task.Run(async () =>
{
while (true)
{
while (Logger.TryDequeue(out var log)) LogNotifyHandler(log);
await Task.Delay(TimeSpan.FromMilliseconds(100));
}
});
}
private void LogNotifyHandler(LogInfo logInfo)
{
if (Logger.Level > logInfo.Level) return;
_synchronizationContext.Post(o =>
{
var inlines = _textView.Inlines;
try
{
if (inlines?.Count > MaxCount)
{
for (var i = 0; i < 3; i++)
{
var needRemoveElement = inlines.First();
if (needRemoveElement != null)
{
inlines.Remove(needRemoveElement);
}
}
}
var start = _textView.Text.Length;
inlines?.Add(
new Run($"{logInfo.RecordTime}")
{
Foreground = new SolidColorBrush(Color.Parse("#8C8C8C")),
BaselineAlignment = BaselineAlignment.Center
});
inlines?.Add(GetLevelInline(logInfo.Level));
inlines?.Add(new Run(logInfo.Description)
{
Foreground = new SolidColorBrush(Color.Parse("#262626")),
BaselineAlignment = BaselineAlignment.Center
});
inlines?.Add(new Run(Environment.NewLine));
Logger.AddLogToFile(
$"{logInfo.RecordTime}: {logInfo.Level.Description()} {logInfo.Description}{Environment.NewLine}");
_textView.SelectionStart = start;
_textView.SelectionEnd = _textView.Text.Length;
_scrollViewer.ScrollToEnd();
}
catch
{
// 無視
}
}, null);
}
private Span GetLevelInline(LogType level)
{
var content = level.Description();
// コピー用に幅ゼロの透明テキストを作成
// TODO：コピー時に位置ずれの問題あり
var zeroWidthText = new Run($"【{content}】")
{
Foreground = Brushes.Transparent, FontSize = 0.001
};
// 視覚表示用のテキスト（コピー不可）
var border = new Border
{
BorderBrush = GetLevelForeground(level),
Background = GetLevelBackground(level),
BorderThickness = new Thickness(1),
CornerRadius = new CornerRadius(2),
Padding = new Thickness(8, 0),
Margin = new Thickness(8, 2),
VerticalAlignment = VerticalAlignment.Center,
IsHitTestVisible = false,
Child = new TextBlock
{
Text = content,
Foreground = GetLevelForeground(level),
IsHitTestVisible = false
}
};
var levelSpan = new Span();
levelSpan.Inlines.Add(zeroWidthText);
levelSpan.Inlines.Add(border);
return levelSpan;
}
// ...
}
上記ではログの種類に応じた前景色や背景色の取得コードを省略していますが、重要ではありません。
既存の問題
上記の GetLevelInline メソッドをご覧ください。このメソッドはログレベルブロックを生成し、Border でログレベルの説明（デバッグ、エラーなど）をラップし、ログタイプに枠線効果を付けていますが、コピーに問題があります：
7:56 デバッグ モジュール ブロックを選択し、Ctrl + C でコピーしてメモ帳に貼り付けると、デバッグ】モジュール名A- のように明らかに位置ずれが発生します。
本来コピーされるべきはテキスト内容ですが、Border はコピーできないため、コード内に コピー用に幅ゼロの透明テキストを作成 というコメントが残っています：
// コピー用に幅ゼロの透明テキストを作成
// TODO：コピー時に位置ずれの問題あり
var zeroWidthText = new Run($"【{content}】")
{
Foreground = Brushes.Transparent, FontSize = 0.001
};
詳細は割愛しますが、何か解決策をお持ちの方はいらっしゃいますか？PR をお待ちしています。ありがとうございます。
まとめ
本記事は主に PR を募集しています。このコンポーネントがお役に立てば幸いです。リポジトリは以下の通りです：
- CodeWF.LogViewer：https://github.com/dotnet9/CodeWF.LogViewer
次回はカスタム TabItem の枠線実装について共有します：
