ClashDotNetFramework-src/ClashDotNetFramework/Pages/LogsPage.xaml

<Page x:Class="ClashDotNetFramework.Pages.LogsPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ClashDotNetFramework.Pages"
      xmlns:items="clr-namespace:ClashDotNetFramework.Models.Items"
      xmlns:converters="clr-namespace:ClashDotNetFramework.Models.Converters"
      xmlns:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
      mc:Ignorable="d" FontSize="14" Loaded="LogsPage_Load" Unloaded="LogsPage_Unloaded"
      d:DesignHeight="750" d:DesignWidth="780"
      Title="LogsPage">
    <Page.Resources>
        <converters:LevelToColorConverter x:Key="LevelToColorConverter"/>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="2" Background="{TemplateBinding Background}">
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="LogItemTemplate" DataType="items:LogItem">
            <Grid>
                <Grid.RowDefinitions>
                    <!-- Time & Level Label -->
                    <RowDefinition/>
                    
                    <!-- PayLoad Label -->
                    <RowDefinition/>
                </Grid.RowDefinitions>
                
                <!-- Time & Level Label -->
                <StackPanel
                    Orientation="Horizontal">
                    <!-- Time Label -->
                    <Border
                        CornerRadius="2"
                        Background="{DynamicResource BorderBackground}"
                        Padding="8,4">
                        <TextBlock
                            Text="{Binding Time}"
                            Foreground="White"/>
                    </Border>
                    
                    <!-- Level Label -->
                    <Border
                        CornerRadius="2"
                        Background="{Binding Level, Converter={StaticResource LevelToColorConverter}}"
                        Padding="8,4"
                        Margin="5,0,0,0">
                        <TextBlock
                            Text="{Binding Level}"
                            Foreground="White"/>
                    </Border>
                </StackPanel>
                
                <!-- PayLoad Label -->
                <emoji:TextBlock
                    Grid.Row="1"
                    Foreground="{DynamicResource NormalTextForeground}"
                    Text="{Binding PayLoad}"
                    TextTrimming="CharacterEllipsis"
                    Margin="0,5,0,10"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <!-- Page Title -->
            <RowDefinition Height="100"/>
            
            <!-- Logs ListView -->
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- Page Title & Action Buttons -->
        <Grid>
            <Grid.ColumnDefinitions>
                <!-- Page Title -->
                <ColumnDefinition/>
                
                <!-- Action Buttons -->
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            
            <!-- Page Title -->
            <StackPanel
                VerticalAlignment="Center"
                Margin="20,0,0,0">
                <TextBlock
                    Text="{DynamicResource Logs}"
                    FontSize="24"
                    Foreground="{DynamicResource NormalTextForeground}"/>
                <TextBlock
                    Text="Mode: Rule"
                    Foreground="{DynamicResource NormalTextForeground}"
                    x:Name="CurrentMode"
                    Margin="0,10,0,0"/>
            </StackPanel>
            
            <!-- Action Buttons -->
            <Grid
                Grid.Column="1"
                Height="40"
                Margin="0,0,20,0">

                <Grid.ColumnDefinitions>
                    <!-- Clear Button -->
                    <ColumnDefinition/>
                    
                    <!-- Stop Button -->
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                
                <!-- Clear Button -->
                <Button
                    Style="{StaticResource ButtonStyle}"
                    Background="#2CA51D"
                    Content="{DynamicResource Clear}"
                    Click="ClearButton_Click"/>
                
                <!-- Status Toggle Button -->
                <Button
                    Grid.Column="1"
                    Style="{StaticResource ButtonStyle}"
                    Background="#F56363"
                    Content="{DynamicResource Stop}"
                    Click="StatusButton_Click"
                    Margin="10,0,0,0"
                    x:Name="StatusButton"/>
            </Grid>
        </Grid>
        <Separator
            VerticalAlignment="Bottom"
            Background="{DynamicResource SeparatorBackground}"/>

        <!-- Profile ListView -->
        <Grid
            Grid.Row="1"
            Margin="14,5,14,20">
            <ListView
                Background="Transparent"
                BorderBrush="Transparent"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollBarVisibility="Hidden"
                ItemTemplate="{StaticResource LogItemTemplate}"
                x:Name="LogItemListView"/>
        </Grid>
    </Grid>
</Page>