inabox/InABox.Avalonia/Components/Modules/ModuleGrid/AvaloniaModuleGrid.axaml

<UserControl 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:components="clr-namespace:InABox.Avalonia.Components"
             xmlns:converters="clr-namespace:InABox.Avalonia.Converters;assembly=InABox.Avalonia"
             xmlns:moduleGrid="clr-namespace:InABox.Avalonia.Components.ModuleGrid"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="InABox.Avalonia.Components.ModuleGrid.AvaloniaModuleGrid"
             x:DataType="moduleGrid:AvaloniaModuleGrid">

    <UserControl.Resources>

        <converters:StringToColorConverter
            x:Key="ModuleAlertColorConverter"
            Color="{StaticResource PrsAlertBackground}"
            Empty="{StaticResource PrsTileBackground}" />

        <converters:DoubleToCornerRadiusConverter
            x:Key="SphericalBorder"
            Ratio="0.5" />

        <converters:DoubleToThicknessConverter
            x:Key="MarginInverter"
            Ratio="-1.0" />

        <converters:DoubleToThicknessConverter
            x:Key="MarginDoubler"
            Ratio="2.0" />

        <moduleGrid:AvaloniaModuleGridPanelTemplate
            x:Key="ToolGridTemplate"
            ItemsPerLine="4" />

        <DataTemplate
            x:Key="ToolGrid"
            x:DataType="components:AvaloniaModule">

            <Button Classes="Standard"
                Height="100"
                Padding="0"
                Margin="{StaticResource PrsControlSpacing}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                Background="{Binding Alert, Converter={StaticResource ModuleAlertColorConverter}}"
                BorderBrush="{StaticResource PrsTileBorder}"
                CornerRadius="{StaticResource PrsCornerRadius}"
                IsEnabled="{Binding IsEnabled}"
                IsVisible="{Binding IsVisible}"
                Command="{Binding TapCommand}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Image Classes="Large"
                           Grid.Row="0"
                           Grid.Column="0"
                           Source="{Binding Image}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />

                    <Label
                        Grid.Row="1"
                        Grid.Column="0"
                        HorizontalContentAlignment="Center"
                        FontSize="{StaticResource PrsFontSizeSmall}"
                        FontWeight="{StaticResource PrsFontWeightBold}"
                        Content="{Binding Title}" />

                    <!--  -->
                    <Border
                        x:Name="Alert"
                        Background="{StaticResource PrsTileBackground}"
                        BorderBrush="{StaticResource PrsTileBorder}"
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Right"
                        Margin="{Binding Converter={StaticResource MarginDoubler}, ConverterParameter={StaticResource PrsControlSpacing}}"
                        IsVisible="{Binding Alert, Converter={StaticResource StringToBooleanConverter}}"
                        MinWidth="{Binding $self.Bounds.Height}"
                        CornerRadius="{Binding $self.Bounds.Height, Converter={StaticResource SphericalBorder}}">

                        <Label
                            FontSize="{StaticResource PrsFontSizeExtraSmall}"
                            Foreground="{StaticResource PrsTileForeground}"
                            HorizontalContentAlignment="Center"
                            Content="{Binding Alert}" />
                    </Border>

                </Grid>
            </Button>
        </DataTemplate>

    </UserControl.Resources>

    <ItemsControl
        DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType = moduleGrid:AvaloniaModuleGrid}}"
        ItemsSource="{Binding Modules.VisibleItems}"
        ItemTemplate="{StaticResource ToolGrid}"
        ItemsPanel="{StaticResource ToolGridTemplate}"
        Margin="{Binding Converter={StaticResource MarginInverter}, ConverterParameter={StaticResource PrsControlSpacing}}" />

</UserControl>