prs/prs.mobile/comal.timesheets/CustomControls/ToolGrid/ToolGrid.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:comal.timesheets"
             x:Class="comal.timesheets.ToolGrid">
    
    <ContentView.Resources>
        <local:StringToBooleanConverter x:Key="StringToBooleanConverter"/>
        <!-- <local:BooleanToColorConverter x:Key="BackgroundColorConverter" DefaultColor="Silver"/> -->
        <!-- <local:BooleanToColorConverter x:Key="ForegroundColorConverter" DefaultColor="Gray"/> -->
    </ContentView.Resources>

    <ContentView.BindingContext>
        <local:ToolGridViewModel x:Name="_viewModel"/>
    </ContentView.BindingContext>
    
    <ContentView.Content>
        
        <ScrollView>
            
            <FlexLayout
                x:Name="_flexgrid"
                BindableLayout.ItemsSource = "{Binding Items}"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="StartAndExpand"
                Wrap="Wrap" 
                Direction="Row"
                JustifyContent="SpaceEvenly"
                AlignItems="Start"
                AlignContent="Start">
                
                <BindableLayout.ItemTemplate>
                
                <DataTemplate>
                    
                    <Grid
                        MinimumWidthRequest="80" 
                        MinimumHeightRequest="104">
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="40"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="24"/>
                        </Grid.RowDefinitions>
                        
                        <Frame 
                            CornerRadius="5" 
                            HasShadow="False" 
                            Margin="0" 
                            x:Name="toolFrame" 
                            Grid.Row="0" 
                            Grid.Column="0" 
                            Grid.RowSpan="2" 
                            Grid.ColumnSpan="2" 
                            MinimumWidthRequest="80" 
                            MinimumHeightRequest="104"
                            BackgroundColor="{Binding BackgroundColor}">
                            <Frame.Triggers>
                                <!-- <DataTrigger TargetType="material:MaterialCard" Binding="{TemplateBinding IsEnabled}" Value="True"> -->
                                <!--     <Setter Property="BackgroundColor" Value="{TemplateBinding ButtonColor}" /> -->
                                <!-- </DataTrigger> -->
                                <DataTrigger TargetType="Frame" Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="BackgroundColor" Value="Silver" />
                                </DataTrigger>
                            </Frame.Triggers>

                            
                            <Frame.Padding>
                                <OnPlatform x:TypeArguments="Thickness">
                                    <On Platform="Android" Value="15"/>
                                    <On Platform="iOS" Value="0"/>
                                </OnPlatform>
                            </Frame.Padding>
                    
                            <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="30" 
                            WidthRequest="30" 
                            CornerRadius="15" 
                            IsVisible="{Binding Indicator, Converter={StaticResource StringToBooleanConverter}}"
                            BackgroundColor="Yellow" 
                            Padding="1">
                            
                            <Label 
                                FontAttributes="Bold" 
                                TextColor="Red" 
                                FontSize="Medium" 
                                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>