StabilityMatrix/StabilityMatrix.Avalonia/Controls/Inference/ModelCard.axaml

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
    xmlns:inference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
    xmlns:sg="clr-namespace:SpacedGridControl.Avalonia;assembly=SpacedGridControl.Avalonia"
    x:DataType="inference:ModelCardViewModel">
    <Design.PreviewWith>
        <Panel Width="400" Height="200">
            <StackPanel Width="300" VerticalAlignment="Center">
                <controls:ModelCard DataContext="{x:Static mocks:DesignData.ModelCardViewModel}" />
                <controls:ModelCard DataContext="{x:Static mocks:DesignData.ImgToVidModelCardViewModel}" />
            </StackPanel>
        </Panel>
    </Design.PreviewWith>

    <Style Selector="controls|ModelCard">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card Padding="12">
                    <sg:SpacedGrid
                        ColumnSpacing="8"
                        RowSpacing="0"
                        ColumnDefinitions="Auto,*,Auto" 
                        RowDefinitions="*,*,*,*">
                        <!--  Model  -->
                        <TextBlock
                            Grid.Column="0"
                            VerticalAlignment="Center"
                            Text="{x:Static lang:Resources.Label_Model}"
                            TextAlignment="Left" />
                        
                        <controls:BetterComboBox
                            Grid.Row="0"
                            Grid.Column="1"
                            Padding="8,6,4,6"
                            Theme="{StaticResource  BetterComboBoxHybridModelTheme}"
                            HorizontalAlignment="Stretch"
                            ItemsSource="{Binding ClientManager.Models}"
                            SelectedItem="{Binding SelectedModel}"/>

                        <Button
                            Grid.Row="0"
                            Grid.Column="2"
                            VerticalAlignment="Stretch"
                            HorizontalAlignment="Stretch"
                            Margin="0,0,0,0">
                            <ui:SymbolIcon FontSize="16" Symbol="Setting" />
                            <Button.Flyout>
                                <ui:FAMenuFlyout Placement="BottomEdgeAlignedLeft">
                                    <ui:ToggleMenuFlyoutItem IsChecked="{Binding IsRefinerSelectionEnabled}" Text="{x:Static lang:Resources.Label_Refiner}" />
                                    <ui:ToggleMenuFlyoutItem IsChecked="{Binding IsVaeSelectionEnabled}" Text="{x:Static lang:Resources.Label_VAE}" />
                                    <ui:ToggleMenuFlyoutItem IsChecked="{Binding IsClipSkipEnabled}" Text="{x:Static lang:Resources.Label_CLIPSkip}" />
                                </ui:FAMenuFlyout>
                            </Button.Flyout>
                        </Button>

                        <!--  Refiner  -->
                        <TextBlock
                            Grid.Row="1"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsRefinerSelectionEnabled}"
                            Text="{x:Static lang:Resources.Label_Refiner}"
                            TextAlignment="Left" />

                        <controls:BetterComboBox
                            Grid.Row="1"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="0,8,0,0"
                            Padding="8,6,4,6"
                            IsVisible="{Binding IsRefinerSelectionEnabled}"
                            Theme="{StaticResource  BetterComboBoxHybridModelTheme}"
                            HorizontalAlignment="Stretch"
                            ItemsSource="{Binding ClientManager.Models}"
                            SelectedItem="{Binding SelectedRefiner}"/>
                        
                        <!--  VAE  -->
                        <TextBlock
                            Grid.Row="2"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsVaeSelectionEnabled}"
                            Text="{x:Static lang:Resources.Label_VAE}"
                            TextAlignment="Left" />

                        <ui:FAComboBox
                            Grid.Row="2"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="0,8,0,0"
                            HorizontalAlignment="Stretch"
                            DisplayMemberBinding="{Binding ShortDisplayName}"
                            IsTextSearchEnabled="True"
                            IsVisible="{Binding IsVaeSelectionEnabled}"
                            ItemsSource="{Binding ClientManager.VaeModels}"
                            SelectedItem="{Binding SelectedVae}" />
                        
                        <!--  CLIP Skip  -->
                        <TextBlock
                            Grid.Row="3"
                            Grid.Column="0"
                            Margin="0,8,0,0"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsClipSkipEnabled}"
                            Text="{x:Static lang:Resources.Label_CLIPSkip}"
                            TextAlignment="Left" />

                        <NumericUpDown
                            Grid.Row="3"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            IsVisible="{Binding IsClipSkipEnabled}"
                            Watermark="1"
                            HorizontalAlignment="Stretch"
                            Margin="0,8,0,0"
                            Minimum="1"
                            Maximum="24"
                            Increment="1"
                            ParsingNumberStyle="Integer"
                            Value="{Binding ClipSkip, Converter={x:Static converters:NullableDefaultNumericConverters.IntToDecimal}}"
                            ClipValueToMinMax="True"/>

                    </sg:SpacedGrid>
                </controls:Card>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>