StabilityMatrix/StabilityMatrix.Avalonia/Controls/SelectImageCard.axaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:ui="using:FluentAvalonia.UI.Controls"
        xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
        xmlns:mocks="using:StabilityMatrix.Avalonia.DesignData"
        xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
        x:DataType="vmInference:SelectImageCardViewModel">
    
    <Design.PreviewWith>
        <Panel Width="600" Height="500">
            <Grid ColumnDefinitions="*,*" MaxHeight="400">
                <controls:SelectImageCard
                    Margin="4" 
                    DataContext="{x:Static mocks:DesignData.SelectImageCardViewModel}" />
                <controls:SelectImageCard
                    Grid.Column="1"
                    Margin="4" 
                    DataContext="{x:Static mocks:DesignData.SelectImageCardViewModel_WithImage}" />
            </Grid>
        </Panel>
    </Design.PreviewWith>
    
    <Style Selector="controls|SelectImageCard">
        <!-- Set Defaults -->
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card 
                    Padding="12" 
                    VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                    
                    <!-- Background frame -->
                    <ExperimentalAcrylicBorder
                        VerticalAlignment="Stretch"
                        Material="{StaticResource ThemeDarkAcrylicMaterial}"
                        CornerRadius="4">
                        <Panel>
                            <!-- Image -->
                            <controls:BetterAdvancedImage
                                CornerRadius="4"
                                VerticalAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                CurrentImage="{Binding CurrentBitmap, Mode=OneWayToSource}"
                                IsVisible="{Binding !IsSelectionAvailable}"
                                Source="{Binding ImageSource}"/>
                            
                            <!-- Selection Prompt -->
                            <controls:LineDashFrame
                                IsVisible="{Binding IsSelectionAvailable}"
                                Stroke="DimGray"
                                StrokeThickness="3"
                                StrokeDashLine="6"
                                StrokeDashSpace="6">
                                
                                <Grid 
                                    Cursor="Hand"
                                    RowDefinitions="*,Auto,Auto"
                                    VerticalAlignment="Center" 
                                    HorizontalAlignment="Center">
                                    
                                    <ui:SymbolIcon
                                        FontSize="28"
                                        Symbol="ImageCopyFilled"/>
                                    <TextBlock
                                        Grid.Row="1"
                                        Text="Drag an image here"
                                        Foreground="DarkGray">
                                    </TextBlock>

                                    <StackPanel
                                        Grid.Row="2"
                                        Margin="0,4,0,0"
                                        HorizontalAlignment="Center"
                                        Orientation="Horizontal">
                                        
                                        <TextBlock
                                            VerticalAlignment="Center"
                                            Foreground="DarkGray"
                                            Text="or"/>
                                        
                                        <Button
                                            Content="Browse"
                                            Margin="4,0"
                                            Padding="4"/>
                                    </StackPanel>
                                </Grid>
                            </controls:LineDashFrame>
                        </Panel>
                    </ExperimentalAcrylicBorder>
                    
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>