msfs-popout-panel-manager/MainApp/UserControl/ProfileCardList.xaml

<UserControl
    x:Class="MSFSPopoutPanelManager.MainApp.ProfileCardList"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:CalcBinding;assembly=CalcBinding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dotNetKitControls="clr-namespace:DotNetKit.Windows.Controls;assembly=DotNetKit.Wpf.AutoCompleteComboBox"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:local="clr-namespace:MSFSPopoutPanelManager.MainApp"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:viewmodel="clr-namespace:MSFSPopoutPanelManager.MainApp.ViewModel"
    Width="1024"
    mc:Ignorable="d">
    <UserControl.Resources>
        <system:Double x:Key="IconSize">22</system:Double>
        <system:Double x:Key="ButtonSize">28</system:Double>
    </UserControl.Resources>
    <StackPanel d:DataContext="{d:DesignInstance viewmodel:ProfileCardListViewModel}" Orientation="Horizontal">
        <DockPanel Width="62">
            <Button
                Width="{StaticResource ButtonSize}"
                Height="{StaticResource ButtonSize}"
                Margin="6,0,0,0"
                Command="{Binding PreviousProfileCommand}"
                IsEnabled="{c:Binding 'ProfileData.Profiles.Count > 1'}"
                Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                ToolTip="Previous aircraft profile">
                <materialDesign:PackIcon
                    Width="{StaticResource IconSize}"
                    Height="{StaticResource IconSize}"
                    Kind="ChevronLeft" />
            </Button>
        </DockPanel>
        <DockPanel Width="900">
            <materialDesign:Transitioner x:Name="TransitionProfile" SelectedIndex="{Binding ProfileTransitionIndex}">
                <materialDesign:TransitionerSlide x:Name="Slide1" ClipToBounds="True">
                    <materialDesign:TransitionerSlide.ForwardWipe>
                        <materialDesign:SlideWipe Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.ForwardWipe>
                    <materialDesign:TransitionerSlide.BackwardWipe>
                        <materialDesign:SlideWipe Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.BackwardWipe>
                    <materialDesign:TransitionerSlide.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromRight" Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.OpeningEffects>
                    <StackPanel>
                        <local:ProfileCardEmpty Visibility="{c:Binding 'ProfileData.Profiles.Count == 0'}" />
                        <local:ProfileCard Visibility="{c:Binding 'ProfileData.Profiles.Count > 0'}" />
                    </StackPanel>
                </materialDesign:TransitionerSlide>
                <materialDesign:TransitionerSlide x:Name="Slide2" ClipToBounds="True">
                    <materialDesign:TransitionerSlide.ForwardWipe>
                        <materialDesign:SlideWipe Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.ForwardWipe>
                    <materialDesign:TransitionerSlide.BackwardWipe>
                        <materialDesign:SlideWipe Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.BackwardWipe>
                    <materialDesign:TransitionerSlide.OpeningEffects>
                        <materialDesign:TransitionEffect Kind="SlideInFromRight" Duration="0:0:0.8" />
                    </materialDesign:TransitionerSlide.OpeningEffects>
                    <StackPanel>
                        <local:ProfileCardEmpty Visibility="{c:Binding 'ProfileData.Profiles.Count == 0'}" />
                        <local:ProfileCard Visibility="{c:Binding 'ProfileData.Profiles.Count > 0'}" />
                    </StackPanel>
                </materialDesign:TransitionerSlide>
            </materialDesign:Transitioner>
        </DockPanel>
        <DockPanel Width="62" Margin="-5,10,0,0">
            <StackPanel Orientation="Vertical">
                <Button
                    Width="{StaticResource ButtonSize}"
                    Height="{StaticResource ButtonSize}"
                    Command="{Binding AddProfileCommand}"
                    Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                    ToolTip="Add a new aircraft profile">
                    <materialDesign:PackIcon
                        Width="18"
                        Height="18"
                        Kind="FilePlusOutline" />
                </Button>
                <materialDesign:PopupBox
                    x:Name="PopupBoxFinder"
                    Margin="16,16,0,0"
                    materialDesign:ElevationAssist.Elevation="Dp0"
                    IsEnabled="{c:Binding 'ProfileData.Profiles.Count > 1'}"
                    PlacementMode="LeftAndAlignMiddles"
                    PopupHorizontalOffset="-10"
                    PopupUniformCornerRadius="4"
                    Style="{StaticResource MaterialDesignPopupBox}">
                    <materialDesign:PopupBox.ToggleContent>
                        <Button
                            Width="{StaticResource ButtonSize}"
                            Height="{StaticResource ButtonSize}"
                            Margin="0"
                            Padding="0"
                            Click="BtnPopupBoxFinder_Click"
                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            ToolTip="Find an aircraft profile">
                            <materialDesign:PackIcon
                                Width="{StaticResource IconSize}"
                                Height="{StaticResource IconSize}"
                                Foreground="White"
                                Kind="Magnify" />
                        </Button>
                    </materialDesign:PopupBox.ToggleContent>
                    <dotNetKitControls:AutoCompleteComboBox
                        x:Name="ComboBoxSearchProfile"
                        Width="250"
                        Margin="5,0,5,0"
                        Padding="5,0,5,0"
                        materialDesign:ComboBoxAssist.MaxLength="20"
                        materialDesign:HintAssist.Hint="Search Profile"
                        materialDesign:HintAssist.HintOpacity="0.3"
                        DisplayMemberPath="Name"
                        Foreground="White"
                        ItemsSource="{Binding ProfileData.Profiles}"
                        MaxDropDownHeight="400"
                        SelectedItem="{Binding SearchProfileSelectedItem}"
                        SelectedValuePath="Id"
                        Style="{StaticResource MaterialDesignComboBox}"
                        TextSearch.TextPath="Name">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding SearchProfileSelectedCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </dotNetKitControls:AutoCompleteComboBox>
                </materialDesign:PopupBox>
                <Button
                    Width="{StaticResource ButtonSize}"
                    Height="{StaticResource ButtonSize}"
                    Margin="0,170,0,0"
                    Command="{Binding NextProfileCommand}"
                    DockPanel.Dock="Top"
                    IsEnabled="{c:Binding 'ProfileData.Profiles.Count > 1'}"
                    Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                    ToolTip="Next aircraft profile">
                    <materialDesign:PackIcon
                        Width="{StaticResource IconSize}"
                        Height="{StaticResource IconSize}"
                        Kind="ChevronRight" />
                </Button>
            </StackPanel>
        </DockPanel>
    </StackPanel>
</UserControl>