inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileModuleList/MobileModuleList.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentView 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
    x:Class="InABox.Mobile.MobileModuleList" >
    
    <ContentView.Resources>
        <mobile:BooleanToColorConverter x:Key="BooleanToColorConverter" TrueColor="LightSalmon" FalseColor="LightGoldenrodYellow"/>
    </ContentView.Resources>
    
    <ContentView.Content>
        <mobile:MobileList 
            x:Name="Modules" 
            BackgroundColor="Transparent"
            PullToRefresh="False"
            ShowRecordCount="False">
            <mobile:MobileList.ItemTemplate>
                <DataTemplate x:DataType="mobile:MobileModuleItem">
                    
                    <mobile:MobileCard
                        HorizontalOptions="FillAndExpand"
                        BorderColor="{Binding BorderColor}"  
                        Margin="0,0,0,5" 
                        BackgroundColor="{Binding AlertVisible, Converter={StaticResource BooleanToColorConverter}}"
                        Padding="5" 
                        HeightRequest="70"
                        Clicked="Module_Clicked"
                        IsEnabled="{Binding IsEnabled}">
                        <mobile:MobileCard.Triggers>
                            <DataTrigger TargetType="mobile:MobileCard" Binding="{Binding IsEnabled}" Value="False">
                                <Setter Property="BackgroundColor" Value="Silver" />
                            </DataTrigger>
                            <DataTrigger TargetType="mobile:MobileCard" Binding="{Binding IsEnabled}" Value="False">
                                <Setter Property="BorderColor" Value="Gray" />
                            </DataTrigger>
                        </mobile:MobileCard.Triggers>

                        <Grid RowSpacing="0">
                            
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.8*"/>
                                <RowDefinition Height="1.2*"/>
                            </Grid.RowDefinitions>
                            
                            <Image 
                                Source="{Binding Thumbnail}" 
                                Grid.Row="0" 
                                Grid.Column="0" 
                                Grid.RowSpan="2" 
                                Margin="10"/>
                            
                            <Label
                                Text="{Binding Header}" 
                                Grid.Row="0" 
                                Grid.Column="1" 
                                HorizontalTextAlignment="Start" 
                                VerticalTextAlignment="End" 
                                FontSize="Medium"
                                FontAttributes="Bold"
                                TextColor="{Binding TextColor}">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                                        <Setter Property="TextColor" Value="Gray" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                            
                            <Label 
                                Text="{Binding Description}" 
                                Grid.Row="1" 
                                Grid.Column="1" 
                                HorizontalTextAlignment="Start" 
                                VerticalTextAlignment="Center" 
                                FontSize="Small"
                                LineBreakMode="WordWrap"
                                TextColor="{Binding TextColor}">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                                        <Setter Property="TextColor" Value="Gray" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                            
                            <Frame 
                                x:Name="indicatorFrame" 
                                Grid.Row="0"
                                Grid.Column="1"
                                HasShadow="False"
                                VerticalOptions="Start" 
                                HorizontalOptions="End"
                                CornerRadius="12.5" 
                                IsVisible="{Binding AlertVisible}"
                                BackgroundColor="Yellow" 
                                BorderColor="{Binding BorderColor}"
                                Padding="0"
                                Margin="0"
                                HeightRequest="25"
                                WidthRequest="25">
                            
                                <Label 
                                    FontAttributes="Bold" 
                                    TextColor="Red" 
                                    FontSize="Micro" 
                                    HorizontalTextAlignment="Center"
                                    VerticalTextAlignment="Center"
                                    Text="{Binding Alert}"
                                    WidthRequest="{Binding Source={RelativeSource Self}, Path=Height}"/>
                            
                            </Frame>
                            
                        </Grid>
                        
                    </mobile:MobileCard>

                </DataTemplate>
                
            </mobile:MobileList.ItemTemplate>
            
        </mobile:MobileList>
    </ContentView.Content>
</ContentView>