StabilityMatrix/StabilityMatrix.Avalonia/Views/Dialogs/ImageViewerDialog.axaml

<controls:UserControlBase
    Focusable="True"
    x:Class="StabilityMatrix.Avalonia.Views.Dialogs.ImageViewerDialog"
    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:icons="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:vmDialogs="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Dialogs"
    xmlns:models="clr-namespace:StabilityMatrix.Avalonia.Models"
    xmlns:gif="clr-namespace:Avalonia.Gif;assembly=Avalonia.Gif"
    xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    d:DataContext="{x:Static mocks:DesignData.ImageViewerViewModel}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="vmDialogs:ImageViewerViewModel"
    mc:Ignorable="d">

    <controls:UserControlBase.KeyBindings>
        <KeyBinding Command="{Binding NavigateNextCommand}" Gesture="Down" />
        <KeyBinding Command="{Binding NavigateNextCommand}" Gesture="Right" />
        <KeyBinding Command="{Binding NavigatePreviousCommand}" Gesture="Up" />
        <KeyBinding Command="{Binding NavigatePreviousCommand}" Gesture="Left" />
    </controls:UserControlBase.KeyBindings>

    <!--<controls:UserControlBase.ContextFlyout>
        <controls:BetterFlyout
            Placement="Left">
            <StackPanel>
                <TextBlock Text="{Binding LocalImageFile.GenerationParameters.PositivePrompt}"/>
                <TextBlock Text="{Binding LocalImageFile.GenerationParameters.NegativePrompt}"/>
            </StackPanel>
        </controls:BetterFlyout>
    </controls:UserControlBase.ContextFlyout>-->
    
    <controls:UserControlBase.Styles>
        <Style Selector="SelectableTextBlock">
            <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
            <Setter Property="SelectionBrush" Value="{DynamicResource CompletionSelectionForegroundBrush}"/>
        </Style>
    </controls:UserControlBase.Styles>

    <Grid
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        RowDefinitions="*,Auto">
        <Grid.Resources>
            <input:StandardUICommand 
                x:Key="CopyImageCommand" 
                Command="{Binding CopyImageCommand}"/>
        </Grid.Resources>

        <!-- Tag is not used but sets TemplateKey which is used to select the DataTemplate later -->
        <ContentPresenter Grid.Row="0"
                          Tag="{Binding TemplateKeyAsync^}"
                          DataContext="{Binding ImageSource}"
                          Content="{Binding }">
            <ContentPresenter.ContentTemplate>
                <controls:DataTemplateSelector x:TypeArguments="models:ImageSourceTemplateType">
                    <DataTemplate x:Key="{x:Static models:ImageSourceTemplateType.WebpAnimation}" DataType="models:ImageSource">
                        <gif:GifImage
                            Stretch="Uniform"
                            SourceUri="{Binding LocalFile.FullPath}"/>
                    </DataTemplate>
                    
                    <DataTemplate x:Key="{x:Static models:ImageSourceTemplateType.Image}" DataType="models:ImageSource">
                        <controls:AdvancedImageBox
                            Name="ImageBox"
                            Focusable="False"
                            CornerRadius="4"
                            Image="{Binding BitmapAsync^}"
                            SizeMode="Fit">
                            <controls:AdvancedImageBox.ContextFlyout>
                                <ui:FAMenuFlyout>
                                    <ui:MenuFlyoutItem
                                        x:Name="CopyMenuItem"
                                        Command="{StaticResource CopyImageCommand}"
                                        CommandParameter="{Binding $parent[controls:AdvancedImageBox].Image}"
                                        HotKey="Ctrl+C"
                                        IconSource="Copy"
                                        IsEnabled="{OnPlatform Windows=True, Default=False}"
                                        Text="Copy" />
                                </ui:FAMenuFlyout>
                            </controls:AdvancedImageBox.ContextFlyout>
                        </controls:AdvancedImageBox>
                    </DataTemplate>
                    
                    <DataTemplate x:Key="{x:Static models:ImageSourceTemplateType.Default}" DataType="models:ImageSource">
                        <TextBlock 
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="Unsupported Format"/>
                    </DataTemplate>
                </controls:DataTemplateSelector>
            </ContentPresenter.ContentTemplate>
        </ContentPresenter>

        <!--  Info button  -->
        <Grid
            Grid.Row="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">
            <Button
                Name="InfoButton"
                Grid.Row="0"
                Margin="8,8,0,0"
                Padding="8"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                icons:Attached.Icon="fa-solid fa-info"
                Classes="transparent-full"
                IsEnabled="{Binding HasGenerationParameters}"
                Tapped="InfoButton_OnTapped" />
        </Grid>


        <ui:TeachingTip
            Name="InfoTeachingTip"
            Grid.Row="0"
            MinWidth="100"
            PreferredPlacement="LeftBottom"
            PlacementMargin="16,0,16,0"
            TailVisibility="Collapsed"
            Target="{Binding #InfoButton}">
            <StackPanel Spacing="8" Margin="4,0" DataContext="{Binding LocalImageFile.GenerationParameters}">
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Prompt" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding PositivePrompt}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Negative Prompt" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding NegativePrompt}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Model" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding ModelName}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Sampler" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding Sampler}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Steps" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding Steps}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="{x:Static lang:Resources.Label_CFGScale}" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding CfgScale}" />
                </Grid>
                
                <Grid RowDefinitions="Auto,*">
                    <TextBlock Text="Seed" Theme="{DynamicResource BodyStrongTextBlockStyle}" />
                    <SelectableTextBlock
                        Grid.Row="1"
                        Text="{Binding Seed}" />
                </Grid>
            </StackPanel>

        </ui:TeachingTip>

        <!--  Close button  -->
        <Grid
            Grid.Row="0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top">
            <Button
                Margin="0,8,8,0"
                Padding="8"
                icons:Attached.Icon="fa-solid fa-xmark"
                Classes="transparent-full"
                Command="{Binding OnCloseButtonClick}" />
        </Grid>

        <!--  Footer  -->
        <!--<Border
            Grid.Row="1"
            MinHeight="20"
            Background="Transparent"
            VerticalAlignment="Bottom"
            Opacity="0.9">
            <UniformGrid Margin="4" Columns="3">
                <TextBlock
                    HorizontalAlignment="Left"
                    FontSize="13"
                    Text="{Binding ImageSizeText}" />
                <TextBlock
                    HorizontalAlignment="Center"
                    FontSize="13"
                    Text="{Binding FileNameText}"
                    TextAlignment="Center" />
                <TextBlock
                    HorizontalAlignment="Right"
                    FontSize="13"
                    Text="{Binding FileSizeText}" />
            </UniformGrid>
        </Border>-->
        <ExperimentalAcrylicBorder
            Grid.Row="1"
            Padding="4,0,4,0"
            VerticalAlignment="Bottom"
            Material="{StaticResource OpaqueDarkAcrylicMaterial}">
            <UniformGrid Margin="4" Columns="3">
                <TextBlock
                    HorizontalAlignment="Left"
                    FontSize="13"
                    Text="{Binding ImageSizeText}" />
                <TextBlock
                    HorizontalAlignment="Center"
                    FontSize="13"
                    Text="{Binding FileNameText}"
                    TextAlignment="Center" />
                <TextBlock
                    HorizontalAlignment="Right"
                    FontSize="13"
                    Text="{Binding FileSizeText}" />
            </UniformGrid>
        </ExperimentalAcrylicBorder>

        <!--  The preview tracker  -->
        <!--<Image
            MinHeight="100"
            MinWidth="100"
            RenderOptions.BitmapInterpolationMode="HighQuality"
            Source="{Binding #MainImageBox.TrackerImage}"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"/>-->
    </Grid>
</controls:UserControlBase>