Cybertruck in XAML and running Cross-Platform with WebAssembly

It simply had to be done – Cybertruck in XAML. See for yourself, and further customize the Cybertruck if you’d like, in our WebAssembly implementation of Cybertruck.

Go ahead, have a swing at its windows with your mouse! Shout out goes to Lynn Fisher whose tweet inspired us to recreate Cybertruck in XAML. Of course we had to add a lil’ Uno logo there on the door.

What is Uno Platform anyway?

Before getting into the details of Cybertruck in XAML. The Uno Platform enables C# and XAML based code to run on iOS, Android, and WebAssembly. To avoid having to learn the UI-layout techniques and approaches for each platform, the Uno Platform mimics the Windows XAML approach of defining UI and layouts. The Uno Platform does this by providing full API definitions of the Universal Windows Platform and implementations of parts of the API – such as Windows.UI.XAML. Uno Platform is Open Source (Apache 2.0) and available on GitHub. As fans of XAML, and Tesla, it made sense we have some fun with Cybertruck.

How did we do it?

Everything was done in XAML and we mainly used simple controls for the entire content (Grid, Border, Path and a ViewBox to be able to resize the content for all aspect ratios).
For the colors, we used solid ones or LinearGradientBrushes (Horizontal, Vertical or Diagonal).
In terms of animations, we simply used DoubleAnimations, changing the Opacity for the lights or using aRotateTransform for the wheels.

We created every part of the car using vector graphics software in order to create an SVG file, you can use your favorite software package for that part (eg Inkscape, Adobe Illustrator, PaintShop Pro, …).
You will then be able to extract the needed data in the generated SVG file, and use them in the different Path controls inside the content.

How can you customize it?

Having the CyberTruck in action running WebAssembly is pretty cool, but be able to customize it is also fun – https://playground.platform.uno/#cybertruck.

SOURCE

Leave a Reply