Ryujinx/Ryujinx.Ava/UI/Views/User/UserSelector.axaml

<UserControl
    x:Class="Ryujinx.Ava.UI.Views.User.UserSelector"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:flex="clr-namespace:Avalonia.Flexbox;assembly=Avalonia.Flexbox"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
    xmlns:models="clr-namespace:Ryujinx.Ava.UI.Models"
    xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    d:DesignHeight="450"
    MinWidth="500"
    d:DesignWidth="800"
    mc:Ignorable="d"
    Focusable="True"
    x:CompileBindings="True"
    x:DataType="viewModels:UserProfileViewModel">
    <UserControl.Resources>
        <helpers:BitmapArrayValueConverter x:Key="ByteImage" />
    </UserControl.Resources>
    <Design.DataContext>
        <viewModels:UserProfileViewModel />
    </Design.DataContext>
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListBox
            MaxHeight="300"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            SelectionChanged="ProfilesList_SelectionChanged"
            Items="{Binding Profiles}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <flex:FlexPanel
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        AlignContent="FlexStart"
                        JustifyContent="FlexStart" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.Styles>
                <Style Selector="ListBoxItem">
                    <Setter Property="Margin" Value="5 5 0 5" />
                    <Setter Property="CornerRadius" Value="4" />
                </Style>
                <Style Selector="Border#SelectionIndicator">
                    <Setter Property="Opacity" Value="0" />
                </Style>
            </ListBox.Styles>
            <ListBox.DataTemplates>
                <DataTemplate
                    DataType="models:UserProfile">
                    <Grid
                        PointerEnter="Grid_PointerEntered"
                        PointerLeave="Grid_OnPointerExited">
                        <Border
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            ClipToBounds="True"
                            CornerRadius="5"
                            Background="{Binding BackgroundColor}">
                            <StackPanel
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch">
                                <Image
                                    Width="96"
                                    Height="96"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Top"
                                    Source="{Binding Image, Converter={StaticResource ByteImage}}" />
                                <TextBlock
                                    HorizontalAlignment="Stretch"
                                    MaxWidth="90"
                                    Text="{Binding Name}"
                                    TextAlignment="Center"
                                    TextWrapping="Wrap"
                                    TextTrimming="CharacterEllipsis"
                                    MaxLines="2"
                                    Margin="5" />
                            </StackPanel>
                        </Border>
                        <Border
                            Height="30"
                            Width="30"
                            CornerRadius="15"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Background="{DynamicResource ThemeContentBackgroundColor}"
                            IsVisible="{Binding IsPointerOver}">
                            <Button
                                MaxHeight="30"
                                MaxWidth="30"
                                MinHeight="30"
                                MinWidth="30"
                                CornerRadius="15"
                                Padding="0"
                                Click="EditUser">
                                <ui:SymbolIcon Symbol="Edit" />
                            </Button>
                        </Border>
                    </Grid>
                </DataTemplate>
                <DataTemplate
                    DataType="models:AddModel">
                    <Panel
                        Height="118"
                        Width="96">
                        <Button
                            MinWidth="50"
                            MinHeight="50"
                            MaxWidth="50"
                            MaxHeight="50"
                            CornerRadius="25"
                            Margin="10"
                            Padding="0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Click="AddUser">
                            <ui:SymbolIcon Symbol="Add" />
                        </Button>
                        <Panel.Styles>
                            <Style Selector="Panel">
                                <Setter Property="Background" Value="{DynamicResource ListBoxBackground}"/>
                            </Style>
                        </Panel.Styles>
                    </Panel>
                </DataTemplate>
            </ListBox.DataTemplates>
        </ListBox>
        <StackPanel
            Grid.Row="1"
            Margin="0 10 0 0"
            HorizontalAlignment="Right"
            Orientation="Horizontal">
            <Button
                Margin="10 0"
                Click="ManageSaves"
                Content="{locale:Locale UserProfilesManageSaves}" />
            <Button
                Click="RecoverLostAccounts"
                Content="{locale:Locale UserProfilesRecoverLostAccounts}" />
        </StackPanel>
    </Grid>
</UserControl>