StabilityMatrix/StabilityMatrix.Avalonia/Controls/Inference/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:models="clr-namespace:StabilityMatrix.Avalonia.Models"
    xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls"
    x:DataType="vmInference:ImageGalleryCardViewModel">

    <Design.PreviewWith>
        <Grid Width="600" Height="800">
            <controls:ImageGalleryCard DataContext="{x:Static mocks:DesignData.ImageGalleryCardViewModel}" />
        </Grid>
    </Design.PreviewWith>

    <Style Selector="controls|ImageGalleryCard">
        <!--  Set Defaults  -->
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card
                    Padding="12,12,12,8"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalAlignment}">

                    <Grid RowDefinitions="*,Auto">
                        
                        <Grid.Styles>
                            <Style Selector="ListBox /template/ VirtualizingStackPanel">
                                <Setter Property="Orientation" Value="Horizontal" />
                            </Style>
                        </Grid.Styles>
                        
                        <!--  Main image view  -->
                        <Border
                            Classes="theme-dark"
                            VerticalAlignment="Stretch"
                            CornerRadius="4"
                            Margin="0,0,0,4">
                            <Grid x:Name="MainGrid">
                                <Grid.Styles>
                                    <Style Selector="controls|AdvancedImageBox">
                                        <!--  ReSharper disable once Xaml.BindingWithContextNotResolved  -->
                                        <Setter Property="IsPixelGridEnabled" Value="{ReflectionBinding ElementName=MainGrid, Path=DataContext.IsPixelGridEnabled, FallbackValue=True}" />
                                    </Style>
                                </Grid.Styles>

                                <controls:FrameCarousel
                                    x:Name="PART_ImageCarousel"
                                    CornerRadius="4"
                                    IsVisible="{Binding !IsPreviewOverlayEnabled}"
                                    ItemsSource="{Binding ImageSources}"
                                    SelectedIndex="{Binding SelectedImageIndex}"
                                    SelectedItem="{Binding SelectedImage}"
                                    SourcePageType="controls:AdvancedImageBoxView" />

                                <Border
                                    ClipToBounds="True"
                                    CornerRadius="4"
                                    IsVisible="{Binding IsPreviewOverlayEnabled}">
                                    <Image
                                        Source="{Binding PreviewImage}"
                                        Stretch="Uniform"
                                        StretchDirection="Both" />
                                </Border>

                                <!--  Left button  -->
                                <Border
                                    Grid.Column="0"
                                    Margin="4"
                                    IsVisible="{Binding HasMultipleImages}"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center">
                                    <Button
                                        Padding="10,20"
                                        Classes="transparent"
                                        Command="{Binding #PART_ImageCarousel.Previous}"
                                        IsEnabled="{Binding CanNavigateBack}">
                                        <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"
                                    IsVisible="{Binding HasMultipleImages}"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center">
                                    <Button
                                        Padding="10,20"
                                        Classes="transparent"
                                        Command="{Binding #PART_ImageCarousel.Next}"
                                        IsEnabled="{Binding CanNavigateForward}">
                                        <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>
                        </Border>

                        <!--  Thumbnails  -->
                        <ListBox
                            Grid.Row="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Stretch"
                            MinHeight="65"
                            ItemsSource="{Binding ImageSources}"
                            SelectedItem="{Binding SelectedImage}"
                            SelectionMode="AlwaysSelected">
                            <ListBox.Styles>
                                <Style Selector="ListBox /template/ VirtualizingStackPanel">
                                    <Setter Property="Orientation" Value="Horizontal" />
                                </Style>
                            </ListBox.Styles>
                            <ListBox.ItemTemplate>
                                <DataTemplate DataType="{x:Type models:ImageSource}">
                                    <labs:AsyncImage
                                        MaxHeight="65"
                                        CornerRadius="4"
                                        Source="{Binding Uri}"
                                        Stretch="Uniform" />
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>