StabilityMatrix/StabilityMatrix.Avalonia/Views/OutputsPage.axaml

<controls:UserControlBase
    x:Class="StabilityMatrix.Avalonia.Views.OutputsPage"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
    xmlns:avaloniaEdit="clr-namespace:AvaloniaEdit;assembly=AvaloniaEdit"
    xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:fluentAvalonia="clr-namespace:FluentIcons.Avalonia.Fluent;assembly=FluentIcons.Avalonia.Fluent"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:models1="clr-namespace:StabilityMatrix.Avalonia.Models"
    xmlns:outputsPage="clr-namespace:StabilityMatrix.Avalonia.ViewModels.OutputsPage"
    xmlns:scroll="clr-namespace:StabilityMatrix.Avalonia.Controls.Scroll"
    xmlns:selectableImageCard="clr-namespace:StabilityMatrix.Avalonia.Controls.SelectableImageCard"
    xmlns:ui="using:FluentAvalonia.UI.Controls"
    xmlns:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
    xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
    xmlns:system="clr-namespace:System;assembly=System.Runtime"
    d:DataContext="{x:Static mocks:DesignData.OutputsPageViewModel}"
    d:DesignHeight="650"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="vm:OutputsPageViewModel"
    Focusable="True"
    mc:Ignorable="d">
    
    <controls:UserControlBase.Resources>
        <converters:BooleanChoiceMultiConverter x:Key="BooleanChoiceMultiConverter" />
        <system:String x:Key="LoadingClass">loading</system:String>
        <system:String x:Key="EmptyClass"> </system:String>
    </controls:UserControlBase.Resources>
    
    <Grid Margin="16" RowDefinitions="Auto,*">
        <Grid
            Grid.Row="0"
            Margin="0,0,0,16"
            ColumnDefinitions="Auto,Auto,*,Auto"
            RowDefinitions="Auto,*">
            
            <Grid.Styles>
                <Style Selector="TextBox">
                    <Setter Property="MinHeight" Value="40" />
                </Style>
                <Style Selector="ComboBox">
                    <Setter Property="MinHeight" Value="40" />
                </Style>
            </Grid.Styles>
            
            <TextBox
                Grid.Row="1"
                Grid.Column="2"
                MinWidth="150"
                Margin="4,0"
                VerticalAlignment="Center"
                VerticalContentAlignment="Center"
                Text="{Binding SearchQuery, Mode=TwoWay}"
                Watermark="{x:Static lang:Resources.Action_Search}"
                KeyDown="InputElement_OnKeyDown">
                <TextBox.InnerRightContent>
                    <Grid>
                        <Button Classes="transparent-full"
                                IsVisible="{Binding SearchQuery.Length}"
                                Command="{Binding ClearSearchQuery}">
                            <ui:SymbolIcon Symbol="Cancel" />
                        </Button>
                        <ui:SymbolIcon
                            IsVisible="{Binding !SearchQuery.Length}"
                            Margin="0,0,10,0"
                            FontSize="16"
                            Symbol="Find" />
                    </Grid>
                </TextBox.InnerRightContent>
            </TextBox>

            <TextBlock
                Grid.Row="0"
                Grid.Column="3"
                Margin="4"
                IsVisible="{Binding !!NumItemsSelected}"
                Text="{Binding NumImagesSelected}" />

            <ui:CommandBar
                Grid.Row="1"
                Grid.Column="3"
                Margin="8,0,0,0"
                VerticalAlignment="Center"
                VerticalContentAlignment="Center"
                DefaultLabelPosition="Right">

                <ui:CommandBar.PrimaryCommands>
                    <ui:CommandBarButton
                        IsEnabled="{Binding !!NumItemsSelected}"
                        Command="{Binding DeleteAllSelected}"
                        IconSource="Delete" />
                    <ui:CommandBarSeparator />
                    <ui:CommandBarButton
                        Command="{Binding SelectAll}"
                        IconSource="SelectAll"
                        IsEnabled="{Binding !IsLoading}"
                        Label="{x:Static lang:Resources.Action_SelectAll}" />
                    <ui:CommandBarButton
                        Command="{Binding ClearSelection}"
                        IconSource="ClearSelection"
                        IsEnabled="{Binding !!NumItemsSelected}"
                        Label="{x:Static lang:Resources.Action_ClearSelection}" />
                    <ui:CommandBarSeparator />
                    <ui:CommandBarButton 
                        IconSource="Refresh"
                        Classes.loading="{Binding IsLoading}"
                        IsEnabled="{Binding !IsLoading}"
                        Command="{Binding Refresh}"
                        Label="{x:Static lang:Resources.Action_Refresh}">
                        <ui:CommandBarButton.Styles>
                            <Style Selector="ui|CommandBarButton:disabled.loading">
                                <Style Selector="^ ui|SymbolIcon">
                                    <Style.Animations>
                                        <Animation Duration="0:0:2" IterationCount="INFINITE">
                                            <KeyFrame Cue="0%">
                                                <Setter Property="RotateTransform.Angle" Value="0"/>
                                            </KeyFrame>
                                            <KeyFrame Cue="100%">
                                                <Setter Property="RotateTransform.Angle" Value="360"/>
                                            </KeyFrame>
                                        </Animation>
                                    </Style.Animations>
                                </Style>
                            </Style>
                        </ui:CommandBarButton.Styles>
                    </ui:CommandBarButton>
                    <ui:CommandBarToggleButton
                        IconSource="List"
                        IsChecked="{Binding ShowFolders}"
                        Label="Show Folders"/>
                </ui:CommandBar.PrimaryCommands>

                <ui:CommandBar.SecondaryCommands>
                    <ui:CommandBarButton
                        Command="{Binding ConsolidateImages}"
                        IconSource="MoveToFolder"
                        Label="{x:Static lang:Resources.Action_Consolidate}" />
                </ui:CommandBar.SecondaryCommands>
            </ui:CommandBar>
        </Grid>

        <scroll:BetterScrollViewer Grid.Row="1"
                                   x:Name="MainScrollViewer"
                                   PointerWheelChanged="ScrollViewer_MouseWheelChanged">
            <ItemsRepeater
                x:Name="ImageRepeater"
                VerticalAlignment="Top"
                ItemsSource="{Binding Outputs}">
                <ItemsRepeater.Layout>
                    <WrapLayout Orientation="Horizontal" HorizontalSpacing="12" VerticalSpacing="12"/>
                </ItemsRepeater.Layout>
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate DataType="{x:Type outputsPage:OutputImageViewModel}">
                        <selectableImageCard:SelectableImageButton
                            Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).OnImageClick}"
                            CommandParameter="{Binding}"
                            ImageHeight="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).ImageSize.Height}"
                            ImageWidth="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).ImageSize.Width}"
                            IsSelected="{Binding IsSelected}"
                            Source="{Binding ImageFile.AbsolutePathUriString}">
                            <selectableImageCard:SelectableImageButton.ContextFlyout>
                                <ui:FAMenuFlyout>
                                    <ui:MenuFlyoutItem
                                        Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).CopyImage}"
                                        CommandParameter="{Binding ImageFile.AbsolutePath}"
                                        HotKey="{x:Null}"
                                        IconSource="Copy"
                                        Text="{x:Static lang:Resources.Action_Copy}" />
                                    <ui:MenuFlyoutItem
                                        Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).OpenImage}"
                                        CommandParameter="{Binding ImageFile.AbsolutePath}"
                                        HotKey="{x:Null}"
                                        IconSource="Folder"
                                        Text="{x:Static lang:Resources.Action_OpenInExplorer}" />
                                    <ui:MenuFlyoutItem
                                        Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).ShowImageDialog}"
                                        CommandParameter="{Binding}"
                                        HotKey="{x:Null}"
                                        IconSource="Image"
                                        IsVisible="{Binding !!$parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).NumItemsSelected}"
                                        Text="{x:Static lang:Resources.Action_OpenInViewer}" />
                                    <ui:MenuFlyoutItem
                                        Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).DeleteImage}"
                                        CommandParameter="{Binding}"
                                        HotKey="{x:Null}"
                                        IconSource="Delete"
                                        Text="{x:Static lang:Resources.Action_Delete}" />

                                    <ui:MenuFlyoutSeparator
                                        IsVisible="{Binding ImageFile.GenerationParameters, Converter={x:Static ObjectConverters.IsNotNull}}" />

                                    <ui:MenuFlyoutSubItem
                                        IconSource="Share"
                                        IsVisible="{Binding ImageFile.GenerationParameters, Converter={x:Static ObjectConverters.IsNotNull}}"
                                        Text="{x:Static lang:Resources.Action_SendToInference}">
                                        <ui:MenuFlyoutItem
                                            Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).SendToTextToImage}"
                                            CommandParameter="{Binding}"
                                            HotKey="{x:Null}"
                                            IconSource="FullScreenMaximize"
                                            Text="{x:Static lang:Resources.Label_TextToImage}" />
                                        <ui:MenuFlyoutItem
                                            Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).SendToImageToImage}"
                                            CommandParameter="{Binding}"
                                            HotKey="{x:Null}"
                                            IconSource="ImageCopy"
                                            Text="{x:Static lang:Resources.Label_ImageToImage}" />
                                        <ui:MenuFlyoutItem
                                            Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).SendToUpscale}"
                                            CommandParameter="{Binding}"
                                            HotKey="{x:Null}"
                                            Text="{x:Static lang:Resources.Label_Upscale}">
                                            <ui:MenuFlyoutItem.IconSource>
                                                <fluentAvalonia:SymbolIconSource FontSize="10" Symbol="ResizeImage" />
                                            </ui:MenuFlyoutItem.IconSource>
                                        </ui:MenuFlyoutItem>
                                        <ui:MenuFlyoutItem
                                            Command="{Binding $parent[ItemsRepeater].((vm:OutputsPageViewModel)DataContext).SendToImageToVideo}"
                                            CommandParameter="{Binding}"
                                            HotKey="{x:Null}"
                                            IconSource="Video"
                                            Text="{x:Static lang:Resources.Label_ImageToVideo}" />
                                    </ui:MenuFlyoutSubItem>
                                </ui:FAMenuFlyout>
                            </selectableImageCard:SelectableImageButton.ContextFlyout>
                        </selectableImageCard:SelectableImageButton>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </scroll:BetterScrollViewer>
    </Grid>
</controls:UserControlBase>