Episode 28: Fixing the iOS Frame Shadow

- Added the RecentActivity Page and PageModel
- Added ExtendedFrame and iOS Renderer
- Began RecentActivity Page Layout

Author: LetsCreateSeries

TimeTrackerTutorial.iOS/Renderers/ExtendedFrameRenderer.cs

@@ -0,0 +1,54 @@
+using System;
+using System.ComponentModel;
+using TimeTrackerTutorial.iOS.Renderers;
+using TimeTrackerTutorial.Views.Layouts;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.iOS;
+
+[assembly: ExportRenderer(typeof(ExtendedFrame), typeof(ExtendedFrameRenderer))]
+namespace TimeTrackerTutorial.iOS.Renderers
+{
+    public class ExtendedFrameRenderer : FrameRenderer
+    {
+        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
+        {
+            base.OnElementChanged(e);
+            if (e.NewElement != null)
+            {
+                // update frame's shadow
+                UpdateShadow();
+            }
+        }
+
+        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            // check if property is the frame's shadow
+            if (e.PropertyName == ExtendedFrame.ShadowOffsetProperty.PropertyName ||
+                e.PropertyName == ExtendedFrame.ShadowOpacityProperty.PropertyName ||
+                e.PropertyName == ExtendedFrame.ShadowRadiusProperty.PropertyName)
+            {
+                UpdateShadow();
+            }
+            else
+            {
+                base.OnElementPropertyChanged(sender, e);
+            }
+        }
+
+        private void UpdateShadow()
+        {
+            if (Element.HasShadow)
+            {
+                // update it
+                var extendedFrame = Element as ExtendedFrame;
+                Layer.ShadowOpacity = extendedFrame.ShadowOpacity;
+                Layer.ShadowOffset = new CoreGraphics.CGSize(extendedFrame.ShadowOffset.X, extendedFrame.ShadowOffset.Y);
+                Layer.ShadowRadius = extendedFrame.ShadowRadius;
+            }
+            else
+            {
+                Layer.ShadowOpacity = 0;
+            }
+        }
+    }
+}

TimeTrackerTutorial.iOS/TimeTrackerTutorial.iOS.csproj

@@ -82,6 +82,7 @@
     <Compile Include="Services\WorkItemRepository.cs" />
     <Compile Include="Extensions\IIdentifiableExtensions.cs" />
     <Compile Include="Renderers\PlainEntryRenderer.cs" />
+    <Compile Include="Renderers\ExtendedFrameRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />

TimeTrackerTutorial/App.xaml

@@ -9,5 +9,6 @@
         <Color x:Key="PrimaryHeaderColor">#01A9DB</Color>
         <Color x:Key="GradientStartColor">#00BFFF</Color>
         <Color x:Key="GradientEndColor">#086A87</Color>
+        <Color x:Key="BackgroundColorLight">#EFEFEF</Color>
     </Application.Resources>
 </Application>

TimeTrackerTutorial/PageModels/Base/PageModelLocator.cs

@@ -33,6 +33,8 @@ static PageModelLocator()
             Register<SummaryPageModel, SummaryPage>();
             Register<TimeClockPageModel, TimeClockPage>();
 
+            Register<RecentActivityPageModel, RecentActivityPage>();
+
             // Register Services (registered as Singletons by default)
             _container.Register<INavigationService, NavigationService>();
             _container.Register<IAccountService>(DependencyService.Get<IAccountService>());

TimeTrackerTutorial/PageModels/LoginPageModel.cs

@@ -46,7 +46,7 @@ private async void OnLogin()
             if (loginAttempt)
             {
                 // navigate to the Dashboard.
-                await _navigationService.NavigateToAsync<DashboardPageModel>();
+                await _navigationService.NavigateToAsync<RecentActivityPageModel>();
             }
             else
             {

TimeTrackerTutorial/PageModels/RecentActivityPageModel.cs

@@ -0,0 +1,40 @@
+using System;
+using TimeTrackerTutorial.PageModels.Base;
+using TimeTrackerTutorial.ViewModels.Buttons;
+
+namespace TimeTrackerTutorial.PageModels
+{
+    public class RecentActivityPageModel : PageModelBase
+    {
+
+        private ButtonModel _viewAllModel;
+        public ButtonModel ViewAllModel
+        {
+            get => _viewAllModel;
+            set => SetProperty(ref _viewAllModel, value);
+        }
+
+        private ButtonModel _clockInModel;
+        public ButtonModel ClockInModel
+        {
+            get => _clockInModel;
+            set => SetProperty(ref _clockInModel, value);
+        }
+        public RecentActivityPageModel()
+        {
+
+            ViewAllModel = new ButtonModel("View All", OnViewAll);
+            ClockInModel = new ButtonModel("CLOCK IN", OnClockIn);
+        }
+
+        private void OnClockIn()
+        {
+
+        }
+
+        private void OnViewAll()
+        {
+
+        }
+    }
+}

TimeTrackerTutorial/Pages/RecentActivityPage.xaml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<ContentPage
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:skViews="clr-namespace:TimeTrackerTutorial.Views.SKViews"
+    xmlns:buttons="clr-namespace:TimeTrackerTutorial.Views.Buttons"
+    xmlns:layouts="clr-namespace:TimeTrackerTutorial.Views.Layouts"
+    NavigationPage.HasNavigationBar="False"
+    x:Class="TimeTrackerTutorial.Pages.RecentActivityPage">
+    <ContentPage.Content>
+        <Grid RowDefinitions="280,*" BackgroundColor="{StaticResource BackgroundColorLight}">
+            <skViews:RectGradientView StartColor="{StaticResource GradientStartColor}"
+                    EndColor="{StaticResource GradientEndColor}"
+                    VerticalOptions="FillAndExpand" />
+            <StackLayout>
+                <!-- Header layout -->
+            </StackLayout>
+
+            <StackLayout Grid.Row="1" Margin="20">
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Recent Activity" VerticalOptions="Center" />
+                    <buttons:BindableButton BackgroundColor="Transparent"
+                                            BindingContext="{Binding ViewAllModel}"
+                                            FontAttributes="None" HorizontalOptions="EndAndExpand" />
+                </StackLayout>
+                <layouts:ExtendedFrame BackgroundColor="White" CornerRadius="20" HasShadow="True"
+                       Padding="10" VerticalOptions="FillAndExpand" ShadowOpacity="0.25"
+                                       ShadowOffset="0,3" ShadowRadius="3">
+                    <StackLayout>
+                        <!-- recent activity list -->
+                    </StackLayout>
+                </layouts:ExtendedFrame>
+            </StackLayout>
+
+            <buttons:BindableButton BindingContext="{Binding ClockInModel}"
+                                    Grid.Row="1" Margin="0,-30,0,0"
+                                    VerticalOptions="Start" />
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>

TimeTrackerTutorial/Pages/RecentActivityPage.xaml.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+
+using Xamarin.Forms;
+
+namespace TimeTrackerTutorial.Pages
+{
+    public partial class RecentActivityPage : ContentPage
+    {
+        public RecentActivityPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

TimeTrackerTutorial/TimeTrackerTutorial.csproj

@@ -26,6 +26,7 @@
     <Folder Include="Views\SKViews\" />
     <Folder Include="Views\SKViews\Base\" />
     <Folder Include="Views\Entries\" />
+    <Folder Include="Views\Layouts\" />
   </ItemGroup>
 
   <ItemGroup>

TimeTrackerTutorial/Views/Layouts/ExtendedFrame.cs

@@ -0,0 +1,35 @@
+using System;
+using Xamarin.Forms;
+
+namespace TimeTrackerTutorial.Views.Layouts
+{
+    public class ExtendedFrame : Frame
+    {
+        public static readonly BindableProperty ShadowOffsetProperty = BindableProperty.Create(
+            nameof(ShadowOffset), typeof(Point), typeof(ExtendedFrame), Point.Zero);
+
+        public static readonly BindableProperty ShadowRadiusProperty = BindableProperty.Create(
+            nameof(ShadowRadius), typeof(float), typeof(ExtendedFrame), 5.0f);
+
+        public static readonly BindableProperty ShadowOpacityProperty = BindableProperty.Create(
+            nameof(ShadowOpacity), typeof(float), typeof(ExtendedFrame), 0.8f);
+
+        public Point ShadowOffset
+        {
+            get => (Point)GetValue(ShadowOffsetProperty);
+            set => SetValue(ShadowOffsetProperty, value);
+        }
+
+        public float ShadowRadius
+        {
+            get => (float)GetValue(ShadowRadiusProperty);
+            set => SetValue(ShadowRadiusProperty, value);
+        }
+
+        public float ShadowOpacity
+        {
+            get => (float)GetValue(ShadowOpacityProperty);
+            set => SetValue(ShadowOpacityProperty, value);
+        }
+    }
+}