StabilityMatrix/StabilityMatrix.Avalonia/Controls/AdvancedImageBoxView.axaml

<UserControl
    x:Class="StabilityMatrix.Avalonia.Controls.AdvancedImageBoxView"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:models="clr-namespace:StabilityMatrix.Avalonia.Models"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:gif="clr-namespace:Avalonia.Gif;assembly=Avalonia.Gif"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    d:DataContext="{x:Static mocks:DesignData.SampleImageSource}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="models:ImageSource"
    mc:Ignorable="d">
    <Grid>
        <!-- Tag is not used but sets TemplateKey which is used to select the DataTemplate later -->
        <ContentPresenter 
            Tag="{Binding TemplateKeyAsync^}"
            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
                            CornerRadius="4"
                            Image="{Binding BitmapAsync^}"
                            SizeMode="Fit">
                            <controls:AdvancedImageBox.ContextFlyout>
                                <ui:FAMenuFlyout>
                                    <ui:MenuFlyoutItem
                                        Command="{x:Static controls:AdvancedImageBoxView.FlyoutCopyCommand}"
                                        CommandParameter="{Binding}"
                                        HotKey="Ctrl+C"
                                        IconSource="Copy"
                                        Text="{x:Static lang:Resources.Action_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>

        <!-- Label pill card -->
        <Border
            IsVisible="{Binding Label, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
            Grid.Row="0"
            Margin="4"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            BoxShadow="inset 1.2 0 10 1.8 #66000000"
            CornerRadius="16">
            <Border.Resources>
                <DropShadowEffect
                    x:Key="TextDropShadowEffect"
                    BlurRadius="12"
                    Opacity="0.9"
                    Color="#FF000000" />
                <DropShadowEffect
                    x:Key="ImageDropShadowEffect"
                    BlurRadius="12"
                    Opacity="0.2"
                    Color="#FF000000" />
            </Border.Resources>
            <Button
                Padding="10,4"
                Classes="transparent"
                CornerRadius="16">
                <StackPanel Orientation="Horizontal" Spacing="6">
                    <TextBlock
                        VerticalAlignment="Center"
                        Effect="{StaticResource TextDropShadowEffect}"
                        Text="{Binding Label}" />
                </StackPanel>
            </Button>
        </Border>
    </Grid>
</UserControl>