Replaced MaterialCard with MobileCard

Improved MobileToolGrid

InABox.Mobile/InABox.Mobile.Shared/Components/MobileButton/MobileButton.xaml

@@ -13,32 +13,20 @@
     </ContentView.Resources>
     <ContentView.ControlTemplate>
         <ControlTemplate>
-            <material:MaterialCard 
+            <local:MobileCard
                 x:Name="_frame"
-                CornerRadius = "5"
-                Elevation = "0"
-                Margin = "0"
-                HasShadow = "False"
-                Padding="0"
-                IsClickable = "True"
                 IsEnabled="True"
                 BackgroundColor="{TemplateBinding BackgroundColor}"
                 BorderColor="{TemplateBinding BorderColor}"
                 Clicked="_frame_OnClicked">
-                <material:MaterialCard.Triggers>
-                    <!-- <DataTrigger TargetType="material:MaterialCard" Binding="{TemplateBinding IsEnabled}" Value="True"> -->
-                    <!--     <Setter Property="BackgroundColor" Value="{TemplateBinding ButtonColor}" /> -->
-                    <!-- </DataTrigger> -->
-                    <DataTrigger TargetType="material:MaterialCard" Binding="{TemplateBinding IsEnabled}" Value="False">
+                <local:MobileCard.Triggers>
+                    <DataTrigger TargetType="local:MobileCard" Binding="{TemplateBinding IsEnabled}" Value="False">
                         <Setter Property="BackgroundColor" Value="Silver" />
                     </DataTrigger>
-                    <!-- <DataTrigger TargetType="material:MaterialCard" Binding="{TemplateBinding IsEnabled}" Value="True"> -->
-                    <!--     <Setter Property="BorderColor" Value="{TemplateBinding BorderColor}" /> -->
-                    <!-- </DataTrigger> -->
-                    <DataTrigger TargetType="material:MaterialCard" Binding="{TemplateBinding IsEnabled}" Value="False">
+                    <DataTrigger TargetType="local:MobileCard" Binding="{TemplateBinding IsEnabled}" Value="False">
                         <Setter Property="BorderColor" Value="Gray" />
                     </DataTrigger>
-                </material:MaterialCard.Triggers>
+                </local:MobileCard.Triggers>
                 <Grid>
                     <Grid 
                         Grid.Row="0"
@@ -108,7 +96,7 @@
                     
                 </Grid>
                 
-            </material:MaterialCard>
+            </local:MobileCard>
         </ControlTemplate>
     </ContentView.ControlTemplate>
 

InABox.Mobile/InABox.Mobile.Shared/Components/MobileCard/MobileCard.cs

@@ -0,0 +1,37 @@
+using System;
+using System.Runtime.CompilerServices;
+using System.Windows.Input;
+using Xamarin.Forms;
+
+namespace InABox.Mobile
+{
+
+    public class MobileCard : Frame
+    {
+        
+        public MobileCard()
+        {
+            CornerRadius = 5;
+            Margin = 0;
+            Padding = 2;
+            BorderColor = Color.Gray;
+            BackgroundColor = Color.White;
+            HasShadow = false;
+            IsEnabled = true;
+            GestureRecognizers.Add(new TapGestureRecognizer
+            {
+                Command = new Command(OnClick)
+            });
+        }
+        
+        public event EventHandler Clicked;
+        
+        protected virtual void OnClick()
+        {
+            if (IsEnabled)
+                Clicked?.Invoke(this, EventArgs.Empty);
+        }
+        
+
+    }
+}

InABox.Mobile/InABox.Mobile.Shared/Components/MobileDateSelector/MobileDateButton.xaml

@@ -11,14 +11,9 @@
     </ContentView.Resources>
     <ContentView.ControlTemplate>
         <ControlTemplate>
-            <material:MaterialCard 
+            <local:MobileCard
                 x:Name="_frame"
-                CornerRadius = "5"
-                Elevation = "0"
-                Margin = "0"
-                HasShadow = "False"
                 Padding = "{TemplateBinding Padding}"
-                IsClickable = "True"
                 IsEnabled="True"
                 BackgroundColor="{TemplateBinding ButtonColor}"
                 BorderColor="{TemplateBinding BorderColor}"
@@ -34,7 +29,7 @@
                     TextColor="{TemplateBinding TextColor}"
                 />
                     
-            </material:MaterialCard>
+            </local:MobileCard>
         </ControlTemplate>
     </ContentView.ControlTemplate>
 

InABox.Mobile/InABox.Mobile.Shared/Components/MobileGrid/MobileGrid.xaml

@@ -24,12 +24,8 @@
                 Margin="0,0,0,5"
                 />
 
-            <Frame
+            <mobile:MobileCard
                 Grid.Row="1"
-                BorderColor="Gray"
-                CornerRadius="5"
-                HasShadow="False"
-                Padding="0" 
                 BackgroundColor="WhiteSmoke">
                 
                 <xForms:SfDataGrid 
@@ -55,7 +51,7 @@
                     </xForms:SfDataGrid.GridStyle>
                 </xForms:SfDataGrid>
                 
-            </Frame>
+            </mobile:MobileCard>
             
         </Grid>
     </ContentView.Content>

InABox.Mobile/InABox.Mobile.Shared/Components/MobileList/MobileList.xaml

@@ -9,21 +9,34 @@
     x:Class="InABox.Mobile.MobileList"
     BackgroundColor="Transparent"
     x:DataType="local:MobileList">
-    
     <ContentView.Content>
         <RefreshView 
             x:Name="_refresher"
             BackgroundColor="Transparent">
+                <Grid>
                 <CollectionView  
                     x:Name="_list"
                     BackgroundColor="Transparent" 
                     ItemSizingStrategy="{Binding HasUnevenRows}"
                     SelectionMode="None"
-                    HeightRequest="0">
+                    HeightRequest="0"
+                    IsVisible="False">
                     <CollectionView.ItemsLayout>
                         <LinearItemsLayout ItemSpacing="{Binding Spacing}" Orientation="Vertical" />
                     </CollectionView.ItemsLayout>
                 </CollectionView>
+            
+            <ui:MaterialLabel 
+                x:Name="_nodata"
+                Grid.Row="0"
+                Text="No Data Available" 
+                IsVisible="True" 
+                VerticalOptions="CenterAndExpand" 
+                VerticalTextAlignment="Center"
+                HorizontalOptions="CenterAndExpand"
+                HorizontalTextAlignment="Center" 
+                TypeScale="H6"/> 
+            </Grid>
 
         </RefreshView>
     </ContentView.Content>

InABox.Mobile/InABox.Mobile.Shared/Components/MobileList/MobileList.xaml.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections;
+using System.Collections.Specialized;
 using System.Linq;
 using System.Windows.Input;
 using Xamarin.Forms;
@@ -40,7 +41,26 @@ namespace InABox.Mobile
         public IEnumerable ItemsSource
         {
             get => _list.ItemsSource;
-            set => _list.ItemsSource = value;
+            set
+            {
+                if (_list.ItemsSource is INotifyCollectionChanged old)
+                    old.CollectionChanged -= ItemsSourceChanged;
+                _list.ItemsSource = value;
+                CheckChanged();
+                if (value is INotifyCollectionChanged observable)
+                    observable.CollectionChanged += ItemsSourceChanged;
+            }
+        }
+
+        private void ItemsSourceChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            CheckChanged();
+        }
+
+        private void CheckChanged()
+        {
+            _list.IsVisible = ItemsSource?.GetEnumerator().MoveNext() == true;
+            _nodata.IsVisible = !_list.IsVisible;
         }
 
         private double _spacing;
@@ -79,7 +99,7 @@ namespace InABox.Mobile
             InitializeComponent();
             _refresher.Command = new Command(DoRefresh);
             Spacing = 5;
-            HasUnevenRows = false;
+            HasUnevenRows = true;
         }
         
         private void DoRefresh(object sender)

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

@@ -3,90 +3,91 @@
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
+             xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
              x:Class="InABox.Mobile.MobileModuleList" >
     <ContentView.Content>
-        <ListView 
+        <mobile:MobileList 
             x:Name="Modules" 
-            RowHeight="110" 
-            SeparatorVisibility="None"
             BackgroundColor="Transparent">
-            <ListView.ItemTemplate>
-                <DataTemplate>
-                    <ViewCell>
-                        <ViewCell.View>
-                            <ContentView>
-                                <ui:MaterialCard
-                                    CornerRadius="5"
-                                    Elevation="0"
-                                    HorizontalOptions="FillAndExpand"
-                                    BorderColor="{Binding BorderColor}"  
-                                    Margin="0,0,0,5" 
-                                    BackgroundColor="{Binding BackgroundColor}"
-                                    Padding="5" 
-                                    Clicked="MaterialCard_OnClicked"
-                                    IsEnabled="{Binding IsEnabled}"
-                                    IsClickable="{Binding IsEnabled}"
-                                    >
-                                    <ui:MaterialCard.Triggers>
-                                        <DataTrigger TargetType="ui:MaterialCard" Binding="{Binding IsEnabled}" Value="False">
-                                            <Setter Property="BackgroundColor" Value="Silver" />
-                                        </DataTrigger>
-                                        <DataTrigger TargetType="ui:MaterialCard" Binding="{Binding IsEnabled}" Value="False">
-                                            <Setter Property="BorderColor" Value="Gray" />
-                                        </DataTrigger>
-                                    </ui:MaterialCard.Triggers>
+            <mobile:MobileList.ItemTemplate>
+                <DataTemplate x:DataType="mobile:MobileModuleItem">
+                    
+                    <mobile:MobileCard
+                        HorizontalOptions="FillAndExpand"
+                        BorderColor="{Binding BorderColor}"  
+                        Margin="0,0,0,5" 
+                        BackgroundColor="{Binding BackgroundColor}"
+                        Padding="5" 
+                        HeightRequest="110"
+                        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"/>
+                            
+                            <ui:MaterialLabel 
+                                Text="{Binding Header}" 
+                                Grid.Row="0" 
+                                Grid.Column="1" 
+                                HorizontalTextAlignment="Start" 
+                                VerticalTextAlignment="End" 
+                                TypeScale="H6"
+                                TextColor="{Binding TextColor}">
+                                <ui:MaterialLabel.Triggers>
+                                    <DataTrigger TargetType="ui:MaterialLabel" Binding="{Binding IsEnabled}" Value="False">
+                                        <Setter Property="TextColor" Value="Gray" />
+                                    </DataTrigger>
+                                </ui:MaterialLabel.Triggers>
+                            </ui:MaterialLabel>
+                            
+                            <ui:MaterialLabel 
+                                Text="{Binding Description}" 
+                                Grid.Row="1" 
+                                Grid.Column="1" 
+                                HorizontalTextAlignment="Start" 
+                                VerticalTextAlignment="Center" 
+                                TypeScale="Body1" 
+                                LineBreakMode="WordWrap"
+                                TextColor="{Binding TextColor}">
+                                <ui:MaterialLabel.Triggers>
+                                    <DataTrigger TargetType="ui:MaterialLabel" Binding="{Binding IsEnabled}" Value="False">
+                                        <Setter Property="TextColor" Value="Gray" />
+                                    </DataTrigger>
+                                </ui:MaterialLabel.Triggers>
+                            </ui:MaterialLabel>
+                            
+                        </Grid>
+                        
+                    </mobile:MobileCard>
 
-                                    <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"/>
-                                        <ui:MaterialLabel 
-                                            Text="{Binding Header}" 
-                                            Grid.Row="0" 
-                                            Grid.Column="1" 
-                                            HorizontalTextAlignment="Start" 
-                                            VerticalTextAlignment="End" 
-                                            TypeScale="H6"
-                                            TextColor="{Binding TextColor}">
-                                            <ui:MaterialLabel.Triggers>
-                                                <DataTrigger TargetType="ui:MaterialLabel" Binding="{Binding IsEnabled}" Value="False">
-                                                    <Setter Property="TextColor" Value="Gray" />
-                                                </DataTrigger>
-                                            </ui:MaterialLabel.Triggers>
-                                        </ui:MaterialLabel>
-                                        <ui:MaterialLabel 
-                                            Text="{Binding Description}" 
-                                            Grid.Row="1" 
-                                            Grid.Column="1" 
-                                            HorizontalTextAlignment="Start" 
-                                            VerticalTextAlignment="Center" 
-                                            TypeScale="Body1" 
-                                            LineBreakMode="WordWrap"
-                                            TextColor="{Binding TextColor}">
-                                            <ui:MaterialLabel.Triggers>
-                                                <DataTrigger TargetType="ui:MaterialLabel" Binding="{Binding IsEnabled}" Value="False">
-                                                    <Setter Property="TextColor" Value="Gray" />
-                                                </DataTrigger>
-                                            </ui:MaterialLabel.Triggers>
-                                        </ui:MaterialLabel>
-                                    </Grid>
-                                </ui:MaterialCard>
-                            </ContentView>
-                        </ViewCell.View>
-                    </ViewCell>
                 </DataTemplate>
-            </ListView.ItemTemplate>
-        </ListView>
+                
+            </mobile:MobileList.ItemTemplate>
+            
+        </mobile:MobileList>
     </ContentView.Content>
 </ContentView>

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

@@ -19,9 +19,9 @@ namespace InABox.Mobile
             Modules.ItemsSource = Items;
         }
 
-        private void MaterialCard_OnClicked(object sender, EventArgs e)
+        private void Module_Clicked(object sender, EventArgs e)
         {
-            if (sender is MaterialCard card)
+            if (sender is MobileCard card)
             {
                 if ((card.BindingContext is IModuleMenuItem module) && module.IsEnabled)
                     module.Tap();

InABox.Mobile/InABox.Mobile.Shared/Components/MobileSearchBar/MobileSearchBar.xaml

@@ -3,7 +3,6 @@
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:InABox.Mobile"
-             xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
              x:Class="InABox.Mobile.MobileSearchBar"
              BackgroundColor="Transparent">
     
@@ -11,59 +10,53 @@
         
         <ControlTemplate x:DataType="local:MobileSearchBar">
 
-            <Grid BackgroundColor="Transparent" Margin="0" Padding="-5">
+            <Grid BackgroundColor="Transparent" Margin="0">
                 
-                <Frame
-                CornerRadius="5" 
-                Padding="1" 
-                HasShadow="False"
-                Margin="0"
-                BackgroundColor="{TemplateBinding TextBackgroundColor}" 
-                BorderColor="{TemplateBinding BorderColor}">
+                <local:MobileCard
+                    Padding="1,1,2,1" 
+                    BackgroundColor="{TemplateBinding TextBackgroundColor}"
+                    BorderColor="{TemplateBinding BorderColor}"
+                    IsClippedToBounds="True"
+                    HeightRequest="40">
                     
-                <Grid 
-                    HorizontalOptions="Fill" 
-                    BackgroundColor="Transparent" 
-                    ColumnSpacing="0">
-                    
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"/>
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
-                    
-                    <Image
-                        Source="search" 
-                        BackgroundColor="{TemplateBinding BackgroundColor}"
-                        Grid.Column="0" 
-                        Margin="10,5,5,5"
-                    />
-                    
-                    <local:MobileEntry
-                        x:Name="_search"
-                        Grid.Column="1"
-                        HorizontalOptions="Fill"
-                        PlaceholderColor="Gray"
-                        VerticalOptions="Fill"
-                        TextChanged="_search_OnTextChanged"
-                        BackgroundColor="{TemplateBinding TextBackgroundColor}"
-                        TextColor="{TemplateBinding TextColor}"
-                        Placeholder="{Binding PlaceHolder}"
-                        Margin="0"
-                        Keyboard="Plain" VerticalTextAlignment="Center"
-                    />
-                    
-                </Grid>
-                
-                <Frame.Margin>
-                    <OnPlatform x:TypeArguments="Thickness">
-                        <OnPlatform.Platforms>
-                            <On Platform="iOS" Value="5" />
-                            <On Platform="Android" Value="5" />
-                        </OnPlatform.Platforms>
-                    </OnPlatform>
-                </Frame.Margin>
+                    <Grid 
+                        HorizontalOptions="Fill" 
+                        BackgroundColor="Transparent" 
+                        ColumnSpacing="0">
+                        
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        
+                        <Image
+                            Source="search" 
+                            BackgroundColor="{TemplateBinding BackgroundColor}"
+                            Grid.Column="0" 
+                            HeightRequest="25"
+                            WidthRequest="25"
+                            Margin="5"
+                            VerticalOptions="Center"
+                            HorizontalOptions="Center"
+                        />
+                        
+                        <local:MobileEntry
+                            x:Name="_search"
+                            Grid.Column="1"
+                            HorizontalOptions="Fill"
+                            PlaceholderColor="Gray"
+                            VerticalOptions="Fill"
+                            TextChanged="_search_OnTextChanged"
+                            BackgroundColor="{TemplateBinding TextBackgroundColor}"
+                            TextColor="{TemplateBinding TextColor}"
+                            Placeholder="{Binding PlaceHolder}"
+                            Margin="0"
+                            Keyboard="Plain" VerticalTextAlignment="Center"
+                        />
+                        
+                    </Grid>
                 
-            </Frame>
+                </local:MobileCard>
             
             </Grid>
         </ControlTemplate>

InABox.Mobile/InABox.Mobile.Shared/Components/MobileTimeSelector/MobileTimeButton.xaml

@@ -9,16 +9,14 @@
     <ContentView.Resources>
         <local:TimeSpanFormatter x:Key="TimeSpanFormatter"/>
     </ContentView.Resources>
+    
     <ContentView.ControlTemplate>
+        
         <ControlTemplate>
-            <material:MaterialCard 
+            
+            <local:MobileCard 
                 x:Name="_frame"
-                CornerRadius = "5"
-                Elevation = "0"
-                Margin = "2"
-                HasShadow = "False"
                 Padding = "{TemplateBinding Padding}"
-                IsClickable = "True"
                 IsEnabled="True"
                 BackgroundColor="{TemplateBinding ButtonColor}"
                 BorderColor="{TemplateBinding BorderColor}"
@@ -34,8 +32,10 @@
                         TextColor="{TemplateBinding TextColor}"
                     />
                     
-            </material:MaterialCard>
+            </local:MobileCard>
+            
         </ControlTemplate>
+        
     </ContentView.ControlTemplate>
 
 </ContentView>

InABox.Mobile/InABox.Mobile.Shared/Components/MobileToolGrid/MobileToolGrid.xaml

@@ -6,7 +6,7 @@
              x:Class="InABox.Mobile.MobileToolGrid">
     
     <ContentView.Resources>
-        <local:BooleanToColorConverter x:Key="BooleanToColorConverter" TrueColor="LightSalmon" FalseColor="LightYellow"/>
+        <local:BooleanToColorConverter x:Key="BooleanToColorConverter" TrueColor="LightSalmon" FalseColor="LightGoldenrodYellow"/>
     </ContentView.Resources>
 
     <ContentView.BindingContext>
@@ -17,7 +17,7 @@
         
         <ScrollView>
             
-            <Grid RowSpacing="00" ColumnSpacing="10"
+            <Grid RowSpacing="5" ColumnSpacing="5"
                 x:Name="_flexgrid"
                 BindableLayout.ItemsSource = "{Binding Items}"
                 HorizontalOptions="Fill"
@@ -42,7 +42,7 @@
                         
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
-                            <RowDefinition Height="15"/>
+                            <!-- <RowDefinition Height="15"/> -->
                         </Grid.RowDefinitions>
                         
                         <Frame 
@@ -52,13 +52,14 @@
                             x:Name="toolFrame" 
                             Grid.Row="0" 
                             Grid.Column="0" 
-                            BorderColor="Silver"
+                            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type local:MobileToolGrid}}, Path=BorderColor}"
                             HeightRequest="{Binding Source={RelativeSource Self}, Path=Width}"
                             BackgroundColor="{Binding HasIndicator, Converter={StaticResource BooleanToColorConverter}}"
                             Padding="0">
                             <Frame.Triggers>
                                 <DataTrigger TargetType="Frame" Binding="{Binding IsEnabled}" Value="False">
                                     <Setter Property="BackgroundColor" Value="LightGray" />
+                                    <Setter Property="BorderColor" Value="Gray" />
                                 </DataTrigger>
                             </Frame.Triggers>
 
@@ -67,13 +68,13 @@
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="*"/>
+                                    <RowDefinition Height="Auto"/>
                                 </Grid.RowDefinitions>
                                 
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="Auto"/>
                                     <ColumnDefinition Width="*"/>
                                 </Grid.ColumnDefinitions>
- 
                                 
                                 <Image 
                                     x:Name="toolEntryImage"
@@ -98,7 +99,7 @@
                                     CornerRadius="10" 
                                     IsVisible="{Binding HasIndicator}"
                                     BackgroundColor="Yellow" 
-                                    BorderColor="Silver"
+                                    BorderColor="Orange"
                                     Padding="0"
                                     Margin="4"
                                     HeightRequest="20">
@@ -116,29 +117,28 @@
                             
                                 </Frame>
                                 
+                                <Label 
+                                    Grid.Row="2"
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="2"
+                                    Text="{Binding Text}" 
+                                    FontSize="Micro" 
+                                    Margin="0,0,0,5"
+                                    HorizontalTextAlignment="Center" 
+                                    VerticalTextAlignment="Start" 
+                                    TextColor="{Binding TextColor}">
+                                    <Label.Triggers>
+                                        <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
+                                            <Setter Property="TextColor" Value="Gray" />
+                                        </DataTrigger>
+                                    </Label.Triggers>
+                                </Label> 
+                                
                             </Grid>
                             
-
-                            
                         </Frame>
                         
-                        <Label 
-                            Grid.Row="1" 
-                            Text="{Binding Text}" 
-                            FontSize="Micro" 
-                            HorizontalTextAlignment="Center" 
-                            VerticalTextAlignment="Start" 
-                            Margin="0,-5,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>

InABox.Mobile/InABox.Mobile.Shared/Components/MobileToolGrid/MobileToolGrid.xaml.cs

@@ -5,6 +5,7 @@ using System.Globalization;
 using System.Linq;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
+using XF.Material.Forms;
 
 namespace InABox.Mobile
 {
@@ -78,6 +79,20 @@ namespace InABox.Mobile
             InitializeComponent();
             BindableLayout.SetItemsSource(_flexgrid, _viewModel.VisibleItems);
         }
+
+        private readonly BindableProperty BorderColorProperty = BindableProperty.Create(
+            nameof(BorderColor),
+            typeof(Color),
+            typeof(MobileToolGrid),
+            Material.Color.SecondaryVariant
+        );
+        
+        public Color BorderColor
+        {
+            get => (Color)GetValue(BorderColorProperty);
+            set => SetValue(BorderColorProperty, value);
+        }
+        
         
         private void ImageTapped(object sender, EventArgs e)
         {

InABox.Mobile/InABox.Mobile.Shared/Converters/EnumerableToBooleanConverter.cs

@@ -5,18 +5,24 @@ using Xamarin.Forms;
 
 namespace InABox.Mobile
 {
-    public class EnumerableToBooleanConverter : IValueConverter
+    public class EnumerableToBooleanConverter : UtilityConverter<IEnumerable,bool>
     {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        
+        public bool TrueValue { get; set; }
+
+        protected override bool Convert(IEnumerable value)
         {
-            if (value is IEnumerable enumerable)
-                return enumerable.GetEnumerator().MoveNext();
-            return false;
+            return value != null
+                ? value.GetEnumerator().MoveNext() 
+                    ? TrueValue 
+                    : !TrueValue
+                : !TrueValue;
         }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        
+        public EnumerableToBooleanConverter()
         {
-            throw new NotImplementedException();
+            TrueValue = true;
         }
+        
     }
 }