StabilityMatrix/StabilityMatrix.Avalonia/Views/Dialogs/RecommendedModelsDialog.axaml

<controls:UserControlBase xmlns="https://github.com/avaloniaui"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                          xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
                          xmlns:dialogs="clr-namespace:StabilityMatrix.Avalonia.ViewModels.Dialogs"
                          xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
                          xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
                          xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
                          xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia"
                          xmlns:packages="clr-namespace:StabilityMatrix.Core.Models.Packages;assembly=StabilityMatrix.Core"
                          xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
                          xmlns:api="clr-namespace:StabilityMatrix.Core.Models.Api;assembly=StabilityMatrix.Core"
                          xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
                          mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="725"
                          x:DataType="dialogs:RecommendedModelsViewModel"
                          d:DataContext="{x:Static mocks:DesignData.RecommendedModelsViewModel}"
                          x:Class="StabilityMatrix.Avalonia.Views.Dialogs.RecommendedModelsDialog">
    <controls:UserControlBase.Styles>
        <Style Selector="Button#RootButton">
            <Style Selector="^ asyncImageLoader|AdvancedImage">
                <Setter Property="Transitions">
                    <Transitions>
                        <TransformOperationsTransition Property="RenderTransform"
                                                       Duration="0:0:0.237">
                            <TransformOperationsTransition.Easing>
                                <QuadraticEaseInOut/>
                            </TransformOperationsTransition.Easing>
                        </TransformOperationsTransition>
                    </Transitions>
                </Setter>
            </Style>
            
            <Style Selector="^:pointerover">
                <Setter Property="Cursor" Value="Hand" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="12"/>
                    <Setter Property="RenderTransform" Value="scale(1.03, 1.03)"/>
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#CC000000" />
                </Style>
            </Style>
            
            <Style Selector="^:not(:pointerover)">
                <Setter Property="Cursor" Value="Arrow" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="8"/>
                    <Setter Property="RenderTransform" Value="scale(1, 1)"/>
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#99000000" />
                </Style>
            </Style>
        </Style>
    </controls:UserControlBase.Styles>
    
    <controls:UserControlBase.Resources>
        <DataTemplate x:DataType="dialogs:RecommendedModelItemViewModel" x:Key="PackageTemplate">
            <Button Padding="-4"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    Margin="4"
                    Name="RootButton"
                    Classes="transparent-full"
                    Command="{Binding ToggleSelectionCommand}"
                    CornerRadius="8">
                <controls:Card Margin="0" Padding="0">

                    <Grid RowDefinitions="Auto, *, Auto">
                        <CheckBox CornerRadius="100" 
                                  ZIndex="1"
                                  VerticalAlignment="Top"
                                  HorizontalAlignment="Right"
                                  IsChecked="{Binding IsSelected}"
                                  Margin="0,4,-8,0">
                            <CheckBox.RenderTransform>
                                <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                            </CheckBox.RenderTransform>
                        </CheckBox>
                        <controls:BetterAdvancedImage
                            Grid.Row="0"
                            Grid.RowSpan="3"
                            CornerRadius="8"
                            Width="200"
                            Height="250"
                            VerticalContentAlignment="Center"
                            Source="{Binding ThumbnailUrl}"
                            Stretch="UniformToFill"
                            StretchDirection="Both"/>
                        <Border
                            Grid.Row="2"
                            Padding="8"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="#DD000000"
                            Name="ModelCardBottom"
                            CornerRadius="0,0,8,8"
                            ZIndex="1" >
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding CivitModel.Name}"
                                           VerticalAlignment="Center"
                                           FontSize="14" />
                                <TextBlock Text="{Binding Author}"
                                           VerticalAlignment="Center"
                                           FontSize="12" />
                                <StackPanel Orientation="Horizontal">
                                    <controls:StarsRating
                                        Margin="0,8,0,8"
                                        Background="#66000000"
                                        FontSize="16"
                                        Foreground="{DynamicResource ThemeEldenRingOrangeColor}"
                                        Value="{Binding CivitModel.Stats.Rating}" />
                                    <TextBlock
                                        Margin="4,0,0,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.RatingCount}"
                                        TextAlignment="Center" />
                                </StackPanel>
                            </StackPanel>
                        </Border>
                    </Grid>
                </controls:Card>
            </Button>
        </DataTemplate>
    </controls:UserControlBase.Resources>
    <StackPanel>
        <TextBlock Text="Recommended Models"
                   TextAlignment="Center"
                   Margin="8"
                   FontSize="26"/>

        <TextBlock Text="While your package is installing, here are some models we recommend to help you get started"
                   TextAlignment="Center"
                   Margin="8,0,8,8"
                   TextWrapping="WrapWithOverflow"/>
        
        
        <TextBlock Text="Stable Diffusion 1.5"
                   Margin="8,16,8,4"
                   FontSize="16"
                   FontWeight="Bold"
                   TextWrapping="WrapWithOverflow"/>
        <TextBlock Text="Compatible with most packages, easier to run on less powerful hardware"
                   FontSize="12"
                   Margin="8,0,8,8"/>
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      Margin="8">
            <ItemsControl ItemsSource="{Binding Sd15Models}"
                           ItemTemplate="{StaticResource PackageTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
        
        <TextBlock Text="Stable Diffusion XL"
                   Margin="8,16,8,4"
                   FontSize="16"
                   FontWeight="Bold"
                   TextWrapping="WrapWithOverflow"/>
        <TextBlock Text="Compatible with all packages, requires more powerful hardware"
                   FontSize="12"
                   Margin="8,0,8,8"/>
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      Margin="8,8">
            <ItemsControl ItemsSource="{Binding SdxlModels}"
                          ItemTemplate="{StaticResource PackageTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
    </StackPanel>
</controls:UserControlBase >