StabilityMatrix/StabilityMatrix.Avalonia/Views/InstalledWorkflowsPage.axaml

<controls:UserControlBase xmlns="https://github.com/avaloniaui"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                          xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
                          xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
                          xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
                          xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
                          xmlns:openArt="clr-namespace:StabilityMatrix.Core.Models.Api.OpenArt"
                          xmlns:controls1="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
                          xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
                          xmlns:avalonia="https://github.com/projektanker/icons.avalonia"
                          mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
                          d:DataContext="{x:Static designData:DesignData.InstalledWorkflowsViewModel}"
                          x:DataType="viewModels:InstalledWorkflowsViewModel"
                          x:Class="StabilityMatrix.Avalonia.Views.InstalledWorkflowsPage">
    <UserControl.Styles>
        <Style Selector="Border#HoverBorder">
            <Setter Property="Transitions">
                <Transitions>
                    <BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.237" />
                </Transitions>
            </Setter>

            <Style Selector="^ asyncImageLoader|AdvancedImage">
                <Setter Property="Transitions">
                    <Transitions>
                        <TransformOperationsTransition Property="RenderTransform"
                                                       Duration="0:0:0.237">
                            <TransformOperationsTransition.Easing>
                                <QuadraticEaseInOut />
                            </TransformOperationsTransition.Easing>
                        </TransformOperationsTransition>
                    </Transitions>
                </Setter>
            </Style>

            <Style Selector="^:pointerover">
                <Setter Property="BoxShadow" Value="0 0 40 0 #60000000" />
                <Setter Property="Cursor" Value="Hand" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="12" />
                    <Setter Property="RenderTransform" Value="scale(1.03, 1.03)" />
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#CC000000" />
                </Style>
            </Style>

            <Style Selector="^:not(:pointerover)">
                <Setter Property="BoxShadow" Value="0 0 20 0 #60000000" />
                <Setter Property="Cursor" Value="Arrow" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="8" />
                    <Setter Property="RenderTransform" Value="scale(1, 1)" />
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#99000000" />
                </Style>
            </Style>
        </Style>
    </UserControl.Styles>

    <Grid RowDefinitions="Auto, *">
        <controls1:CommandBar Grid.Row="0" Grid.Column="0"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Left"
                              VerticalContentAlignment="Center"
                              DefaultLabelPosition="Right">
            <controls1:CommandBar.PrimaryCommands>
                <controls1:CommandBarButton
                    IconSource="Refresh"
                    VerticalAlignment="Center"
                    Label="{x:Static lang:Resources.Action_Refresh}"
                    Command="{Binding LoadInstalledWorkflowsCommand}" />
                
                <controls1:CommandBarSeparator />
                
                <controls1:CommandBarElementContainer>
                    <StackPanel Orientation="Horizontal">
                        <avalonia:Icon FontSize="18"
                                       Value="fa-solid fa-info"
                                       Margin="8,0"/>
                        <TextBlock Text="Drag &amp; drop one of the cards below into ComfyUI to load the workflow"
                                   VerticalAlignment="Center"/>
                    </StackPanel>
                </controls1:CommandBarElementContainer>
            </controls1:CommandBar.PrimaryCommands>
        </controls1:CommandBar>

        <ScrollViewer Grid.Column="0"
                      Grid.Row="1">
            <ItemsRepeater ItemsSource="{Binding DisplayedWorkflows}">
                <ItemsRepeater.Layout>
                    <!-- <UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4"/> -->
                    <UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4" />
                </ItemsRepeater.Layout>
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate x:DataType="{x:Type openArt:OpenArtMetadata}">
                        <Border
                            Name="HoverBorder"
                            Padding="0"
                            BorderThickness="0"
                            Margin="8"
                            ClipToBounds="True"
                            CornerRadius="8">
                            <Interaction.Behaviors>
                                <BehaviorCollection>
                                    <controls:BetterContextDragBehavior
                                        Context="{Binding FilePath}"
                                        DataFormat="Files"
                                        HorizontalDragThreshold="6"
                                        VerticalDragThreshold="6" />
                                </BehaviorCollection>
                            </Interaction.Behaviors>
                            <Button
                                Name="ModelCard"
                                Classes="transparent-full"
                                Padding="0"
                                BorderThickness="0"
                                VerticalContentAlignment="Top"
                                CornerRadius="8">
                                <Grid RowDefinitions="*, Auto">
                                    <controls:BetterAdvancedImage
                                        Grid.Row="0"
                                        Grid.RowSpan="2"
                                        CornerRadius="8"
                                        Width="330"
                                        Height="400"
                                        Source="{Binding FirstThumbnail}"
                                        IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
                                        Stretch="UniformToFill"
                                        StretchDirection="Both" />
                                    
                                    <avalonia:Icon Grid.Row="0"
                                        Grid.RowSpan="2"
                                        CornerRadius="8"
                                        Width="330"
                                        Height="400"
                                        FontSize="100"
                                        IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}"
                                        Value="fa-regular fa-file-code"/>

                                    <!-- Username pill card -->
                                    <Border
                                        BoxShadow="inset 1.2 0 80 1.8 #66000000"
                                        CornerRadius="16"
                                        Margin="4"
                                        Grid.Row="0"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Bottom">
                                        <Border.Resources>
                                            <DropShadowEffect
                                                x:Key="TextDropShadowEffect"
                                                BlurRadius="12"
                                                Color="#FF000000"
                                                Opacity="0.9" />
                                        </Border.Resources>
                                        <TextBlock
                                            VerticalAlignment="Center"
                                            Effect="{StaticResource TextDropShadowEffect}"
                                            Text="{Binding Creator}" />
                                    </Border>

                                    <Border
                                        Name="ModelCardBottom"
                                        Grid.Row="1">
                                        <TextBlock
                                            Padding="16"
                                            Margin="8,0,8,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            FontWeight="SemiBold"
                                            Foreground="{DynamicResource TextControlForeground}"
                                            LetterSpacing="0.33"
                                            TextWrapping="Wrap"
                                            Text="{Binding Name}"
                                            ToolTip.Tip="{Binding Name}" />
                                    </Border>
                                </Grid>
                            </Button>
                        </Border>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </ScrollViewer>
    </Grid>
</controls:UserControlBase>