StabilityMatrix/StabilityMatrix.Avalonia/Controls/ControlNetCard.axaml

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:StabilityMatrix.Avalonia.Controls"
    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:sg="clr-namespace:SpacedGridControl.Avalonia;assembly=SpacedGridControl.Avalonia"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:vmInference="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Inference"
    xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia"
    xmlns:fluentIcons="clr-namespace:FluentIcons.FluentAvalonia;assembly=FluentIcons.FluentAvalonia"
    x:DataType="vmInference:ControlNetCardViewModel">
    <Design.PreviewWith>
        <StackPanel Width="350" Height="400">
            <controls:ControlNetCard DataContext="{x:Static mocks:DesignData.ControlNetCardViewModel}" />
        </StackPanel>
    </Design.PreviewWith>

    <Style Selector="controls|ControlNetCard">
        <!--  Set Defaults  -->
        <Setter Property="Template">
            <ControlTemplate>
                <controls:Card Padding="12">
                    <sg:SpacedGrid
                        ColumnDefinitions="0.8*,*"
                        ColumnSpacing="8"
                        RowDefinitions="Auto,Auto,Auto,Auto,5,Auto"
                        RowSpacing="6">

                        <!--  Image Select  -->
                        <controls:SelectImageCard
                            Grid.RowSpan="4"
                            Padding="6"
                            DataContext="{Binding SelectImageCardViewModel}"
                            FontSize="13" />

                        <!--  TODO: Preprocessor Model  -->
                        <TextBlock
                            Grid.Row="0"
                            Grid.Column="1"
                            MinWidth="60"
                            Foreground="{StaticResource ThemeGreyColor}"
                            VerticalAlignment="Bottom"
                            Text="{x:Static lang:Resources.Label_Preprocessor}"
                            TextAlignment="Left" />
                        <ui:FAComboBox
                            Grid.Row="1"
                            Grid.Column="1"
                            IsEnabled="False"
                            Margin="0,0,0,4"
                            HorizontalAlignment="Stretch"
                            Theme="{StaticResource FAComboBoxHybridModelTheme}" />

                        <!--  ControlNet Model  -->
                        <TextBlock
                            Grid.Row="2"
                            Grid.Column="1"
                            MinWidth="60"
                            VerticalAlignment="Bottom"
                            Text="{x:Static lang:Resources.Label_Model}"
                            TextAlignment="Left" />
                        <ui:FAComboBox
                            x:Name="PART_ModelComboBox"
                            Grid.Row="3"
                            Grid.Column="1"
                            HorizontalAlignment="Stretch"
                            ItemsSource="{Binding ClientManager.ControlNetModels}"
                            SelectedItem="{Binding SelectedModel}"
                            ItemContainerTheme="{StaticResource FAComboBoxItemHybridModelTheme}">
                            
                            <ui:FAComboBox.Resources>
                                    <input:StandardUICommand 
                                        x:Key="RemoteDownloadCommand" 
                                        Command="{Binding RemoteDownloadCommand}"/>
                                </ui:FAComboBox.Resources>
                                
                                <ui:FAComboBox.DataTemplates>
                                    <controls:HybridModelTemplateSelector>
                                        <DataTemplate DataType="models:HybridModelFile" x:Key="{x:Static models:HybridModelType.Downloadable}">
                                            <Grid ColumnDefinitions="*,Auto">
                                                <TextBlock
                                                    Text="{Binding ShortDisplayName}"
                                                    Foreground="{DynamicResource ThemeGreyColor}"/>
                                                <Button 
                                                    Grid.Column="1" 
                                                    Classes="transparent-full"
                                                    Margin="8,0,0,0"
                                                    Padding="0">
                                                    <fluentIcons:SymbolIcon
                                                        VerticalAlignment="Center"
                                                        FontSize="18"
                                                        Foreground="{DynamicResource ThemeGreyColor}"
                                                        IsFilled="True"
                                                        Symbol="CloudArrowDown" />
                                                </Button>
                                            </Grid>
                                        </DataTemplate>
                                        <DataTemplate DataType="models:HybridModelFile" x:Key="{x:Static models:HybridModelType.None}">
                                            <TextBlock Text="{Binding ShortDisplayName}"/>
                                        </DataTemplate>
                                    </controls:HybridModelTemplateSelector>
                                </ui:FAComboBox.DataTemplates>
                            
                        </ui:FAComboBox>

                        <sg:SpacedGrid
                            RowDefinitions="Auto,Auto,Auto,Auto"
                            ColumnDefinitions="*,Auto,Auto"
                            Grid.Row="5"
                            Grid.Column="0"
                            Grid.ColumnSpan="2">
                            <!--  Strength  -->
                            <TextBlock 
                                Text="{x:Static lang:Resources.Label_ControlWeight}" 
                                VerticalAlignment="Center"
                                TextAlignment="Left" />
                            <ui:NumberBox
                                Grid.Row="0"
                                Grid.Column="1"
                                Grid.ColumnSpan="2"
                                HorizontalAlignment="Stretch"
                                SpinButtonPlacementMode="Inline"
                                Maximum="10"
                                Minimum="0"
                                SmallChange="0.01"
                                SimpleNumberFormat="F2"
                                Value="{Binding Strength}" />
                            <Slider
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                Margin="0,-8,0,0"
                                Maximum="1"
                                Minimum="0"
                                TickFrequency="0.01"
                                IsSnapToTickEnabled="True"
                                SmallChange="0.01"
                                Value="{Binding Strength}" />

                            <!--  Start end percent  -->
                            <TextBlock 
                                Grid.Row="2"
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                Text="{x:Static lang:Resources.Label_ControlSteps}" 
                                TextAlignment="Left" />
                            
                            <ui:NumberBox
                                Grid.Row="2"
                                Grid.Column="1"
                                HorizontalAlignment="Stretch"
                                SimpleNumberFormat="P0"
                                Maximum="10"
                                Minimum="0"
                                SmallChange="0.01"
                                Value="{Binding StartPercent}" />
                            <ui:NumberBox
                                Grid.Row="2"
                                Grid.Column="2"
                                HorizontalAlignment="Stretch"
                                SimpleNumberFormat="P0"
                                Maximum="10"
                                Minimum="0"
                                SmallChange="0.01"
                                Value="{Binding EndPercent}" />
                            
                            <!--<sg:SpacedGrid Grid.Row="2"
                                         Grid.Column="1"  
                                         HorizontalAlignment="Right"
                                         ColumnDefinitions="*,*">
                                <ui:NumberBox
                                    HorizontalAlignment="Stretch"
                                    Maximum="10"
                                    Minimum="0"
                                    SmallChange="0.01"
                                    Value="{Binding StartPercent}" />
                                <ui:NumberBox
                                    Grid.Column="1"
                                    HorizontalAlignment="Stretch"
                                    Maximum="10"
                                    Minimum="0"
                                    SmallChange="0.01"
                                    Value="{Binding EndPercent}" />
                            </sg:SpacedGrid>-->

                            <ui:RangeSlider
                                Grid.Row="3"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                Margin="0,4,0,0"
                                ShowValueToolTip="False"
                                Maximum="1"
                                Minimum="0"
                                RangeEnd="{Binding EndPercent}"
                                RangeStart="{Binding StartPercent}"
                                StepFrequency="0.01"
                                ToolTipStringFormat="P" />
                        </sg:SpacedGrid>

                        <StackPanel
                            Grid.Row="4"
                            Grid.Column="0"
                            Grid.ColumnSpan="2">

                        </StackPanel>


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