inabox/InABox.Avalonia/Components/Modules/ModuleList/AvaloniaModuleList.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:converters="clr-namespace:InABox.Avalonia.Converters;assembly=InABox.Avalonia"
             xmlns:components="clr-namespace:InABox.Avalonia.Components"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="InABox.Avalonia.Components.AvaloniaModuleList"
             x:DataType="components:AvaloniaModuleList">

    <UserControl.Resources>

        <converters:StringToColorConverter
            x:Key="ModuleAlertBackgroundConverter"
            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" />


        <DataTemplate
            x:Key="ModuleList"
            x:DataType="components:AvaloniaModule">
            <Button Classes="Standard"
                Height="80"
                Padding="0"
                Background="{Binding Alert, Converter={StaticResource ModuleAlertBackgroundConverter}}"
                BorderBrush="{StaticResource PrsTileBorder}"
                Foreground="{StaticResource PrsTileForeground}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                Command="{Binding TapCommand}">
                <Grid>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1.2*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

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

                    <Label
                        Grid.Row="0"
                        Grid.Column="1"
                        VerticalAlignment="Stretch"
                        VerticalContentAlignment="Center"
                        FontSize="{StaticResource PrsFontSizeLarge}"
                        FontWeight="{StaticResource PrsFontWeightBold}"
                        Content="{Binding Title}" />

                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        FontSize="{StaticResource PrsFontSizeNormal}"
                        FontStyle="{StaticResource PrsFontStylItalic}"
                        TextWrapping="WrapWithOverflow"
                        VerticalAlignment="Stretch"
                        Text="{Binding Description}" />

                    <Border
                        Background="{StaticResource PrsTileBackground}"
                        BorderBrush="{StaticResource PrsTileBorder}"
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        Grid.Column="1"
                        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
                            Background="Transparent"
                            Foreground="{StaticResource PrsTileForeground}"
                            HorizontalContentAlignment="Center"
                            Content="{Binding Alert}" />
                    </Border>

                </Grid>
            </Button>
        </DataTemplate>
    </UserControl.Resources>

    <ItemsControl
        DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType = components:AvaloniaModuleList}}"
        ItemsSource="{Binding Modules.VisibleItems}"
        ItemTemplate="{StaticResource ModuleList}"
        Margin="{Binding Converter={StaticResource MarginInverter}, ConverterParameter={StaticResource PrsControlSpacing}}" />

</UserControl>