StabilityMatrix/StabilityMatrix.Avalonia/Controls/ImageGalleryCard.axaml

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:system="clr-namespace:System;assembly=System.Runtime"
    xmlns:ui="using:FluentAvalonia.UI.Controls"
    xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:models="clr-namespace:StabilityMatrix.Avalonia.Models"
    x:DataType="vmInference:ImageGalleryCardViewModel">

    <Design.PreviewWith>
        <Grid Width="600" Height="800">
            <controls:ImageGalleryCard DataContext="{x:Static mocks:DesignData.ImageGalleryCardViewModel}" />
        </Grid>
    </Design.PreviewWith>
    
    
    <Style Selector="ListBox /template/ VirtualizingStackPanel">
        <Setter Property="Orientation" Value="Horizontal" />
    </Style>
    
    <Style Selector="controls|ImageGalleryCard">
        <!--  Set Defaults  -->
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card
                    Padding="8"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}">
                    
                    <Grid RowDefinitions="*,Auto">
                        <!-- Main image view -->
                        <Grid Margin="4">
                            <Carousel
                                x:Name="ImageCarousel"
                                MinHeight="400"
                                AutoScrollToSelectedItem="True"
                                IsVisible="{Binding !IsPreviewOverlayEnabled}"
                                SelectedItem="{Binding SelectedImage}"
                                SelectedIndex="{Binding SelectedImageIndex}"
                                ItemsSource="{Binding ImageSources}">
                                    
                                <Carousel.PageTransition>
                                    <CompositePageTransition>
                                        <PageSlide Orientation="Horizontal" Duration="0.167">
                                            <PageSlide.SlideInEasing>
                                                <QuadraticEaseIn />
                                            </PageSlide.SlideInEasing>
                                            <PageSlide.SlideOutEasing>
                                                <SineEaseInOut />
                                            </PageSlide.SlideOutEasing>
                                        </PageSlide>
                                        <CrossFade Duration="0.1" />
                                    </CompositePageTransition>
                                </Carousel.PageTransition>
                                    
                                <Carousel.ItemTemplate>
                                    <DataTemplate DataType="{x:Type models:ImageSource}">
                                        <controls:AdvancedImageBox
                                            x:Name="ImageView"
                                            CornerRadius="4"
                                            SizeMode="Fit"
                                            Image="{Binding BitmapAsync^}">
                                            <controls:AdvancedImageBox.ContextFlyout>
                                                <ui:FAMenuFlyout>
                                                    <!--<ui:MenuFlyoutItem 
                                                        Command="{ReflectionBinding #ImageCarousel.DataContext.FlyoutPreviewCommand}" 
                                                        CommandParameter="{Binding #ImageView.Image}"
                                                        Text="Expanded Preview"
                                                        HotKey="Space"
                                                        IconSource="ZoomInFilled" />
                                                    <ui:MenuFlyoutSeparator/>-->
                                                    <ui:MenuFlyoutItem 
                                                        IsEnabled="{OnPlatform Windows=True, Default=False}"
                                                        Command="{ReflectionBinding #ImageCarousel.DataContext.FlyoutCopyCommand}" 
                                                        CommandParameter="{Binding #ImageView.Image}"
                                                        Text="Copy"
                                                        HotKey="Ctrl+C"
                                                        IconSource="Copy" />
                                                </ui:FAMenuFlyout>
                                            </controls:AdvancedImageBox.ContextFlyout>
                                        </controls:AdvancedImageBox>
                                    </DataTemplate>
                                </Carousel.ItemTemplate>
                                    
                            </Carousel>
                            <Border
                                ClipToBounds="True"
                                CornerRadius="4"
                                IsVisible="{Binding IsPreviewOverlayEnabled}">
                                <Image
                                    IsVisible="{Binding IsPreviewOverlayEnabled}"
                                    Source="{Binding PreviewImage}"
                                    Stretch="Uniform"
                                    StretchDirection="Both" />
                            </Border>

                            <!-- Left button -->
                            <Border
                                Margin="4"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                Grid.Column="0">
                                <Button
                                    IsEnabled="{Binding CanNavigateBack}"
                                    Classes="transparent"
                                    Padding="10,20"
                                    Command="{Binding #ImageCarousel.Previous}">
                                    <Path Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" 
                                          Fill="{DynamicResource ButtonForeground}" />
                                </Button>
                            </Border>
                            
                            <!-- Right button -->
                            <Border
                                Margin="4"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Right">
                                <Button
                                    IsEnabled="{Binding CanNavigateForward}"
                                    Classes="transparent"
                                    Padding="10,20"
                                    Command="{Binding #ImageCarousel.Next}">
                                    <Path Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" 
                                          Fill="{DynamicResource ButtonForeground}" />
                                </Button>
                            </Border>
                            
                        </Grid>
                        <!-- Thumbnails -->
                        <ListBox
                            Grid.Row="1"
                            Margin="4"
                            VerticalAlignment="Stretch"
                            HorizontalAlignment="Center"
                            SelectionMode="AlwaysSelected"
                            SelectedItem="{Binding SelectedImage}"
                            ItemsSource="{Binding ImageSources}">
                            <!--<ItemsRepeater.Layout>
                                <StackLayout
                                    Orientation="Horizontal" Spacing="8" />
                            </ItemsRepeater.Layout>-->
                            <!--<ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>-->
                            <ListBox.ItemTemplate>
                                <DataTemplate DataType="{x:Type models:ImageSource}">
                                    <controls:BetterAdvancedImage
                                        MaxHeight="60"
                                        CornerRadius="4"
                                        Source="{Binding}"
                                        Stretch="Uniform"
                                        StretchDirection="Both" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>