From 16de770486a86d0e928613446c2a3bc2800f507e Mon Sep 17 00:00:00 2001
From: Kangho Hur <kangho.hur@samsung.com>
Date: Thu, 11 Mar 2021 16:11:13 +0900
Subject: [PATCH] [CommonUI] Added the ShadowFrame

---
 sample/Sample.Tizen/Sample.Tizen.cs           |  16 +-
 sample/Sample/MainPageModel.cs                |   5 +
 sample/Sample/Sample.csproj                   |   5 +-
 .../Sample/ShadowFrame/ShadowFrameTest.xaml   | 100 ++++++
 .../ShadowFrame/ShadowFrameTest.xaml.cs       |  68 ++++
 .../Renderer/ShadowFrameRenderer.cs           | 330 ++++++++++++++++++
 src/Tizen.Theme.Common/ShadowFrame.cs         | 125 +++++++
 7 files changed, 642 insertions(+), 7 deletions(-)
 create mode 100644 sample/Sample/ShadowFrame/ShadowFrameTest.xaml
 create mode 100644 sample/Sample/ShadowFrame/ShadowFrameTest.xaml.cs
 create mode 100644 src/Tizen.Theme.Common/Renderer/ShadowFrameRenderer.cs
 create mode 100644 src/Tizen.Theme.Common/ShadowFrame.cs

diff --git a/sample/Sample.Tizen/Sample.Tizen.cs b/sample/Sample.Tizen/Sample.Tizen.cs
index 2fdac47..03bf2df 100644
--- a/sample/Sample.Tizen/Sample.Tizen.cs
+++ b/sample/Sample.Tizen/Sample.Tizen.cs
@@ -30,15 +30,19 @@ static void Main(string[] args)
                 var option = new InitializationOptions(app)
                 {
                     //Using DP without device scaling mode
-                    DisplayResolutionUnit = DisplayResolutionUnit.DP()
+                    DisplayResolutionUnit = DisplayResolutionUnit.DP(),
+                    UseSkiaSharp = true
                 };
                 Forms.Init(option);
-
-                // UIControls.Init() should be called after Forms.Init()
-                UIControls.Init(new InitOptions(app));
-                CommonUI.Init(app);
-                if (Device.Idiom != TargetIdiom.TV)
+                if (Device.Idiom == TargetIdiom.TV)
+                {
+                    // UIControls.Init() should be called after Forms.Init()
+                    UIControls.Init(new InitOptions(app));
+                    CommonUI.Init(app);
+                }
+                else
                 {
+                    CommonUI.Init(app);
                     CommonUI.AddCommonThemeOverlay();
                 }
                 app.Run(args);
diff --git a/sample/Sample/MainPageModel.cs b/sample/Sample/MainPageModel.cs
index 32bdbcb..0c671ef 100644
--- a/sample/Sample/MainPageModel.cs
+++ b/sample/Sample/MainPageModel.cs
@@ -33,6 +33,11 @@ public MainPageModel()
         {
             TestCategories = new List<TestCategory>
             {
+                new TestCategory
+                {
+                    Name = "Shadow Frame Test",
+                    PageType = typeof(ShadowFrame.ShadowFrameTest),
+                },
                 new TestCategory
                 {
                     Name = "Page Transition Test",
diff --git a/sample/Sample/Sample.csproj b/sample/Sample/Sample.csproj
index a9d3e56..0b83948 100644
--- a/sample/Sample/Sample.csproj
+++ b/sample/Sample/Sample.csproj
@@ -6,7 +6,7 @@
 
   <!-- Include Nuget Package for Xamarin building -->
   <ItemGroup>
-    <PackageReference Include="Xamarin.Forms" Version="5.0.0.1829-pre6" />
+    <PackageReference Include="Xamarin.Forms" Version="5.0.0.2012" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\..\src\Tizen.Theme.Common\Tizen.Theme.Common.csproj" />
@@ -40,6 +40,9 @@
     <Compile Update="RemoteControl\TestFlyoutPage.xaml.cs">
       <DependentUpon>TestFlyoutPage.xaml</DependentUpon>
     </Compile>
+    <Compile Update="ShadowFrame\ShadowFrameTest.xaml.cs">
+      <DependentUpon>ShadowFrameTest.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Update="ContentButton\ContentButtonTest.xaml">
diff --git a/sample/Sample/ShadowFrame/ShadowFrameTest.xaml b/sample/Sample/ShadowFrame/ShadowFrameTest.xaml
new file mode 100644
index 0000000..c1f8ed2
--- /dev/null
+++ b/sample/Sample/ShadowFrame/ShadowFrameTest.xaml
@@ -0,0 +1,100 @@
+<?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:cui="clr-namespace:Tizen.Theme.Common;assembly=Tizen.Theme.Common"
+             Title="ShadowFrame Test"
+             x:Class="Sample.ShadowFrame.ShadowFrameTest">
+    <StackLayout Spacing="40">
+        <cui:ShadowFrame x:Name="Frame1"
+                      WidthRequest="100"
+                      HeightRequest="100"
+                      BackgroundColor="White"
+                      BorderColor="#fcd071"
+                      BorderWidth="8"
+                      CornerRadius="20,20,20,20"
+                      ShadowOffsetX ="{Binding Value, Source={x:Reference offsetXSlider}}"
+                      ShadowOffsetY ="{Binding Value, Source={x:Reference offsetYSlider}}"
+                      ShadowBlurRadius="{Binding Value, Source={x:Reference blurSlider}}"
+                      ShadowOpacity ="{Binding Value, Source={x:Reference opacitySlider}}"
+                      HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
+        <ScrollView>
+            <StackLayout>
+                <Label Text="CornerRadius"  FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Top L: " TextColor ="Black"/>
+                    <Slider x:Name="tlSlider" Value="20" Minimum="0" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="radius_ValueChanged"/>
+                    <Label Text="Top R: " TextColor ="Black" />
+                    <Slider x:Name="trSlider" Value="20" Minimum="0" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="radius_ValueChanged"/>
+                </StackLayout>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Bot L: " TextColor ="Black"/>
+                    <Slider x:Name="blSlider" Value="20" Minimum="0" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="radius_ValueChanged"/>
+                    <Label Text="Bot R: " TextColor ="Black"/>
+                    <Slider x:Name="brSlider" Value="20" Minimum="0" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="radius_ValueChanged"/>
+                </StackLayout>
+
+                <Label Text="ShadowOffset" FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Off X: " TextColor ="Black"/>
+                    <Slider x:Name="offsetXSlider" Minimum="-50" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="shadowOffset_ValueChanged"/>
+                    <Label Text="Off Y: " TextColor ="Black"/>
+                    <Slider x:Name="offsetYSlider" Minimum="-50" Maximum="50" HorizontalOptions="FillAndExpand" ValueChanged="shadowOffset_ValueChanged"/>
+                </StackLayout>
+
+                <Label Text="ShadowOpacity/BlurRadius"  FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Opacity" TextColor ="Black"/>
+                    <Slider x:Name="opacitySlider" Value=".24" HorizontalOptions="FillAndExpand" ValueChanged="blurOpacity_ValueChanged"/>
+                    <Label Text="Blur R " TextColor ="Black"/>
+                    <Slider x:Name="blurSlider" Minimum="0" Maximum="20" HorizontalOptions="FillAndExpand" ValueChanged="blurRadius_ValueChanged"/>
+                </StackLayout>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Toggle HasShadow: " TextColor ="Black"/>
+                    <Button x:Name="hasShadow" HeightRequest="20" Clicked="hasShadow_Clicked" Text="{Binding HasShadow, Source={x:Reference Frame1}}"/>
+                </StackLayout>
+
+                <Label Text="ShadowColor"  FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="R: " TextColor ="Red"/>
+                    <Slider x:Name="RedColorS" HorizontalOptions="FillAndExpand" ValueChanged="shadowColor_ValueChanged"/>
+                    <Label Text="G: " TextColor ="Green"/>
+                    <Slider x:Name="GreenColorS" HorizontalOptions="FillAndExpand" ValueChanged="shadowColor_ValueChanged"/>
+                    <Label Text="B: " TextColor ="Blue"/>
+                    <Slider x:Name="BlueColorS" HorizontalOptions="FillAndExpand" ValueChanged="shadowColor_ValueChanged"/>
+                </StackLayout>
+
+                <Label Text="BorderWidth/Color"  FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="Width: " TextColor ="Black"/>
+                    <Slider x:Name="borderWidthSlider" Value="8" Minimum="0" Maximum="20"  HorizontalOptions="FillAndExpand" ValueChanged="borderWidth_ValueChanged"/>
+                </StackLayout>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="R: " TextColor ="Red"/>
+                    <Slider x:Name="RedColor" Value=".99" HorizontalOptions="FillAndExpand" ValueChanged="borderColor_ValueChanged"/>
+                    <Label Text="G: " TextColor ="Green"/>
+                    <Slider x:Name="GreenColor" Value=".82" HorizontalOptions="FillAndExpand" ValueChanged="borderColor_ValueChanged"/>
+                </StackLayout>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="B: " TextColor ="Blue"/>
+                    <Slider x:Name="BlueColor" Value=".44" HorizontalOptions="FillAndExpand" ValueChanged="borderColor_ValueChanged"/>
+                    <Label Text="A: " TextColor ="Black"/>
+                    <Slider x:Name="AlphaColor" Value="1" HorizontalOptions="FillAndExpand" ValueChanged="borderColor_ValueChanged"/>
+                </StackLayout>
+
+                <Label Text="BackgroundColor" FontSize="Large" TextColor="Coral"/>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="R: " TextColor ="Red"/>
+                    <Slider x:Name="RedColorBG" Value="1"  HorizontalOptions="FillAndExpand" ValueChanged="bgColor_ValueChanged"/>
+                    <Label Text="G: " TextColor ="Green"/>
+                    <Slider x:Name="GreenColorBG" Value="1" HorizontalOptions="FillAndExpand" ValueChanged="bgColor_ValueChanged"/>
+                </StackLayout>
+                <StackLayout Orientation="Horizontal">
+                    <Label Text="B: " TextColor ="Blue"/>
+                    <Slider x:Name="BlueColorBG" Value="1" HorizontalOptions="FillAndExpand" ValueChanged="bgColor_ValueChanged"/>
+                    <Label Text="A: " TextColor ="Black"/>
+                    <Slider x:Name="AlphaColorBG" Value="1"  HorizontalOptions="FillAndExpand" ValueChanged="bgColor_ValueChanged"/>
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
+    </StackLayout>
+</ContentPage>
\ No newline at end of file
diff --git a/sample/Sample/ShadowFrame/ShadowFrameTest.xaml.cs b/sample/Sample/ShadowFrame/ShadowFrameTest.xaml.cs
new file mode 100644
index 0000000..ce41f4c
--- /dev/null
+++ b/sample/Sample/ShadowFrame/ShadowFrameTest.xaml.cs
@@ -0,0 +1,68 @@
+using System;
+
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace Sample.ShadowFrame
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class ShadowFrameTest : ContentPage
+    {
+        public ShadowFrameTest()
+        {
+            InitializeComponent();
+            tlSlider.Value = 20;
+            trSlider.Value = 20;
+            blSlider.Value = 20;
+            brSlider.Value = 20;
+            blurSlider.Value = 10;
+            offsetXSlider.Value = 0;
+            offsetYSlider.Value = 0;
+        }
+
+        void radius_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Frame1.CornerRadius = new CornerRadius(tlSlider.Value, trSlider.Value, blSlider.Value, brSlider.Value);
+        }
+
+        void borderColor_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Frame1.BorderColor = Color.FromRgba(RedColor.Value, GreenColor.Value, BlueColor.Value, AlphaColor.Value);
+        }
+
+        void shadowColor_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Frame1.ShadowColor = Color.FromRgb(RedColorS.Value, GreenColorS.Value, BlueColorS.Value);
+        }
+
+        void borderWidth_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Frame1.BorderWidth = borderWidthSlider.Value;
+        }
+
+        void bgColor_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Frame1.BackgroundColor = Color.FromRgba(RedColorBG.Value, GreenColorBG.Value, BlueColorBG.Value, AlphaColorBG.Value);
+        }
+
+        void blurOpacity_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Console.WriteLine("[ShadowOpacity] : " + Frame1.ShadowOpacity);
+        }
+
+        void blurRadius_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Console.WriteLine("[ShadowBlurRadius] : " + Frame1.ShadowBlurRadius);
+        }
+
+        void shadowOffset_ValueChanged(object sender, ValueChangedEventArgs e)
+        {
+            Console.WriteLine("[ShadowOffset] (X : " + Frame1.ShadowOffsetX + ", Y: " + Frame1.ShadowOffsetY+")");
+        }
+
+        private void hasShadow_Clicked(object sender, EventArgs e)
+        {
+            Frame1.HasShadow = !Frame1.HasShadow;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Tizen.Theme.Common/Renderer/ShadowFrameRenderer.cs b/src/Tizen.Theme.Common/Renderer/ShadowFrameRenderer.cs
new file mode 100644
index 0000000..435c4aa
--- /dev/null
+++ b/src/Tizen.Theme.Common/Renderer/ShadowFrameRenderer.cs
@@ -0,0 +1,330 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using System;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.Tizen;
+using Xamarin.Forms.Platform.Tizen.SkiaSharp;
+using SkiaSharp;
+using SkiaSharp.Views.Tizen;
+using Tizen.Theme.Common;
+using Tizen.Theme.Common.Renderer;
+
+using NLayoutEventArgs = Xamarin.Forms.Platform.Tizen.Native.LayoutEventArgs;
+
+[assembly: ExportRenderer(typeof(ShadowFrame), typeof(ShadowFrameRenderer))]
+
+namespace Tizen.Theme.Common.Renderer
+{
+    public class ShadowFrameRenderer : LayoutRenderer
+    {
+        static SKColor s_defaultColor = SKColors.Transparent;
+
+        SKClipperView _clipper;
+        SKCanvasView _shadowCanvasView;
+        ShadowFrame ShadowElement => Element as ShadowFrame;
+
+        public ShadowFrameRenderer()
+        {
+            if (!Forms.UseSkiaSharp)
+                throw new InvalidOperationException("You must set Forms.UseSkiaSharp to true prior to using ShadowFrame.");
+
+            RegisterPropertyHandler(Frame.BorderColorProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.BorderWidthProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.CornerRadiusProperty, UpdateCanvas);
+            RegisterPropertyHandler(Frame.HasShadowProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.ShadowBlurRadiusProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.ShadowColorProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.ShadowOffsetXProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.ShadowOffsetYProperty, UpdateCanvas);
+            RegisterPropertyHandler(ShadowFrame.ShadowOpacityProperty, UpdateCanvas);
+        }
+
+        protected override void OnElementChanged(ElementChangedEventArgs<Layout> e)
+        {
+            base.OnElementChanged(e);
+            _clipper = new SKClipperView(Forms.NativeParent);
+            _clipper.Show();
+            _clipper.PassEvents = true;
+            _clipper.PaintSurface += OnCliperPaint;
+            Control.Children.Add(_clipper);
+            BackgroundCanvas?.StackAbove(_clipper);
+
+            _shadowCanvasView = new SKCanvasView(Forms.NativeParent);
+            _shadowCanvasView.Show();
+            _shadowCanvasView.PassEvents = true;
+            _shadowCanvasView.PaintSurface += OnShadowPaint;
+            Control.Children.Add(_shadowCanvasView);
+            _shadowCanvasView.Lower();
+            _shadowCanvasView.SetClip(null);
+        }
+
+        protected override void UpdateBackgroundColor(bool initialize)
+        {
+            if (initialize && Element.BackgroundColor.IsDefault)
+                return;
+            else
+                BackgroundCanvas?.Invalidate();
+        }
+
+        protected override void OnBackgroundLayoutUpdated(object sender, NLayoutEventArgs e)
+        {
+            base.OnBackgroundLayoutUpdated(sender, e);
+
+            if (_clipper != null)
+            {
+                _clipper.Geometry = Control.Geometry;
+                _clipper.Invalidate();
+            }
+
+            if (_shadowCanvasView != null && ShadowElement.HasShadow)
+            {
+                UpdateShadowGeometry();
+                _shadowCanvasView.Invalidate();
+            }
+        }
+
+        protected override void OnBackgroundPaint(object sender, SKPaintSurfaceEventArgs e)
+        {
+            var canvas = e.Surface.Canvas;
+            var bound = e.Info.Rect;
+            canvas.Clear();
+            var bgColor = Element.BackgroundColor == Color.Default ? s_defaultColor : SKColor.Parse(Element.BackgroundColor.ToHex());
+            var borderColor = ShadowElement.BorderColor == Color.Default ? s_defaultColor : SKColor.Parse(ShadowElement.BorderColor.ToHex());
+
+            using (var paint = new SKPaint
+            {
+                IsAntialias = true,
+            })
+            {
+                using (var path = CreateRoundRectPath(bound.Width, bound.Height))
+                {
+                    // Draw background color
+                    paint.ImageFilter = null;
+                    paint.Style = SKPaintStyle.Fill;
+                    paint.Color = bgColor;
+                    canvas.DrawPath(path, paint);
+
+                    // Draw Background (Brush)
+                    using (var brushPaint = Element.GetBackgroundPaint(bound))
+                    {
+                        if (brushPaint != null)
+                            canvas.DrawPath(path, brushPaint);
+                    }
+
+                    // Draw border
+                    paint.IsAntialias = true;
+                    paint.Style = SKPaintStyle.Stroke;
+                    paint.StrokeWidth = Forms.ConvertToScaledPixel(ShadowElement.BorderWidth);
+                    paint.Color = borderColor;
+                    canvas.DrawPath(path, paint);
+                }
+            }
+        }
+
+        protected virtual void OnShadowPaint(object sender, SKPaintSurfaceEventArgs e)
+        {
+            var canvas = e.Surface.Canvas;
+            var bound = e.Info.Rect;
+            canvas.Clear();
+
+            // Draw shadow
+            if (ShadowElement.HasShadow)
+            {
+                using (var paint = new SKPaint
+                {
+                    IsAntialias = true,
+                    Style = SKPaintStyle.StrokeAndFill
+                })
+                {
+                    using (var path = CreateShadowPath())
+                    {
+                        var scaledOffsetX = Forms.ConvertToScaledPixel(ShadowElement.ShadowOffsetX);
+                        var scaledOffsetY = Forms.ConvertToScaledPixel(ShadowElement.ShadowOffsetY);
+                        var scaledBlurRadius = Forms.ConvertToScaledPixel(ShadowElement.ShadowBlurRadius);
+
+                        canvas.Save();
+                        canvas.ClipPath(path, SKClipOperation.Difference, true);
+                        paint.ImageFilter = SKImageFilter.CreateDropShadowOnly(
+                            scaledOffsetX,
+                            scaledOffsetY,
+                            scaledBlurRadius,
+                            scaledBlurRadius,
+                            ShadowElement.ShadowColor.MultiplyAlpha(ShadowElement.ShadowOpacity).ToSK());
+                        canvas.DrawPath(path, paint);
+                        canvas.Restore();
+
+                        canvas.Save();
+                        canvas.ClipPath(path, SKClipOperation.Intersect, true);
+                        canvas.DrawPath(path, paint);
+                        canvas.Restore();
+                    }
+                }
+            }
+        }
+
+        protected virtual void OnCliperPaint(object sender, SKPaintSurfaceEventArgs e)
+        {
+            if (ShadowElement.Content == null)
+                return;
+
+            var canvas = e.Surface.Canvas;
+            var bound = e.Info.Rect;
+            canvas.Clear();
+
+            // clipping
+            using (var paint = new SKPaint
+            {
+                IsAntialias = true,
+                Style = SKPaintStyle.Fill,
+                Color = SKColors.White,
+            })
+            {
+                using (var path = CreateRoundRectPath(bound.Width, bound.Height))
+                {
+                    canvas.DrawPath(path, paint);
+                }
+            }
+            ShadowElement.Content.SetClipperCanvas(_clipper);
+        }
+
+        void UpdateCanvas()
+        {
+            BackgroundCanvas?.Invalidate();
+            _clipper?.Invalidate();
+            if (ShadowElement.HasShadow)
+            {
+                UpdateShadowGeometry();
+            }
+            else
+            {
+                _shadowCanvasView?.Invalidate();
+            }
+        }
+
+        SKPath CreateRoundRectPath(float width, float height)
+        {
+            var path = new SKPath();
+            var topLeft = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.TopLeft);
+            var topRight = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.TopRight);
+            var bottomLeft = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.BottomLeft);
+            var bottomRight = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.BottomRight);
+            var padding = Convert.ToSingle(ShadowElement.BorderWidth);
+            var diameter = padding * 2;
+            width = width > diameter ? width - diameter : 0;
+            height = height > diameter ? height - diameter : 0;
+            var startX = topLeft + padding;
+            var startY = padding;
+
+            path.MoveTo(startX, startY);
+            path.LineTo(width - topRight + padding, startY);
+            path.ArcTo(topRight, new SKPoint(width + padding, topRight + padding));
+            path.LineTo(width + padding, height - bottomRight + padding);
+            path.ArcTo(bottomRight, new SKPoint(width - bottomRight + padding, height + padding));
+            path.LineTo(bottomLeft + padding, height + padding);
+            path.ArcTo(bottomLeft, new SKPoint(padding, height - bottomLeft + padding));
+            path.LineTo(padding, topLeft + padding);
+            path.ArcTo(topLeft, new SKPoint(startX, startY));
+            path.Close();
+            return path;
+        }
+
+        SKPath CreateShadowPath()
+        {
+            var geometry = NativeView.Geometry;
+            if (ShadowElement.Content != null)
+            {
+                var contentNativeView = Platform.GetOrCreateRenderer(ShadowElement.Content)?.NativeView;
+                if (contentNativeView != null)
+                {
+                    geometry = contentNativeView.Geometry;
+                }
+            }
+
+            var path = new SKPath();
+            var left = geometry.Left - _shadowCanvasView.Geometry.Left;
+            var top = geometry.Top - _shadowCanvasView.Geometry.Top;
+            var rect = new SKRect(left, top, left + geometry.Width, top + geometry.Height);
+            var scaledTLRadius = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.TopLeft) * 2;
+            var scaledTRRadius = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.TopRight) * 2;
+            var scaledBLRadius = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.BottomLeft) * 2;
+            var scaledBRRadius = Forms.ConvertToScaledPixel(ShadowElement.CornerRadius.BottomRight) * 2;
+            var topLeft = new SKRect(rect.Left, rect.Top, rect.Left + scaledTLRadius, rect.Top + scaledTLRadius);
+            var topRight = new SKRect(rect.Right - scaledTRRadius, rect.Top, rect.Right, rect.Top + scaledTRRadius);
+            var bottomLeft = new SKRect(rect.Left, rect.Bottom - scaledBLRadius, rect.Left + scaledBLRadius, rect.Bottom);
+            var bottomRight = new SKRect(rect.Right - scaledBRRadius, rect.Bottom - scaledBRRadius, rect.Right, rect.Bottom);
+            path.ArcTo(topLeft, 180, 90, false);
+            path.ArcTo(topRight, 270, 90, false);
+            path.ArcTo(bottomRight, 0, 90, false);
+            path.ArcTo(bottomLeft, 90, 90, false);
+            path.Close();
+            return path;
+        }
+
+        void UpdateShadowGeometry()
+        {
+            var geometry = NativeView.Geometry;
+            if (ShadowElement.Content != null)
+            {
+                var contentNativeView = Platform.GetOrCreateRenderer(ShadowElement.Content)?.NativeView;
+                if (contentNativeView != null)
+                {
+                    geometry = contentNativeView.Geometry;
+                }
+            }
+            double left = 0;
+            double top = 0;
+            double right = 0;
+            double bottom = 0;
+            var scaledOffsetX = Forms.ConvertToScaledPixel(ShadowElement.ShadowOffsetX);
+            var scaledOffsetY = Forms.ConvertToScaledPixel(ShadowElement.ShadowOffsetY);
+            var scaledBlurRadius = Forms.ConvertToScaledPixel(ShadowElement.ShadowBlurRadius);
+            var spreadSize = scaledBlurRadius * 3;
+            var sl = scaledOffsetX - spreadSize;
+            var sr = scaledOffsetX + spreadSize;
+            var st = scaledOffsetY - spreadSize;
+            var sb = scaledOffsetY + spreadSize;
+            if (left > sl) left = sl;
+            if (top > st) top = st;
+            if (right < sr) right = sr;
+            if (bottom < sb) bottom = sb;
+
+            var canvasGeometry = new ElmSharp.Rect(
+                geometry.X + (int)left,
+                geometry.Y + (int)top,
+                geometry.Width + (int)right - (int)left,
+                geometry.Height + (int)bottom - (int)top);
+            if (_shadowCanvasView != null)
+            {
+                _shadowCanvasView.Geometry = canvasGeometry;
+                _shadowCanvasView.Invalidate();
+            }
+        }
+    }
+
+    internal static class SkExtensions
+    {
+        internal static SKPath ArcTo(this SKPath path, float radius, SKPoint finalPoint)
+        {
+            path.ArcTo(new SKPoint(radius, radius), 0, SKPathArcSize.Small, SKPathDirection.Clockwise, finalPoint);
+            return path;
+        }
+        internal static SKColor ToSK(this Color color)
+        {
+            return new SKColor((byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255), (byte)(color.A * 255));
+        }
+    }
+}
diff --git a/src/Tizen.Theme.Common/ShadowFrame.cs b/src/Tizen.Theme.Common/ShadowFrame.cs
new file mode 100644
index 0000000..9cb0c44
--- /dev/null
+++ b/src/Tizen.Theme.Common/ShadowFrame.cs
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an AS IS BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+using Xamarin.Forms;
+using Xamarin.Forms.Internals;
+
+namespace Tizen.Theme.Common
+{
+    /// <summary>
+    /// A Frame with shadow effects
+    /// </summary>
+    public class ShadowFrame : Frame
+    {
+        /// <summary>
+        /// Identifies the CornerRadius bindable property.
+        /// </summary>
+        public static new readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(CornerRadius), typeof(ShadowFrame), default(CornerRadius));
+
+        /// <summary>
+        /// Identifies the BorderWidth bindable property.
+        /// </summary>
+        public static readonly BindableProperty BorderWidthProperty = BindableProperty.Create(nameof(BorderWidth), typeof(double), typeof(ShadowFrame), 1.0);
+
+        /// <summary>
+        /// Identifies the ShadowOffsetX bindable property.
+        /// </summary>
+        public static readonly BindableProperty ShadowOffsetXProperty = BindableProperty.Create(nameof(ShadowOffsetX), typeof(double), typeof(ShadowFrame), 0d);
+
+        /// <summary>
+        /// Identifies the ShadowOffsetY bindable property.
+        /// </summary>
+        public static readonly BindableProperty ShadowOffsetYProperty = BindableProperty.Create(nameof(ShadowOffsetY), typeof(double), typeof(ShadowFrame), 8.0);
+
+        /// <summary>
+        /// Identifies the ShadowColor bindable property.
+        /// </summary>
+        public static readonly BindableProperty ShadowColorProperty = BindableProperty.Create(nameof(ShadowColor), typeof(Color), typeof(ShadowFrame), Color.FromHex("#3E000000"));
+
+        /// <summary>
+        /// Identifies the ShadowOpacity bindable property.
+        /// </summary>
+        public static readonly BindableProperty ShadowOpacityProperty = BindableProperty.Create(nameof(ShadowOpacity), typeof(double), typeof(ShadowFrame), .24d, coerceValue: (bindable, value) => ((double)value).Clamp(0, 1));
+
+
+        /// <summary>
+        /// Identifies the ShadowBlur bindable property.
+        /// </summary>
+        public static readonly BindableProperty ShadowBlurRadiusProperty = BindableProperty.Create(nameof(ShadowBlurRadius), typeof(double), typeof(ShadowFrame), 10d);
+
+        /// <summary>
+        /// Gets or sets a value that represents CornerRadius.
+        /// </summary>
+        public new CornerRadius CornerRadius
+        {
+            get => (CornerRadius)GetValue(CornerRadiusProperty);
+            set => SetValue(CornerRadiusProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a value that represents BorderWidth.
+        /// </summary>
+        public double BorderWidth
+        {
+            get => (double)GetValue(BorderWidthProperty);
+            set => SetValue(BorderWidthProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a shadow offset x.
+        /// </summary>
+        public double ShadowOffsetX
+        {
+            get => (double)GetValue(ShadowOffsetXProperty);
+            set => SetValue(ShadowOffsetXProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a shadow offset y.
+        /// </summary>
+        public double ShadowOffsetY
+        {
+            get => (double)GetValue(ShadowOffsetYProperty);
+            set => SetValue(ShadowOffsetYProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a shadow color.
+        /// </summary>
+        public Color ShadowColor
+        {
+            get => (Color)GetValue(ShadowColorProperty);
+            set => SetValue(ShadowColorProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a shadow opacity.
+        /// </summary>
+        public double ShadowOpacity
+        {
+            get => (double)GetValue(ShadowOpacityProperty);
+            set => SetValue(ShadowOpacityProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a shadow blur radius.
+        /// </summary>
+        public double ShadowBlurRadius
+        {
+            get => (double)GetValue(ShadowBlurRadiusProperty);
+            set => SetValue(ShadowBlurRadiusProperty, value);
+        }
+    }
+}