StabilityMatrix/StabilityMatrix.Avalonia/Controls/ImageFolderCard.axaml

<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
    xmlns:dbModels="clr-namespace:StabilityMatrix.Core.Models.Database;assembly=StabilityMatrix.Core"
    xmlns:input="using:FluentAvalonia.UI.Input"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:ui="using:FluentAvalonia.UI.Controls"
    xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:scroll="clr-namespace:StabilityMatrix.Avalonia.Controls.Scroll"
    x:DataType="vmInference:ImageFolderCardViewModel">

    <Design.PreviewWith>
        <Panel Width="600" Height="800">
            <Grid MaxWidth="500" MaxHeight="700">
                <controls:ImageFolderCard DataContext="{x:Static mocks:DesignData.ImageFolderCardViewModel}" />
            </Grid>
        </Panel>
    </Design.PreviewWith>

    <ControlTheme x:Key="{x:Type controls:ImageFolderCard}" TargetType="controls:ImageFolderCard">
        <Setter Property="Background" Value="Transparent" />
        <!--  Set Defaults  -->
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="Focusable" Value="True" />
        <!--  Template  -->
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card
                    Padding="8"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalAlignment}">

                    <!--<controls:Card.Styles>
                        <Style Selector="ItemsRepeater">
                            <Setter Property="animations:ItemsRepeaterArrangeAnimation.EnableItemsArrangeAnimation" Value="True"/>
                        </Style>
                    </controls:Card.Styles>-->

                    <Grid RowDefinitions="Auto,*">
                        <TextBox
                            x:Name="SearchBox"
                            Margin="6,4,6,8"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Top"
                            Text="{Binding SearchQuery}"
                            Watermark="{x:Static lang:Resources.Label_SearchEllipsis}">
                            <TextBox.InnerRightContent>
                                <ui:SymbolIcon
                                    Margin="0,0,6,0"
                                    FontSize="16"
                                    Symbol="Find" />
                            </TextBox.InnerRightContent>
                        </TextBox>

                        <scroll:BetterScrollViewer
                            Grid.Row="1"
                            BringIntoViewOnFocusChange="False"
                            HorizontalScrollBarVisibility="Disabled"
                            IsScrollInertiaEnabled="True"
                            VerticalSnapPointsType="Mandatory">
                            <ItemsRepeater
                                Name="ImageRepeater"
                                x:Name="ImageRepeater"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Stretch"
                                ItemsSource="{Binding LocalImages}"
                                VerticalCacheLength="8">

                                <ItemsRepeater.Resources>
                                    <input:StandardUICommand x:Key="ImageClickCommand" Command="{Binding ImageClickCommand}" />
                                    <input:StandardUICommand
                                        x:Key="ImageDeleteCommand"
                                        Command="{Binding ImageDeleteCommand}"
                                        IconSource="Delete"
                                        Label="{x:Static lang:Resources.Action_Delete}" />
                                    <input:StandardUICommand
                                        x:Key="ImageCopyCommand"
                                        Command="{Binding ImageCopyCommand}"
                                        IconSource="Copy"
                                        Label="Copy" />
                                    <input:StandardUICommand
                                        x:Key="ImageOpenCommand"
                                        Command="{Binding ImageOpenCommand}"
                                        IconSource="Folder"
                                        Label="{OnPlatform Default={x:Static lang:Resources.Action_OpenInExplorer},
                                                           macOS={x:Static lang:Resources.Action_OpenInFinder}}" />
                                    <input:StandardUICommand
                                        x:Key="ImageExportPngWithMetadataCommand"
                                        Command="{Binding ImageExportPngWithMetadataCommand}"
                                        Label="Png with Metadata" />
                                    <input:StandardUICommand
                                        x:Key="ImageExportPngCommand"
                                        Command="{Binding ImageExportPngCommand}"
                                        Label="Png" />
                                    <input:StandardUICommand
                                        x:Key="ImageExportJpegCommand"
                                        Command="{Binding ImageExportJpegCommand}"
                                        Label="Jpeg" />
                                    <input:StandardUICommand
                                        x:Key="ImageExportWebpCommand"
                                        Command="{Binding ImageExportWebpCommand}"
                                        Label="Webp" />
                                </ItemsRepeater.Resources>

                                <ItemsRepeater.Layout>
                                    <!--<WrapLayout HorizontalSpacing="2" VerticalSpacing="2" />-->
                                    <UniformGridLayout
                                        MinColumnSpacing="2"
                                        MinRowSpacing="2"
                                        Orientation="Horizontal" />
                                </ItemsRepeater.Layout>
                                <ItemsRepeater.ItemTemplate>
                                    <DataTemplate DataType="{x:Type dbModels:LocalImageFile}">
                                        <Button
                                            Padding="4"
                                            Classes="transparent-full"
                                            Command="{StaticResource ImageClickCommand}"
                                            CommandParameter="{Binding $self.DataContext}"
                                            CornerRadius="8"
                                            HotKey="{x:Null}"
                                            ToolTip.Placement="LeftEdgeAlignedTop">

                                            <Interaction.Behaviors>
                                                <BehaviorCollection>
                                                    <ContextDragBehavior HorizontalDragThreshold="6" VerticalDragThreshold="6" />
                                                </BehaviorCollection>
                                            </Interaction.Behaviors>

                                            <Button.ContextFlyout>
                                                <ui:FAMenuFlyout>
                                                    <ui:MenuFlyoutItem
                                                        Command="{StaticResource ImageDeleteCommand}"
                                                        CommandParameter="{Binding $self.DataContext}"
                                                        HotKey="{x:Null}" />
                                                    <ui:MenuFlyoutItem
                                                        Command="{StaticResource ImageCopyCommand}"
                                                        CommandParameter="{Binding $self.DataContext}"
                                                        HotKey="{x:Null}" />

                                                    <ui:MenuFlyoutSeparator />

                                                    <ui:MenuFlyoutItem
                                                        Command="{StaticResource ImageOpenCommand}"
                                                        CommandParameter="{Binding $self.DataContext}"
                                                        HotKey="{x:Null}" />
                                                    <ui:MenuFlyoutSubItem IconSource="Share" Text="Export">
                                                        <ui:MenuFlyoutItem
                                                            Command="{StaticResource ImageExportPngWithMetadataCommand}"
                                                            CommandParameter="{Binding $self.DataContext}"
                                                            HotKey="{x:Null}" />
                                                        <ui:MenuFlyoutItem
                                                            Command="{StaticResource ImageExportPngCommand}"
                                                            CommandParameter="{Binding $self.DataContext}"
                                                            HotKey="{x:Null}" />
                                                        <ui:MenuFlyoutItem
                                                            Command="{StaticResource ImageExportJpegCommand}"
                                                            CommandParameter="{Binding $self.DataContext}"
                                                            HotKey="{x:Null}" />
                                                        <ui:MenuFlyoutItem
                                                            Command="{StaticResource ImageExportWebpCommand}"
                                                            CommandParameter="{Binding $self.DataContext}"
                                                            HotKey="{x:Null}" />
                                                    </ui:MenuFlyoutSubItem>
                                                </ui:FAMenuFlyout>
                                            </Button.ContextFlyout>

                                            <ToolTip.Tip>
                                                <StackPanel Spacing="4">
                                                    <StackPanel.Styles>
                                                        <Style Selector="StackPanel > TextBlock">
                                                            <Setter Property="Theme" Value="{DynamicResource BodyTextBlockStyle}"/>
                                                        </Style>
                                                        <Style Selector="SelectableTextBlock">
                                                            <Setter Property="FontSize" Value="13"/>
                                                            <Setter Property="FontFamily" Value="Cascadia Code,Consolas,Menlo,Monospace"/>
                                                        </Style>
                                                        <Style Selector="controls|Card">
                                                            <Setter Property="Padding" Value="4,4" />
                                                        </Style>
                                                    </StackPanel.Styles>
                                                    
                                                    <TextBlock Text="{Binding FileName}" Theme="{DynamicResource BodyStrongTextBlockStyle}" />

                                                    <controls:Card>
                                                        <SelectableTextBlock Text="{Binding GenerationParameters.PositivePrompt, FallbackValue=''}" />
                                                    </controls:Card>

                                                    <controls:Card>
                                                        <SelectableTextBlock Text="{Binding GenerationParameters.NegativePrompt, FallbackValue=''}" />
                                                    </controls:Card>

                                                    <TextBlock Text="{Binding GenerationParameters.ModelName, FallbackValue=''}" />
                                                    <TextBlock Text="{Binding GenerationParameters.Sampler, FallbackValue=''}" />
                                                    <TextBlock Text="{Binding GenerationParameters.Seed, FallbackValue=''}" />
                                                </StackPanel>
                                            </ToolTip.Tip>

                                            <Border ClipToBounds="True" CornerRadius="8">
                                                <Grid RowDefinitions="*,Auto">
                                                    <controls:BetterAdvancedImage
                                                        Width="{Binding $parent[ItemsRepeater].((vmInference:ImageFolderCardViewModel)DataContext).ImageSize.Width}"
                                                        Height="{Binding $parent[ItemsRepeater].((vmInference:ImageFolderCardViewModel)DataContext).ImageSize.Height}"
                                                        Source="{Binding AbsolutePath}"
                                                        Stretch="UniformToFill"
                                                        StretchDirection="Both" />

                                                    <Border
                                                        Grid.Row="1"
                                                        MinHeight="20"
                                                        Width="{Binding $parent[ItemsRepeater].((vmInference:ImageFolderCardViewModel)DataContext).ImageSize.Width}"
                                                        Padding="4,0,0,0"
                                                        VerticalAlignment="Bottom"
                                                        Classes="theme-dark"
                                                        Opacity="0.9">
                                                        <TextBlock
                                                            VerticalAlignment="Center"
                                                            FontSize="12"
                                                            Text="{Binding FileNameWithoutExtension}"
                                                            TextAlignment="Center"
                                                            TextTrimming="CharacterEllipsis" />
                                                    </Border>
                                                </Grid>
                                            </Border>
                                        </Button>
                                    </DataTemplate>
                                </ItemsRepeater.ItemTemplate>
                            </ItemsRepeater>
                        </scroll:BetterScrollViewer>
                    </Grid>
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
</ResourceDictionary>