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}">
                    <Grid RowDefinitions="*,Auto">
                        <!-- Main image view -->
                        <Grid Margin="4">
                            <Panel>
                                <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:BetterAdvancedImage
                                                x:Name="ImageView"
                                                CornerRadius="4"
                                                Source="{Binding}"
                                                Stretch="Uniform"
                                                StretchDirection="Both">
                                                <controls:BetterAdvancedImage.ContextFlyout>
                                                    <ui:FAMenuFlyout>
                                                        <ui:MenuFlyoutItem 
                                                            IsEnabled="{OnPlatform Windows=True, Default=False}"
                                                            Command="{ReflectionBinding #ImageCarousel.DataContext.FlyoutCopyCommand}" 
                                                            CommandParameter="{Binding #ImageView.CurrentImage}"
                                                            Text="Copy"
                                                            IconSource="Copy" />
                                                    </ui:FAMenuFlyout>
                                                </controls:BetterAdvancedImage.ContextFlyout>
                                            </controls:BetterAdvancedImage>
                                        </DataTemplate>
                                    </Carousel.ItemTemplate>
                                    
                                </Carousel>
                                <Border
                                    ClipToBounds="True"
                                    CornerRadius="4"
                                    IsVisible="{Binding IsPreviewOverlayEnabled}">
                                    <Image
                                        Source="{Binding PreviewImage}"
                                        Stretch="Uniform"
                                        StretchDirection="Both" />
                                </Border>
                            </Panel>
                            
                            <!-- 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>