MainWindow.xaml

<Window
    x:Class="Orayo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    xmlns:model="using:Orayo.Models"
    xmlns:local="using:Orayo.Helpers"
    mc:Ignorable="d"
    Title="Orayo">

    <Grid RowSpacing="16" Padding="20,20,8,20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid x:Name="TitleBarGrid" Margin="-20,-20,-8,0" Padding="20,12,20,12" Background="Transparent" />

        <Grid Grid.Row="1" ColumnSpacing="12" Margin="0,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="12" VerticalAlignment="Center" Margin="4,0,0,0">
                <Image Width="40" Height="40" Stretch="Uniform">
                    <Image.Source>
                        <BitmapImage UriSource="ms-appx:///Assets/icons/AppIcon.png" />
                    </Image.Source>
                </Image>
                <TextBlock Text="Orayo"
                           FontFamily="ms-appx:///Assets/fonts/MomoTrustDisplay-Regular.ttf#Momo Trust Display"
                           FontSize="34"
                           VerticalAlignment="Center" />
            </StackPanel>
            <Button Grid.Column="1" Content="{local:Localize Key=TitleDNS}" Click="DnsSettingsButton_Click" />
            <Button Grid.Column="2" Content="{local:Localize Key=TitleRoute}" Click="RouteRulesButton_Click" />
            <Button Grid.Column="3" Width="36" Height="32" Padding="0" Click="MoreButton_Click">
                <PathIcon Data="M4 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2z" Width="16" Height="16" />
                <ToolTipService.ToolTip>
                    <ToolTip Content="{local:Localize Key=TipMore}" />
                </ToolTipService.ToolTip>
            </Button>
        </Grid>

        <Border Grid.Row="2" Margin="0,0,12,0" Padding="16" BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}" BorderThickness="1" CornerRadius="5" Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
            <Grid ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <ComboBox Grid.Column="0" Width="108" x:Name="RoutingModeComboBox" SelectionChanged="RoutingModeComboBox_SelectionChanged" IsEnabled="{x:Bind IsRouteSettingsEnabled, Mode=OneWay}" HorizontalAlignment="Left" VerticalAlignment="Center" />

                <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                    <TextBlock Text="{local:Localize Key=LabelSocksPort}" VerticalAlignment="Center" Opacity="0.72" />
                    <TextBox x:Name="SocksPortTextBox" Width="90" MaxLength="5" HorizontalTextAlignment="Center" VerticalContentAlignment="Center" LostFocus="SocksPortTextBox_LostFocus" />
                </StackPanel>

                <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                    <TextBlock Text="{local:Localize Key=LabelHttpPort}" VerticalAlignment="Center" Opacity="0.72" />
                    <TextBox x:Name="HttpPortTextBox" Width="90" MaxLength="5" HorizontalTextAlignment="Center" VerticalContentAlignment="Center" LostFocus="HttpPortTextBox_LostFocus" />
                </StackPanel>

                <ToggleButton Grid.Column="4" Content="{local:Localize Key=ToggleSystemProxy}" IsChecked="{x:Bind IsSystemProxyEnabled, Mode=TwoWay}" Click="SystemProxyToggleButton_Click" IsEnabled="{x:Bind IsSystemProxyToggleEnabled, Mode=OneWay}" VerticalAlignment="Center" />

                <ToggleButton Grid.Column="5" Content="{local:Localize Key=ToggleTunMode}" IsChecked="{x:Bind IsTunMode, Mode=TwoWay}" IsEnabled="{x:Bind IsTunToggleEnabled, Mode=OneWay}" VerticalAlignment="Center" />
            </Grid>
        </Border>

        <Grid Grid.Row="3" RowSpacing="8">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid Grid.Row="0" Margin="0,0,12,0">
                <StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Right">
                    <Button Width="36" Height="32" Padding="0" Click="ImportFromClipboardButton_Click">
                        <PathIcon Data="M5.085 2A1.5 1.5 0 0 1 6.5 1h3a1.5 1.5 0 0 1 1.415 1h.585A1.5 1.5 0 0 1 13 3.5v10a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-10A1.5 1.5 0 0 1 4.5 2zM6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM5.085 3H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5h-.585A1.5 1.5 0 0 1 9.5 4h-3a1.5 1.5 0 0 1-1.415-1" Width="16" Height="16" />
                        <ToolTipService.ToolTip>
                            <ToolTip Content="{local:Localize Key=TipPasteImport}" />
                        </ToolTipService.ToolTip>
                    </Button>

                    <Button Width="36" Height="32" Padding="0" Click="AddServerButton_Click">
                        <PathIcon Data="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" Width="16" Height="16" />
                        <ToolTipService.ToolTip>
                            <ToolTip Content="{local:Localize Key=TipManualAdd}" />
                        </ToolTipService.ToolTip>
                    </Button>

                    <Button x:Name="LatencyRefreshButton"
                            Width="36"
                            Height="32"
                            VerticalAlignment="Center"
                            Padding="0"
                            Click="LatencyRefreshButton_Click"
                            IsEnabled="{x:Bind IsLatencyRefreshEnabled, Mode=OneWay}">
                        <PathIcon Data="M4.914 1.714A1 1 0 0 1 5.873 1h4.406a1 1 0 0 1 .936 1.351L10.222 5h2.03a.75.75 0 0 1 .586 1.217l-6.607 8.3c-.854 1.073-2.562.188-2.178-1.128L5.333 9H3.75a.75.75 0 0 1-.72-.964zM10.28 2H5.873L4.085 8H6a.5.5 0 0 1 .48.64l-1.467 5.029a.24.24 0 0 0 .006.174a.26.26 0 0 0 .119.118c.057.03.116.037.164.029a.24.24 0 0 0 .147-.095L11.733 6H9.5a.5.5 0 0 1-.468-.676z" Width="16" Height="16" />
                        <ToolTipService.ToolTip>
                            <ToolTip Content="{local:Localize Key=TipLatencyTest}" />
                        </ToolTipService.ToolTip>
                    </Button>
                </StackPanel>
            </Grid>

            <Grid Grid.Row="1">
            <ListView
                x:Name="ServerListView"
                Margin="0,4,0,0"
                ItemsSource="{x:Bind Servers, Mode=OneWay}"
                SelectedItem="{x:Bind SelectedServer, Mode=TwoWay}"
                SelectionMode="Single"
                Background="Transparent"
                BorderThickness="0"
                ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ListView.Resources>
                    <SolidColorBrush x:Key="ListViewItemBackground" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBorderBrush" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBorderBrushPointerOver" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBorderBrushSelected" Color="Transparent" />
                    <SolidColorBrush x:Key="ListViewItemBorderBrushSelectedPointerOver" Color="Transparent" />
                </ListView.Resources>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="Margin" Value="0,0,12,10" />
                        <Setter Property="Padding" Value="0" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="model:ServerEntry">
                        <Border
                            CornerRadius="5"
                            BorderThickness="1"
                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            PointerEntered="ServerCard_PointerEntered"
                            PointerExited="ServerCard_PointerExited">
                            <Border.ContextFlyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem Text="{local:Localize Key=MenuEdit}" Click="EditServerMenuItem_Click" />
                                    <MenuFlyoutItem Text="{local:Localize Key=MenuDelete}" Click="DeleteServerMenuItem_Click" />
                                    <MenuFlyoutItem Text="{local:Localize Key=MenuShare}" Click="ShareServerMenuItem_Click" />
                                </MenuFlyout>
                            </Border.ContextFlyout>

                            <Grid>
                                <Border
                                    x:Name="ServerCardHoverOverlay"
                                    BorderThickness="1"
                                    BorderBrush="{ThemeResource SystemControlHighlightAccentBrush}"
                                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                                    CornerRadius="5"
                                    IsHitTestVisible="False"
                                    Opacity="0" />

                                <Grid Padding="14,12" ColumnSpacing="12">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="72" />
                                        <ColumnDefinition Width="16" />
                                    </Grid.ColumnDefinitions>

                                    <StackPanel Grid.Column="0" Spacing="4">
                                        <TextBlock Text="{x:Bind Name}" FontSize="16" FontWeight="SemiBold" TextTrimming="CharacterEllipsis" />
                                        <StackPanel Orientation="Horizontal" Spacing="8">
                                            <TextBlock Text="{x:Bind DisplayProtocol}" Opacity="0.72" />
                                            <TextBlock Text="{x:Bind Host}" Opacity="0.72" />
                                            <TextBlock Text="{x:Bind Port}" Opacity="0.72" />
                                        </StackPanel>
                                    </StackPanel>

                                    <Border Grid.Column="1"
                                            Width="58"
                                            Padding="6,2"
                                            CornerRadius="4"
                                            Background="{x:Bind LatencyBadgeBackground, Mode=OneWay}"
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Center"
                                            Visibility="{x:Bind LatencyBadgeVisibility, Mode=OneWay}">
                                        <TextBlock Text="{x:Bind LatencyBadgeText, Mode=OneWay}"
                                                   FontSize="11"
                                                   FontWeight="SemiBold"
                                                   Foreground="{x:Bind LatencyBadgeForeground, Mode=OneWay}"
                                                   HorizontalAlignment="Center"
                                                   TextAlignment="Center" />
                                    </Border>

                                    <Ellipse Grid.Column="2"
                                             Width="10"
                                             Height="10"
                                             Fill="#22C55E"
                                             VerticalAlignment="Center"
                                             HorizontalAlignment="Center"
                                             Visibility="{x:Bind ActiveVisibility, Mode=OneWay}" />
                                </Grid>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <TextBlock
                IsHitTestVisible="False"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="{local:Localize Key=EmptyHint}"
                Opacity="0.55"
                Visibility="{x:Bind IsEmptyHintVisible, Mode=OneWay}" />
            </Grid>
        </Grid>
    </Grid>
</Window>