XamTimeline – 重要度別スタイルの EventPoint をライブストリーミング表示する方法

システム監視ログのようなイベントをリアルタイムに流し込みながら、重要度（Info/Warning/Error）ごとに色とサイズを変えて表示したい場合は、重要度ごとに専用の EventPointStyle を設定した DateTimeSeries を用意し、そのデータソースとなる ObservableCollection にイベントを Add するだけで実現できます。

XamTimeline の設定

重要度（Info/Warning/Error）ごとに DateTimeSeries を分けて用意し、それぞれの EventPointStyle と DataSource を割り当てます。

<ig:XamTimeline x:Name="MyTimeline">
    <ig:XamTimeline.Axis>
        <ig:DateTimeAxis x:Name="MyAxis"
                         AutoRange="False"
                         Minimum="{Binding AxisMinimum}"
                         Maximum="{Binding AxisMaximum}" />
    </ig:XamTimeline.Axis>
    <ig:XamTimeline.Series>
        <ig:DateTimeSeries Title="Info"
                           EventPointStyle="{StaticResource InfoPointStyle}"
                           DataSource="{Binding InfoEvents}"
                           DataMapping="Time=Timestamp;Title=Message;Details=Message" />
        <ig:DateTimeSeries Title="Warning"
                           EventPointStyle="{StaticResource WarningPointStyle}"
                           DataSource="{Binding WarningEvents}"
                           DataMapping="Time=Timestamp;Title=Message;Details=Message" />
        <ig:DateTimeSeries Title="Error"
                           EventPointStyle="{StaticResource ErrorPointStyle}"
                           DataSource="{Binding ErrorEvents}"
                           DataMapping="Time=Timestamp;Title=Message;Details=Message" />
    </ig:XamTimeline.Series>
</ig:XamTimeline>

EventPointStyle による重要度別の色・サイズ設定

DateTimeSeries.EventPointStyle は Series 単位で固定されるスタイルです。重要度ごとに Width（サイズ）と Fill（色）が異なるスタイルを用意しておくことで、イベント追加時にコードでスタイルを動的生成する必要がなくなります。

<Style x:Key="InfoPointStyle" TargetType="ig:EventPoint">
    <Setter Property="Width" Value="8" />
    <Setter Property="Fill" Value="#FF4A90D9" />
    <Setter Property="Stroke" Value="#FF3A73AD" />
</Style>
<Style x:Key="WarningPointStyle" TargetType="ig:EventPoint">
    <Setter Property="Width" Value="11" />
    <Setter Property="Fill" Value="#FFF5A623" />
    <Setter Property="Stroke" Value="#FFC2841C" />
</Style>
<Style x:Key="ErrorPointStyle" TargetType="ig:EventPoint">
    <Setter Property="Width" Value="14" />
    <Setter Property="Fill" Value="#FFE74C3C" />
    <Setter Property="Stroke" Value="#FFB03A2E" />
</Style>

ObservableCollection によるライブストリーミング表示

各 DateTimeSeries の DataSource には ObservableCollection をバインドしています。タイマーから新しいイベントを Add するだけで、コードビハインドを介さずに XamTimeline の表示が自動的に追従します。

public ObservableCollection<LogEventViewModel> InfoEvents { get; } = new();
public ObservableCollection<LogEventViewModel> WarningEvents { get; } = new();
public ObservableCollection<LogEventViewModel> ErrorEvents { get; } = new();

private void Timer_Tick(object? sender, EventArgs e)
{
    var now = DateTime.Now;
    if (_random.NextDouble() < 0.4)
    {
        AddLogEvent(_generator.CreateRandom(now));
    }
}

private void AddLogEvent(LogEvent logEvent)
{
    var viewModel = new LogEventViewModel
    {
        Timestamp = logEvent.Timestamp,
        Severity = logEvent.Severity,
        Message = logEvent.Message,
    };

    GetCollection(logEvent.Severity).Add(viewModel);
}

private ObservableCollection<LogEventViewModel> GetCollection(LogSeverity severity) => severity switch
{
    LogSeverity.Info => InfoEvents,
    LogSeverity.Warning => WarningEvents,
    LogSeverity.Error => ErrorEvents,
    _ => InfoEvents,
};

実行結果

アプリケーションを実行すると、1秒ごとに約40%の確率でランダムな監視イベントが生成され、重要度に応じた色・サイズの EventPoint としてタイムライン上にリアルタイムに追加されていきます。軸の表示範囲も直近2分の範囲へ常にスライドしていくため、最新のイベントが右端に流れ込むように表示されます。