inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileToolGrid/MobileToolGrid.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:local="clr-namespace:InABox.Mobile"
             x:Class="InABox.Mobile.MobileToolGrid">
    
    <ContentView.Resources>
        <local:BooleanToColorConverter x:Key="BooleanToColorConverter" TrueColor="LightSalmon" FalseColor="White"/>
    </ContentView.Resources>

    <ContentView.BindingContext>
        <local:ToolGridViewModel x:Name="_viewModel"/>
    </ContentView.BindingContext>
    
    <ContentView.Content>
        
        <ScrollView>
            
            <FlexLayout
                
                x:Name="_flexgrid"
                BindableLayout.ItemsSource = "{Binding Items}"
                HorizontalOptions="StartAndExpand"
                VerticalOptions="StartAndExpand"
                Wrap="Wrap" 
                Direction="Row"
                JustifyContent="SpaceEvenly"
                AlignItems="Start"
                AlignContent="Start">
                
                <BindableLayout.ItemTemplate>
                
                <DataTemplate x:DataType="local:MobileToolItem">
                    
                    <Grid Margin="10,0"
                        MinimumWidthRequest="70" 
                        MinimumHeightRequest="92"
                        IsVisible="True">
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="35"/>
                            <ColumnDefinition Width="35"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35"/>
                            <RowDefinition Height="35"/>
                            <RowDefinition Height="22"/>
                        </Grid.RowDefinitions>
                        
                        <Frame 
                            CornerRadius="5" 
                            HasShadow="False" 
                            Margin="0" 
                            Padding="15"
                            x:Name="toolFrame" 
                            Grid.Row="0" 
                            Grid.Column="0" 
                            Grid.RowSpan="2" 
                            Grid.ColumnSpan="2" 
                            MinimumWidthRequest="80" 
                            MinimumHeightRequest="104"
                            BackgroundColor="{Binding HasIndicator, Converter={StaticResource BooleanToColorConverter}}">
                            <Frame.Triggers>
                                <DataTrigger TargetType="Frame" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="BackgroundColor" Value="Silver" />
                                </DataTrigger>
                            </Frame.Triggers>

                            
                            <Image x:Name="toolEntryImage"
                                    Source="{Binding Image}">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="ImageTapped" />
                                </Image.GestureRecognizers>
                            </Image>
                            
                        </Frame>
                    
                        <Frame 
                            x:Name="indicatorFrame" 
                            Grid.Row="0" 
                            Grid.Column="1" 
                            HorizontalOptions="End" 
                            HasShadow="False"
                            VerticalOptions="Start" 
                            HeightRequest="20" 
                            WidthRequest="20" 
                            CornerRadius="10" 
                            Margin="0,5,5,0"
                            IsVisible="{Binding HasIndicator}"
                            BackgroundColor="Yellow" 
                            Padding="1">
                            
                            <Label 
                                FontAttributes="Bold" 
                                TextColor="Red" 
                                FontSize="Small" 
                                HorizontalOptions="Center" 
                                VerticalOptions="Center" 
                                Margin="1"
                                Text="{Binding Indicator}"/>
                            
                        </Frame>
                        
                        <Label 
                            Grid.Row="2" 
                            Grid.Column="0" 
                            Grid.ColumnSpan="2" 
                            Text="{Binding Text}" 
                            FontSize="Micro" 
                            HorizontalTextAlignment="Center" 
                            VerticalTextAlignment="Start" 
                            Margin="0,-2,0,0"
                            TextColor="{Binding TextColor}">
                            <Label.Triggers>
                                <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="TextColor" Value="Gray" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label> 
                        
                    </Grid>
            
                    
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
        </ScrollView>
    </ContentView.Content>
</ContentView>