Slides of my presentation about drawing Xmas controls in Xamarin mobile apps at Festive Tech Calendar 2021

1. FestiveTechCalendar 2021
https://festivetechcalendar.com

2. Drawing X-mas
controls in mobile
apps with Xamarin
Luis Beltrán
Microsoft MVP

3. Shapes
Shape is a View that you can use to draw something in Xamarin.Forms 5.
<Ellipse Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />

4. Shape Types
• Ellipse
• Line
• Path
• Polygon
• Polyline
• Rectangle
<Rectangle Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
StrokeDashArray="1,1"
StrokeDashOffset="6"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />
<Polyline Points="20 20,250 50,20 120"
Stroke="DarkBlue"
StrokeThickness="20"
StrokeLineJoin="Round" />

5. Demo #1 - Drawing a X-mas Tree

6. Brush – Painting a Shape
A Brush object is required to Paint a Shape. Two properties are
provided: Stroke and Fill.
<Ellipse Fill="DarkBlue"
Stroke="Red"
StrokeThickness="4"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Start" />

7. Brush Types
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush

8. <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0"
/> </LinearGradientBrush>

9. <Frame BorderColor="LightGray"
HasShadow="True"
CornerRadius="12"
HeightRequest="120"
WidthRequest="120">
<Frame.Background>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0.1" />
<GradientStop Color="DarkBlue" Offset="1.0"
/>
</RadialGradientBrush>
</Frame.Background>
</Frame>

10. Demo #2 – Creating X-mas Spheres

11. Demo #3 – Drawing a X-mas Star

12. Demo #4 – Drag & Drop

13. Thank you
https://festivetechcalendar.com