better-genshin-impact/BetterGenshinImpact/View/Controls/DomainSelector.xaml

<UserControl x:Class="BetterGenshinImpact.View.Controls.DomainSelector"
             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:ui="http://schemas.lepo.co/wpfui/2022/xaml"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="300"
             Name="Root">
    <Grid>
        <ToggleButton x:Name="MainToggle"
                      HorizontalAlignment="Stretch"
                      HorizontalContentAlignment="Stretch"
                      Padding="12,6"
                      Height="34"
                      Background="{DynamicResource ControlFillColorDefaultBrush}"
                      BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
                      BorderThickness="1">
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="4">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding SelectedDomain, ElementName=Root, TargetNullValue='请选择', FallbackValue='请选择'}"
                                       VerticalAlignment="Center"
                                       Margin="5,0,0,0"
                                       TextTrimming="CharacterEllipsis"/>
                            <ui:SymbolIcon Grid.Column="1" Symbol="ChevronDown24" Margin="0,0,10,0"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

        <Popup x:Name="MainPopup"
               IsOpen="{Binding IsChecked, ElementName=MainToggle, Mode=TwoWay}"
               PlacementTarget="{Binding ElementName=MainToggle}"
               StaysOpen="False"
               AllowsTransparency="True"
               PopupAnimation="Slide"
               Opened="MainPopup_Opened"
               Closed="MainPopup_Closed">
            <Border x:Name="PopupBorder"
                    Background="{DynamicResource ApplicationBackgroundBrush}"
                    BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="8"
                    Margin="0,4,0,0"
                    Padding="4"
                    MinHeight="200"
                    MaxHeight="400"
                    Width="350"
                    PreviewMouseWheel="PopupBorder_PreviewMouseWheel">
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="2" Direction="270" Color="Black" Opacity="0.2"/>
                </Border.Effect>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="90"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- Countries -->
                    <ui:ListView x:Name="CountriesListView"
                              ItemsSource="{Binding Countries, ElementName=Root}"
                              SelectedItem="{Binding SelectedCountry, ElementName=Root, Mode=TwoWay}"
                              BorderThickness="0"
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.CanContentScroll="False">
                        <ui:ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" Margin="8,4"/>
                            </DataTemplate>
                        </ui:ListView.ItemTemplate>
                    </ui:ListView>

                    <!-- Divider -->
                    <Rectangle Grid.Column="1" Width="1" Fill="{DynamicResource SurfaceStrokeColorDefaultBrush}" Margin="2,0"/>

                    <!-- Domains -->
                    <ui:ListView Grid.Column="2" x:Name="DomainsListView"
                              ItemsSource="{Binding FilteredDomains, ElementName=Root}"
                              SelectedValue="{Binding SelectedDomain, ElementName=Root, Mode=TwoWay}"
                              SelectedValuePath="Item2.Name"
                              BorderThickness="0"
                              SelectionChanged="DomainListView_SelectionChanged"
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.CanContentScroll="False">
                        <ui:ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Margin="8,4">
                                    <Run Text="{Binding Item1, Mode=OneWay}"/>
                                </TextBlock>
                            </DataTemplate>
                        </ui:ListView.ItemTemplate>
                    </ui:ListView>
                </Grid>
            </Border>
        </Popup>
    </Grid>
</UserControl>