ClashDotNetFramework-src/ClashDotNetFramework/Pages/RulesPage.xaml

<Page x:Class="ClashDotNetFramework.Pages.RulesPage"
      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:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
      xmlns:share="clr-namespace:Clash.SDK.Models.Share;assembly=Clash-SDK"
      mc:Ignorable="d" FontSize="14" Loaded="Page_Loaded"
      d:DesignHeight="450" d:DesignWidth="800"
      Title="RulesPage">
    <Page.Resources>
        <Style x:Key="BorderStyle" TargetType="Border">
            <Setter Property="CornerRadius" Value="2"/>
            <Setter Property="Background" Value="{DynamicResource BorderBackground}"/>
            <Setter Property="Margin" Value="0,5,0,0"/>
            <Setter Property="Padding" Value="4,4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
        <DataTemplate x:Key="RuleItemTemplate" DataType="share:ClashRuleData">
            <Grid Margin="0,0,0,5">
                <Grid.ColumnDefinitions>
                    <!-- Rule PayLoad & Type -->
                    <ColumnDefinition Width="*"/>
                    
                    <!-- Rule Type -->
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- Rule PayLoad & Type -->
                <Grid>
                    <Grid.RowDefinitions>
                        <!-- Rule PayLoad -->
                        <RowDefinition/>
                        
                        <!-- Rule Type -->
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <!-- Rule PayLoad -->
                    <TextBlock
                        Foreground="{DynamicResource NormalTextForeground}"
                        Text="{Binding PayLoad}"/>

                    <!-- Rule Type -->
                    <Border
                        Grid.Row="1"
                        Style="{StaticResource BorderStyle}">
                        <TextBlock
                            Foreground="White"
                            Text="{Binding Type}"/>
                    </Border>
                </Grid>

                <!-- Rule Proxy -->
                <emoji:TextBlock
                    Grid.Column="1"
                    Foreground="{DynamicResource NormalTextForeground}"
                    Text="{Binding Proxy}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <!-- Page Title -->
            <RowDefinition Height="100"/>

            <!-- Rule ListView -->
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- Page Title -->
        <TextBlock
            Text="{DynamicResource Rules}"
            FontSize="24"
            Foreground="{DynamicResource NormalTextForeground}"
            VerticalAlignment="Center"
            Margin="20,0,0,0"/>
        <Separator
            VerticalAlignment="Bottom"
            Background="{DynamicResource SeparatorBackground}"/>

        <!-- Rule ListView -->
        <Grid
            Grid.Row="1"
            Margin="14,5,20,20">
            <ListView
                Background="Transparent"
                BorderBrush="Transparent"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ItemTemplate="{StaticResource RuleItemTemplate}"
                SelectionMode="Single"
                HorizontalContentAlignment="Stretch"
                x:Name="RuleItemListView"/>
        </Grid>
    </Grid>
</Page>