Skip to content

Commit 23582d3

Browse files
jsuarezruizjsuarezruiz
committed
Added Skia RenderMode
1 parent f922de7 commit 23582d3

34 files changed

+4293
-102
lines changed

‎src/TemplateUI.Gallery.Android/Resources/Resource.designer.cs‎

Lines changed: 2619 additions & 54 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/TemplateUI.Gallery.Android/TemplateUI.Gallery.Android.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,10 @@
212212
<Project>{D9A11260-71D9-42DB-969F-733793E98E34}</Project>
213213
<Name>TemplateUI.Gallery</Name>
214214
</ProjectReference>
215+
<ProjectReference Include="..\TemplateUI.Skia\TemplateUI.Skia.csproj">
216+
<Project>{84AA6F02-5CC4-4E54-A7E7-6A975E88579F}</Project>
217+
<Name>TemplateUI.Skia</Name>
218+
</ProjectReference>
215219
</ItemGroup>
216220
<Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
217221
</Project>

‎src/TemplateUI.Gallery/App.xaml.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
using TemplateUI.Gallery.Views;
2+
using TemplateUI.Skia;
23
using Xamarin.Forms;
34

45
namespace TemplateUI.Gallery
@@ -10,6 +11,7 @@ public App()
1011
InitializeComponent();
1112

1213
TemplateUI.Init();
14+
TemplateUISkia.Init();
1315

1416
MainPage = new CustomNavigationPage(new MainView());
1517
}

‎src/TemplateUI.Gallery/TemplateUI.Gallery.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<ItemGroup>
1919
<ProjectReference Include="..\TemplateUI\TemplateUI.csproj" />
20+
<ProjectReference Include="..\TemplateUI.Skia\TemplateUI.Skia.csproj" />
2021
</ItemGroup>
2122

2223
</Project>

‎src/TemplateUI.Gallery/Views/SliderGallery.xaml‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,20 @@
99
<StackLayout
1010
Padding="12">
1111
<Label
12-
Text="Getting Started"/>
12+
Text="Native RenderMode"/>
1313
<controls:Slider
1414
Minimum="0"
1515
Maximum="10"
1616
Value="5"
1717
ValueChanged="OnSliderValueChanged"/>
18+
<Label
19+
Text="Skia RenderMode"/>
20+
<controls:Slider
21+
Minimum="0"
22+
Maximum="10"
23+
Value="5"
24+
RenderMode="Skia"
25+
ValueChanged="OnSliderValueChanged"/>
1826
<Label
1927
Text="Customize the background colors"/>
2028
<controls:Slider

‎src/TemplateUI.Gallery/Views/ToggleSwitchGallery.xaml‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@
1818
</ContentPage.Content>
1919
</ContentPage>
2020
<ContentPage
21-
Title="VisualType"
21+
Title="VisualType and RenderMode"
2222
IconImageSource="customize.png">
2323
<ContentPage.Content>
2424
<StackLayout
2525
Padding="12">
26+
<Label
27+
FontSize="Medium"
28+
Text="Native RenderMode"/>
2629
<Label
2730
Text="Cupertino"/>
2831
<controls:ToggleSwitch
@@ -41,6 +44,30 @@
4144
OffColor="Gray"
4245
OnColor="Green"
4346
VisualType="Material"/>
47+
<Label
48+
FontSize="Medium"
49+
Text="Skia RenderMode"/>
50+
<Label
51+
Text="Cupertino"/>
52+
<controls:ToggleSwitch
53+
OffColor="Gray"
54+
OnColor="DarkGray"
55+
RenderMode="Skia"
56+
VisualType="Cupertino"/>
57+
<Label
58+
Text="Fluent"/>
59+
<controls:ToggleSwitch
60+
OffColor="Gray"
61+
OnColor="Blue"
62+
RenderMode="Skia"
63+
VisualType="Fluent"/>
64+
<Label
65+
Text="Material"/>
66+
<controls:ToggleSwitch
67+
OffColor="Gray"
68+
OnColor="Green"
69+
RenderMode="Skia"
70+
VisualType="Material"/>
4471
</StackLayout>
4572
</ContentPage.Content>
4673
</ContentPage>
@@ -87,4 +114,21 @@
87114
</StackLayout>
88115
</ContentPage.Content>
89116
</ContentPage>
117+
<ContentPage
118+
Title="Performance"
119+
IconImageSource="customize.png">
120+
<ContentPage.Content>
121+
<StackLayout
122+
Padding="12">
123+
<Label
124+
Text="Measure the time to load a page with 10 ToggleSwitch using Native and Skia RenderMode."/>
125+
<Button
126+
Text="Using Native RenderMode"
127+
Clicked="OnNativeRenderModeClicked"/>
128+
<Button
129+
Text="Using Skia RenderMode"
130+
Clicked="OnSkiaRenderModeClicked"/>
131+
</StackLayout>
132+
</ContentPage.Content>
133+
</ContentPage>
90134
</TabbedPage>

‎src/TemplateUI.Gallery/Views/ToggleSwitchGallery.xaml.cs‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
using Xamarin.Forms;
1+
using System;
2+
using System.Diagnostics;
3+
using TemplateUI.Controls;
4+
using Xamarin.Forms;
25

36
namespace TemplateUI.Gallery.Views
47
{
@@ -8,5 +11,52 @@ public ToggleSwitchGallery()
811
{
912
InitializeComponent();
1013
}
14+
15+
void OnNativeRenderModeClicked(object sender, EventArgs e)
16+
{
17+
Navigation.PushAsync(new PerformanceToggleSwitchGallery(RenderMode.Native));
18+
}
19+
20+
void OnSkiaRenderModeClicked(object sender, EventArgs e)
21+
{
22+
Navigation.PushAsync(new PerformanceToggleSwitchGallery(RenderMode.Skia));
23+
}
24+
}
25+
26+
public class PerformanceToggleSwitchGallery : ContentPage
27+
{
28+
readonly Stopwatch _stopwatch;
29+
30+
public PerformanceToggleSwitchGallery(RenderMode renderMode, int numberOfViews = 10)
31+
{
32+
_stopwatch = new Stopwatch();
33+
_stopwatch.Start();
34+
35+
Title = "Performance ToggleSwitch Gallery";
36+
37+
var layout = new StackLayout();
38+
39+
for(int i = 0; i < numberOfViews; i++)
40+
{
41+
var toggleSwitch = new ToggleSwitch
42+
{
43+
VisualType = VisualType.Material,
44+
RenderMode = renderMode
45+
};
46+
47+
layout.Children.Add(toggleSwitch);
48+
}
49+
50+
Content = layout;
51+
}
52+
53+
protected override void OnAppearing()
54+
{
55+
base.OnAppearing();
56+
57+
_stopwatch.Stop();
58+
59+
Debug.WriteLine($"{_stopwatch.ElapsedMilliseconds} ms");
60+
}
1161
}
1262
}

‎src/TemplateUI.Skia/Controls/SKBoxView.cs‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
using SkiaSharp;
2+
using SkiaSharp.Views.Forms;
3+
using Xamarin.Forms;
4+
5+
namespace TemplateUI.Skia.Controls
6+
{
7+
public class SKBoxView : SKCanvasView
8+
{
9+
Color _color;
10+
CornerRadius _cornerRadius;
11+
12+
public SKBoxView() : base()
13+
{
14+
}
15+
16+
public static readonly BindableProperty ColorProperty =
17+
BindableProperty.Create(nameof(Color), typeof(Color), typeof(SKBoxView), Color.Default, BindingMode.OneWay, null,
18+
propertyChanged: OnColorChanged);
19+
20+
static void OnColorChanged(BindableObject bindable, object oldValue, object newValue)
21+
{
22+
(bindable as SKBoxView)?.UpdateColor((Color)newValue);
23+
}
24+
25+
public Color Color
26+
{
27+
get => (Color)GetValue(ColorProperty);
28+
set => SetValue(ColorProperty, value);
29+
}
30+
31+
public static readonly BindableProperty CornerRadiusProperty =
32+
BindableProperty.Create(nameof(CornerRadius), typeof(CornerRadius), typeof(SKBoxView), new CornerRadius(), BindingMode.OneWay, null,
33+
propertyChanged: OnCornerRadiusChanged);
34+
35+
static void OnCornerRadiusChanged(BindableObject bindable, object oldValue, object newValue)
36+
{
37+
(bindable as SKBoxView)?.UpdateCornerRadius((CornerRadius)newValue);
38+
}
39+
40+
public CornerRadius CornerRadius
41+
{
42+
get => (CornerRadius)GetValue(CornerRadiusProperty);
43+
set => SetValue(CornerRadiusProperty, value);
44+
}
45+
46+
protected override void OnPaintSurface(SKPaintSurfaceEventArgs args)
47+
{
48+
var surface = args.Surface;
49+
var canvas = surface.Canvas;
50+
51+
canvas.Clear();
52+
53+
using (var paint = new SKPaint())
54+
{
55+
paint.Style = SKPaintStyle.Fill;
56+
paint.IsAntialias = true;
57+
58+
SkiaSharp.SKPath path = CreateRoundedRectPath(0, 0, args.Info.Width, args.Info.Height, _cornerRadius);
59+
60+
paint.Color = _color.ToSKColor();
61+
canvas.ClipPath(path, SKClipOperation.Intersect, true);
62+
canvas.DrawPath(path, paint);
63+
}
64+
}
65+
66+
SkiaSharp.SKPath CreateRoundedRectPath(int left, int top, int width, int height, CornerRadius cornerRadius)
67+
{
68+
var path = new SkiaSharp.SKPath();
69+
var skRoundRect = new SKRoundRect(new SKRect(left, top, width, height));
70+
71+
SKPoint[] radii = new SKPoint[4]
72+
{
73+
new SKPoint((float)cornerRadius.TopLeft, (float)cornerRadius.TopLeft),
74+
new SKPoint((float)cornerRadius.TopRight, (float)cornerRadius.TopRight),
75+
new SKPoint((float)cornerRadius.BottomRight, (float)cornerRadius.BottomRight),
76+
new SKPoint((float)cornerRadius.BottomLeft, (float)cornerRadius.BottomLeft)
77+
};
78+
79+
skRoundRect.SetRectRadii(skRoundRect.Rect, radii);
80+
path.AddRoundRect(skRoundRect);
81+
path.Close();
82+
83+
return path;
84+
}
85+
86+
void UpdateColor(Color color)
87+
{
88+
_color = color;
89+
InvalidateSurface();
90+
}
91+
92+
void UpdateCornerRadius(CornerRadius cornerRadius)
93+
{
94+
_cornerRadius = cornerRadius;
95+
InvalidateSurface();
96+
}
97+
}
98+
}

‎src/TemplateUI.Skia/Controls/SKEllipse.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
using Xamarin.Forms;
2+
3+
namespace TemplateUI.Skia.Controls
4+
{
5+
public class SKEllipse : SKShape
6+
{
7+
public SKEllipse() : base()
8+
{
9+
Aspect = Stretch.Fill;
10+
UpdateShape();
11+
}
12+
13+
void UpdateShape()
14+
{
15+
var path = new SkiaSharp.SKPath();
16+
path.AddCircle(0, 0, 1);
17+
UpdateShape(path);
18+
}
19+
}
20+
}

0 commit comments

Comments
 (0)