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: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: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"
    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">
    <Grid Margin="16" RowDefinitions="Auto,*"
          ColumnDefinitions="Auto, *">

        <TreeView Grid.Row="1"
                  Grid.Column="0"
                  IsVisible="{Binding ShowFolders}"
                  Margin="0,0,12,0"
                  ItemsSource="{Binding Categories}"
                  SelectedItem="{Binding SelectedCategory}">
            <TreeView.ItemTemplate>
                <TreeDataTemplate ItemsSource="{Binding SubDirectories}">
                    <TextBlock Text="{Binding Name}"
                               MaxWidth="250"
                               TextWrapping="NoWrap"
                               TextTrimming="CharacterEllipsis"
                               ToolTip.Tip="{Binding Name}"/>
                </TreeDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

        <Grid Grid.Column="0"
              Grid.ColumnSpan="2"
              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>

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

                <ui:CommandBar.PrimaryCommands>
                    <ui:CommandBarElementContainer>
                        <TextBlock Text="{Binding NumImagesSelected}"
                                   IsVisible="{Binding NumItemsSelected}"
                                   VerticalAlignment="Center"/>
                    </ui:CommandBarElementContainer>
                    <ui:CommandBarButton
                        IsEnabled="{Binding NumItemsSelected}"
                        Command="{Binding DeleteAllSelected}"
                        IconSource="Delete" />
                    <ui:CommandBarSeparator />
                    <ui:CommandBarButton
                        Command="{Binding SelectAll}"
                        IsEnabled="{Binding !IsLoading}"
                        IconSource="SelectAll"
                        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}"
                        Command="{Binding Refresh}"
                        IsEnabled="{Binding !IsLoading}"
                        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>
        
        <controls:ProgressRing Grid.Row="1"
                               Grid.Column="1"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Width="200"
                               Height="200"
                               IsIndeterminate="True"
                               IsVisible="{Binding IsChangingCategory}"/>

        <scroll:BetterScrollViewer Grid.Column="1"
                                   Grid.Row="1" PointerWheelChanged="ScrollViewer_MouseWheelChanged">
            <ItemsRepeater
                x:Name="ImageRepeater"
                VerticalAlignment="Top"
                HorizontalAlignment="Center"
                ItemsSource="{Binding Outputs}">
                <ItemsRepeater.Layout>
                    <UniformGridLayout MinColumnSpacing="8" MinRowSpacing="8" />
                </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.AbsolutePath}">
                            <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>