I’m thrilled to announce that the recording of my presentation at TEQnation is now available for you to watch! In this talk, I delve into the crucial and innovative field of Green Software Development, exploring how we can build more sustainable and eco-friendly software solutions.

Here’s a glimpse of what you’ll learn:

• CSRD (Corporate Sustainability Reporting Directive): Understand the implications of CSRD and how it drives organizations towards more transparent and sustainable practices.
• The Green Software Foundation: Learn about the foundation’s mission and initiatives aimed at promoting greener software development across the industry.
• Energy Efficiency: Discover techniques to optimize software to consume less energy, thereby reducing its environmental footprint.
• Hardware Efficiency: Explore strategies to enhance hardware utilization, extending the life of devices and reducing electronic waste.
• Carbon Awareness: Gain insights into the importance of being carbon-aware in your software projects and the impact it has on our planet.
• Temporal Shifting: Learn about this innovative approach to scheduling computational tasks at times when renewable energy is more available.
• Demand Shifting: Understand how to manage and shift software demand to align with sustainable energy supply.
• GreenUX: Discover how user experience design can contribute to energy efficiency and sustainability.
• Measuring Carbon: Learn practical methods for measuring the carbon footprint of your software to track and reduce its environmental impact.

This presentation is packed with actionable insights and practical examples that will inspire you to integrate sustainability into your software development practices. Whether you’re a developer, designer, or a tech enthusiast, there’s something valuable for everyone.

Slides

Join me in exploring the future of Green Software Development and let’s work together towards a more sustainable digital world! Tell me what you think through X or leave a comment below!

The post Presentation: Sustainable Software: May the Green Code Be with You [TEQnation] appeared first on Marcofolio.net.

The demo that I created is fully inspired by some retro games, can you name them all? I’ll give you a hint: they were part of the Pixels-movie as well. Answers can be found at the bottom of this post!

Draw text from a Path

First we’ll need to get the Path data from the font that we want to use. The Google font to SVG path converter is an excellent source to convert any Google Font to Path data. I selected the Press Start 2P-font since it has that retro vibe and is thick enough to keep the image visible.

Simply fill in the text that you want to convert to Path data and the tool will generate it for you. Copy this data into your Xamarin.Forms application and use the Path-shape do draw the character.

<Path Fill="Black"
    Data="M 25 87.5 L 0 87.5 L 0 62.5 L 12.5 62.5 L 12.5 50 L 25 50 L 25 37.5 L 12.5 37.5 L 12.5 25 L 0 25 L 0 0 L 25 0 L 25 25 L 37.5 25 L 37.5 37.5 L 50 37.5 L 50 25 L 62.5 25 L 62.5 0 L 87.5 0 L 87.5 25 L 75 25 L 75 37.5 L 62.5 37.5 L 62.5 50 L 75 50 L 75 62.5 L 87.5 62.5 L 87.5 87.5 L 62.5 87.5 L 62.5 62.5 L 50 62.5 L 50 50 L 37.5 50 L 37.5 62.5 L 25 62.5 L 25 87.5 Z" />

This code will give you the following result:

You can repeat this process with all the other characters and change the font to your needs.

Clip an Image using the Path

Having a black background is pretty boring and you could easily use Embedded Fonts if this is the goal that you want to achieve. We’ll spice it up by applying an image to this character. Or, in other words, get an image and only keep the Path data that represents the character.

We can achieve this by using the Clip property of an Image. Passing along the Path data clips away the rest, resulting in text that has a background image!

<Image HeightRequest="100"
    Source="https://raw.githubusercontent.com/marcofolio/Arcade/master/_img/03-pacman.jpg"
    Clip="M 25 87.5 L 0 87.5 L 0 62.5 L 12.5 62.5 L 12.5 50 L 25 50 L 25 37.5 L 12.5 37.5 L 12.5 25 L 0 25 L 0 0 L 25 0 L 25 25 L 37.5 25 L 37.5 37.5 L 50 37.5 L 50 25 L 62.5 25 L 62.5 0 L 87.5 0 L 87.5 25 L 75 25 L 75 37.5 L 62.5 37.5 L 62.5 50 L 75 50 L 75 62.5 L 87.5 62.5 L 87.5 87.5 L 62.5 87.5 L 62.5 62.5 L 50 62.5 L 50 50 L 37.5 50 L 37.5 62.5 L 25 62.5 L 25 87.5 Z" />

The code above will produce the following output:

Bring it all together

Now that we have that first character, we already got the core of this technique. We’ll need to add more characters for the complete text and I also added a Path behind the text to give it a little bit of a shadow.

<!-- X -->
<AbsoluteLayout>
    <Path Fill="Black" Margin="5, 5, 0, 0"
            Data="M 25 87.5 L 0 87.5 L 0 62.5 L 12.5 62.5 L 12.5 50 L 25 50 L 25 37.5 L 12.5 37.5 L 12.5 25 L 0 25 L 0 0 L 25 0 L 25 25 L 37.5 25 L 37.5 37.5 L 50 37.5 L 50 25 L 62.5 25 L 62.5 0 L 87.5 0 L 87.5 25 L 75 25 L 75 37.5 L 62.5 37.5 L 62.5 50 L 75 50 L 75 62.5 L 87.5 62.5 L 87.5 87.5 L 62.5 87.5 L 62.5 62.5 L 50 62.5 L 50 50 L 37.5 50 L 37.5 62.5 L 25 62.5 L 25 87.5 Z" />

    <Image HeightRequest="100"
            Clip="M 25 87.5 L 0 87.5 L 0 62.5 L 12.5 62.5 L 12.5 50 L 25 50 L 25 37.5 L 12.5 37.5 L 12.5 25 L 0 25 L 0 0 L 25 0 L 25 25 L 37.5 25 L 37.5 37.5 L 50 37.5 L 50 25 L 62.5 25 L 62.5 0 L 87.5 0 L 87.5 25 L 75 25 L 75 37.5 L 62.5 37.5 L 62.5 50 L 75 50 L 75 62.5 L 87.5 62.5 L 87.5 87.5 L 62.5 87.5 L 62.5 62.5 L 50 62.5 L 50 50 L 37.5 50 L 37.5 62.5 L 25 62.5 L 25 87.5 Z"
            Source="https://raw.githubusercontent.com/marcofolio/Arcade/master/_img/03-pacman.jpg" />
</AbsoluteLayout>

Now repeat this process for all the characters, add a fancy background and make it look good. The complete result can be viewed in the MainPage.xaml . Since we’re working with Xamarin.Forms, the end-result will look pretty on both iOS & Android!

Conclusion & Download

Although the result might look pretty good, it does feel a bit like a hacky solution. Since the text isn’t real text, but rather images that are clipped down, screen readers won’t work. Another downside is that not all fonts can be used, where Xamarin.Forms gives Exceptions due to not being to able to parse all the data.

Just like the Colorful Geometric Background sample, I would not recommend to use this in production right now, but there might be prettier solutions in the future. Feel free to poke around in the code on Github and send me a PR if you have one! What do you think?

The following games were used in the demo. How many did you guess correctly?

• Tetris
• Dig Dug
• Pac-Man
• Donkey Kong
• Mario
• Q*bert
• Breakout

All product names, logos, and brands are property of their respective owners.

The post How to Fill Text with Images in Xamarin.Forms appeared first on Marcofolio.net.

The design is completely inspired by Chris Spooner from SpoonGraphics. His article “How to Create a Colourful Geometric Pattern in Illustrator” made me think “Hey, I can code this!“. I was lucky enough to interview this talented creative back in 2009 and I would still recommend you to follow him if you want the highest quality design tutorials and resources out there. Let’s get to it!

The result

Let’s start with the result in mind. The colorful geometric background will look like the sample you see on the left. Xamarin.Forms Shapes makes building this easy & cross-platform usable without using any images! You can view the complete result on Github.

All this background is, is a collection of triangles. Four of them make a square or block and when rotating a block, it creates this neat pattern. Let’s start drawing Shapes!

Polygon

A polygon is a shape where you define points to create a series of connected lines that form closed shapes. In other words, perfect to draw a triangle! Consider the following XAML:

Start by drawing one triangle:

<Polygon Points="0,0 90,0 45,45"
Fill="#E8E9B7" />

We can now copy & rotate the triangle to create a block:

<Polygon Points="0,0 90,0 45,45"
Fill="#E8E9B7" />
<Polygon Points="90,0 90,90 45,45"
Fill="#B0BAA4" />
<Polygon Points="0,90 45,45 90,90"
Fill="#7A8992" />
<Polygon Points="0,0 45,45 0,90"
Fill="#6D657E" />

Multiple rotated blocks create the pattern. We don’t need to rotate the actual block, but only the colors of the block need to be rotated. Here’s a sample in XAML on how to create two rotated blocks to start the pattern.

<AbsoluteLayout>
    <Polygon Points="0,0 90,0 45,45" Fill="#E8E9B7" />
    <Polygon Points="90,0 90,90 45,45" Fill="#B0BAA4" />
    <Polygon Points="0,90 45,45 90,90" Fill="#7A8992" />
    <Polygon Points="0,0 45,45 0,90" Fill="#6D657E" />
</AbsoluteLayout>
<AbsoluteLayout Margin="90,0,0,0">
    <Polygon Points="0,0 90,0 45,45" Fill="#B0BAA4" />
    <Polygon Points="90,0 90,90 45,45" Fill="#7A8992" />
    <Polygon Points="0,90 45,45 90,90" Fill="#6D657E" />
    <Polygon Points="0,0 45,45 0,90" Fill="#E8E9B7" />
</AbsoluteLayout>

Generating the pattern

We could just copy & paste this XAML to fill the entire background of the application, but since you don’t know the exact size of the screen that would be a complete waste. This led me to converting the XAML to C# and create a Block-class that represents the block with the four triangles. The generation of all the blocks and colours are handled in the MainPage. I used Xamarin.Essentials to determine te screen size and generate the blocks accordingly. Since everything is Xamarin, the result looks pretty good on both iOS & Android!

Feel free to poke around in the code on Github to learn, experiment or improve on the code.

Closing thoughts

Overall I’m pretty satisfied with the result! It gives a more vibrant feel to the application and using no images makes the app size a lot smaller. Having said that, I would not recommend using this technique right now in production apps. Xamarin.Forms Shapes is currently Experimental and I notice a performance hit when the background is being generated. Also, on iOS it looks like there are some issues with rounding numbers since you’ll see very thin white lines between some of the blocks.

What do you think? If you know a fix for those white lines feel free to create a PR and let me know your thoughts in the comments!

Learn more about Xamarin.Forms Shapes:

• Shapes & Paths on Xamarin Blog
• Shapes Demo on GitHub

The post Colorful Geometric Background using Xamarin.Forms Shapes appeared first on Marcofolio.net.

When creating a new app in Visual Studio, simply select the checkbox “Add an automated UI Test project” to add an UITest to your application. Now let’s see what kind of code or functionality I use from Xamarin.UITest to create useful tests!

In this sample I’ll be using the following XAML code to create a very simple Xamarin.Forms (or Maui?) application with an input field that validates if the input is using only digits. Take special note of the usage of AutomationId, since we’ll be using it later.

<StackLayout Margin="20">
    <Label  Text="Only enter digits" />
    <Entry  AutomationId="entryDigits" />
    <Button Text="Validate" />
    <Label  AutomationId="lblResult" IsVisible="false" />
</StackLayout>

Using this simple example, we can also cover the most commonly used actions inside of many applications. These are:

• Entering text in an Entry-field
• Submitting a form using a Button
• Validating results by checking the output

Let’s see how these common tasks are handled in Xamarin.UITest!

Marked

First things first. We’ll need to learn about how Xamarin.UITest works with the Marked-method. This method allows us to search for elements in the UI that are Marked (hence the name) by passing on a string-value.

When we fire up the REPL through app.Repl() and enter the tree-command, we can see how our simple application is built up. The AutomationId is translated to label, which we can use to automate. The text-value can also be used.

We can simply pass along these values to the Marked-method to get the element that we want. For example, "entryDigits" would give us the input field while "Validate" would give us access to the Button. Sweet!

Enter text

We can now use the EnterText-method to add some text to the input field. The first parameter is the Marked-value and the second the value we’d like to add in the test.

var inputToValidate = "12345";
app.EnterText("entryDigits", inputToValidate);

Many times, I’d like to pair the EnterText with a ClearText up front to make sure the input field is empty.

Press a button

To press the button, we’ll be using the Tap-method. The button can be accessed by the text so tapping it will be easy.

app.Tap("Validate");

Validating results

Now to validate the results. For this, I’d like to use the WaitForElement-method. Although we can manually check if the correct validation results are available, the WaitForElement-method allows us to pass along a timeout when the element doesn’t show up (for example, when network errors occur).

app.WaitForElement("lblResult", "Results didn't return");
var validationResult = app.Query("lblResult")[0].Text;

We can now use the validationResult in our test case to Assert the correct output value. These are the methods that I like to use most when testing Xamarin.Forms applications! Do you have others that you use often?

Honorable mentions

I didn’t want to finish the article without mentioning these methods that I use commonly, but not always.

• app.Screenshot – Taking a screenshot of the current state of your application can be really useful, especially when using Visual Studio App Center.
• app.Flash – Searching the right element in the UI can be hard. Inside the REPL, the Flash-method can help you validate if you have the correct element selected.
• copy – A command within the REPL to easily copy all the input in your terminal to your clipboard, for easy pasting back into the test.

This post is my entry for #XamarinMonth, an initiative by Luis Matos. The theme of this month is “Xamarin Code Snippets“, but since I’m not a fan of Snippets myself I focused on commonly used code you can turn in a snippet if you want to. Get more Xamarin Code Snippets by checking out the other entries too.

The post Commonly used code in Xamarin.UITest appeared first on Marcofolio.net.

Let’s first back up in time: just before the Xamarin Evolve conference took place in 2016, it was announced that Microsoft acquired Xamarin. This was a huge step forward for the Xamarin brand, but also raises the question on how Microsoft would adopt the platform. They promised the name would stay the same and for most of it, Microsoft has done a really good job at incorporating the people and tools into their ecosystem.

Today, Microsoft announced their step forward towards the “Journey to one .NET“. One platform with all the tools developers need to build awesome software for all platforms.

With that, .NET Multi-platform App UI is also introduced. The abbreviation for this framework is MAUI and will be used as Maui.

Maui is essentially the next evolution of Xamarin.Forms but it’ll be a lot more than just a rebrand. One of the most amazing things is that it has a single project from a single codebase. No more different heads for iOS and Android! Next to MVVM, Maui will also support the new and exciting MVU (Model-View-Update) design pattern, also known as The Elm Architecture, and will get Blazor support.

Support for the .NET CLI will also be added, which means that start a project with a simple command: dotnet new maui. Namespaces will be upgraded as well, Xamarin.Forms will make place for System.Maui. Xamarin.Essentials will also come along by moving to System.Device, completing the most important toolset for mobile .NET developers.

Where does it leave Xamarin.Native development (Xamarin.iOS & Xamarin.Android)? Both will be incorporated into the .NET 6 Platform and renamed to .NET for iOS & .NET for Android respectively. They’ll get CLI support as well: dotnet new ios & dotnet new android, making development even faster.

Did you know Microsoft already name-dropped the term Maui in 2016? It was already prominently featured in a video from the HoloLens. Does this mean Maui will be available soon? Sadly, the answer is no, since we’ll have to wait until the .NET 6 release which is scheduled for November 2021 (previews will be available later in 2020).

Maui is open source, so you can easily follow the development progress on their Github repository. They have their Roadmap already shared. We’ll have to be patient before we can play with the new toys, but it looks very promising!

Personally, I’m really looking forward to these next steps. Although I’m sad we’re moving away from the Xamarin-name, but we also survived the Monodroid/MonoTouch rebrands. Maui does have a nice ring to it! I just hope they keep the monkeys and move their conferences to Maui (Hawaii). There will be some challenging times ahead, like updates namespaces, upgrading from Xamarin.Forms (there will be a try-convert tool) and renaming Xamarin Meetup groups, but I’m sure we’ll manage. Like Maui from the Disney movie Moana says: “It’s Maui, breathe it in“.

What do you think about this rebrand? Is Microsoft moving towards the right direction? Let me know your thoughts in the comments. Read more:

• Introducing .NET Multi-platform App UI

Closing note: Even though Maui is still far away, Xamarin.Forms is still maintained and has some great features on its way! Check out their Feature Roadmap for upcoming functionality.

The post Goodbye Xamarin, aloha Maui! appeared first on Marcofolio.net.

But, with some help of FFImageLoading, we can get the same results. In particular, the CropTransformation can crop away parts of an image so we can have some fun with each individual tile that makes up the complete image. So today, we’ll see how to build beautiful tiled image animations with Xamarin.Forms. You can view the source on Github if you directly want to dive into the code. Since it’s 4th of July, I’ve made sure the demos include some fireworks as well!

Demo

Let’s take a look at what we’ll be creating. The text and images for this demo are from PopOptiq, but can easily be changed to suit your needs.

The concept

The idea can be broken down into several steps:

1. Split an image into sevaral tiles that together make up the complete image. The CropTransformation from FFImageLoading will help us to create these tiles.
2. Use Xamarin.Forms Animations to individually animate the tiles.
3. Add some settings to switch the animations, as well as the tile size and tile count. We’ll use the Master-Detail page to achieve this.

Now that we have these steps, let’s dive into them!

Splitting the image into tiles

When splitting an image, we need to use both offset-parameters (x and y parameter) for the CropTransformation from FFImageLoading. Depending on the size and location of the Tile, a different offset will be used. Dive into the TileView to see how this offset can be calculated.

My colleagues Youp & Bas helped me wrap my mind around this puzzle, but we managed to get it working.

Once we got all individual Tiles, we can start animating them to create a fun effect! All tiles together will still form the perfect image inside the Grid.

Xamarin.Forms Animations

Xamarin has some very useful and easy Simple Animations. I’ve used them before to create animated profile cards. In this demo, I’ve created the following animations:

• Explode: Shatters the tiles in different directions
• Implode: Makes the tiles smaller
• Flip: Flip them left or right in 3D
• Spin: Spin them left or right around their center point

As you can imagine, loads of other different animations can be applied to these tiles.

Settings

To play around with the demo, I added some basic settings you can use. This will help find an ideal situation for your Tiled animations.

• The Tile Size is the value for both the height and width of each tile. You can calculate this dynamically based on the screen size, but for now it’s fixed in the configuration.
• The Tile Count is the number of tiles in each row or column. Take note that this number shouldn’t be too high due to performace issues.
• The selection of Animation Style is created to switch different kind of animations. You can easily add new ones as well by updating the TiledImageView!

Conclusion & Download

I think the demo does provide some interesting thoughts on how a different kind of animation for images can be made. It something different than you’d normally see on slideshows!

There are some things that I already want to point out to take into account:

• On some scales, there’s a very small gap visible between the Tiles. I think it has to do with the way FFImageLoading Crops an image.
• Although the demo works on both iOS and Android, iOS is the platform that produces the best results. This probably has to do with the way Android handles images.
• By default, FFImageLoading caches the cropped image once it has been rendered for the first time. This means animations will be smoother the next time the same Tile is produced.

Feel free to dive in the code on Github and send me a Pull Request if you want to see things differently! What do you think of this idea and approach? Let me know in the comments.

This post is my entry for #XamarinUIJuly, an initiative by Steven Thewissen. Learn more about beautiful Xamarin UI by checking out the other entries too.

The post Tiled image animations with Xamarin.Forms appeared first on Marcofolio.net.

The Scanner is inspired by Quick Android Review Kit (QARK), a tool created by LinkedIn to look for several security related Android application vulnerabilities. Take note that the Scanner only finds security vulnerabilities in Xamarin.Android. Xamarin.Forms and Xamarin.iOS aren’t supported yet.

The tool reports the following issues:

• Certificate validation overwritten
• Permissions may not be enforced
• Unsafe cipher mode used
• External storage is used
• Hardcoded HTTP URL found
• JavaScript enabled in WebView
• JavascriptInterface is added to a WebView
• Logging was found
• Access to phone number
• WorldReadable file found
• Backups are enabled
• App has debugging enabled
• App supports outdated Android version
• App contains a private key

When the Scanner finds one (or more) of the above issues, it’ll provide you with a clear output on where you can find the issue.

You can exclude certain vulnerabilities as well, if you supply a reason why you don’t think it makes your app vulnerable. The Scanner is created by Wesley de Kraker under the supervision of Martijn Hazebroek as graduate intern of Info Support.

Conclusion & Download

The Scanner is a neat and simple way to do some basic security vulnerabilities checks for your Xamarin.Android apps. Right now, it only works with the source code but it would be great to work with packaged applications as well by decompiling it.

Also, the tool would be improved with Xamarin.Forms and .iOS support, as well as a plugin for Azure DevOps to include it in your pipeline. It has a lot of potential and makes life certainly easier for developers!

Is the Scanner something you’d like to add to your projects? What improvements would you like to see? Let me know what you think in the comments and feel free to improve the code by creating a pull request.

The post Introducing: The Xamarin Security Scanner appeared first on Marcofolio.net.

During the presentation we’ll discuss the Three Amigo’s, how specifications are written using Gherkin and can be automated with Specflow and Xamarin.UITest. Will our hero Steve manage to get his beloved recipe for Red Velvet cake shared with the world? Let’s find out!

The sample code can be found on Github. Enjoy!

Slides

I hope you liked the presentation and managed to get inspired. Look around on this blog to learn more about testing or Xamarin. Tell me what you think through Twitter or leave a comment below!

The post Presentation: Turn specs into high quality apps [NDC Oslo] appeared first on Marcofolio.net.

This demo shows how to create a Particle follower. Simply drag your finger across the screen and a particle explosion will occur! You can view the source on Github if you directly want to dive into the code. Otherwise, read on and learn how to build a particle follower using the CocosSharp 2D Game Engine and Xamarin.Forms to build a beautiful cross-platform app.

The goal

The goal is to create a neat particle follower that follows your fingers around on the phone when you touch it. Although it’s not very useful, it’s beautiful to look at and will help you get your first steps into development with CocosSharp.

Play around with the source to change colors, speed and more!

Getting started

I’ll use Xamarin.Forms as starting point. Simply add the CocosSharp.Forms NuGet package to all Projects (iOS, Android and .NET Standard).

Once we got that in place, let’s move on!

Device specific variables

First, we’ll need to determine the size of the screen so we’ll be able to use it later. Since that differs for each device, we’ll need to request the OS to pass along that value to Xamarin.Forms. Add the following to the App.cs-file.

public partial class App : Application {
    public static int Height { get; set; }
    public static int Width { get; set; }
    public static int Density { get; set; }
}

To fill these values, we’ll need to add them in the OS specific solutions. For iOS, this means changing the AppDelegate.cs.

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    App.Height = (int)UIScreen.MainScreen.Bounds.Height;
    App.Width = (int)UIScreen.MainScreen.Bounds.Width;
    App.Density = (int)UIScreen.MainScreen.Scale;
}

And for Android, we’ll need to update the MainActivity.cs.

protected override void OnCreate(Bundle bundle) {
    var metrics = Resources.DisplayMetrics;
    App.Width = (int) metrics.WidthPixels / metrics.Density;
    App.Height = (int) metrics.HeightPixels / metrics.Density;
    App.Density = (int) metrics.Density;
}

Now that we got these values inside of Xamarin.Forms, we can move on!

The view

CocosSharp uses a CCGameView in order to work. We’ll wrap that inside of a Xamarin.Forms ContentView. I called this the ParticlesView.

public class ParticlesView : ContentView {
    ParticlesScene _scene;

    public ParticlesView() {
        var sharpView = new CocosSharpView {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            ViewCreated = HandleViewCreated
        };
        Content = sharpView;
    }

    void HandleViewCreated(object sender, EventArgs e) {
        var ccGView = sender as CCGameView;
        if (ccGView != null) {
            ccGView.DesignResolution = new CCSizeI(App.Width, App.Height);
            _scene = new ParticlesScene(ccGView);
            ccGView.RunWithScene(_scene);
        }
    }
}

A couple of things that I’d like to point out:

• ViewCreated – This is the event when the element is placed which we’ll use to draw the CCGameView
• DesignResolution – Here you see why we need the App.Width and App.Height to determine the dimensions to draw on
• RunWithScene – CocosSharp uses a CCScene to run the application, which we’ll create in the next step

Add a scene with particles

The scene is the piece of code that’ll actually draw the different particles on a CCLayer. Let’s see how the ParticlesScene looks like!

public class ParticlesScene : CCScene {
    CCLayer _layer;
    
    public ParticlesScene(CCGameView gameView) : base(gameView) {
        _layer = new CCLayer();
        this.AddLayer(_layer);
    }

    public void DrawParticle(CCPoint point) {
        var explosion = new CCParticleExplosion(CCPoint.Zero) {
            TotalParticles = 10,
            StartColor = new CCColor4F(CCColor3B.White),
            EndColor = new CCColor4F(CCColor3B.Black),
            Position = new CCPoint(point.X / App.Density, App.Height - point.Y / App.Density)
        };
        _layer.AddChild(explosion);
    }
}

The DrawParticle-method will be called later on to draw the particles. CocosSharp comes with a couple of built-in Particles, like CCParticleFire and CCParticleSmoke. In this demo, we’ll be using the CCParticleExplosion but you can play around with these values as well. Just play around with these variables do have more fun!

Enable touch

Update the HandleViewCreated-method of the ParticlesView and add an CCEventListenerTouchOneByOne to enable listening to touch events. From here, we’ll call the DrawParticle-method.

_scene = new ParticlesScene(ccGView);
var touchEvent = new CCEventListenerTouchOneByOne();
touchEvent.OnTouchBegan = (touch, _event) => {
    _scene.DrawParticle(touch.LocationOnScreen);
    return true;
};
touchEvent.OnTouchMoved = (touch, _event) => {
    _scene.DrawParticle(touch.LocationOnScreen);
};
_scene.AddEventListener(touchEvent);

Finally, update the MainPage.xaml to use the new view and you’re ready to go!

<ContentPage xmlns:local="clr-namespace:Particles" x:Class="Particles.MainPage">
    <StackLayout>
        <local:ParticlesView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>

Conclusion & Download

Although the sample is pretty simple, it gives me a basic understanding of CocosSharp. The outcome looks pretty good and is fun to play around with! Since the Android Emulator supports multi-touch, we can even check how amazing that looks.

Take note there’s a discussion on where the future of CocosSharp as well as Cocos2d is going. What do you think? Let me know in the comments or on Twitter and feel free to improve the code.

Further reading:

• Making it snow!
• Particle Designer with CocosSharp
• Xamarin Forms Particle System

The post Particle follower with CocosSharp and Xamarin.Forms appeared first on Marcofolio.net.

Originally called Caboodle, Xamarin.Essentials is a single library to access native platform features for iOS, Android, and UWP that works in traditional Xamarin and Xamarin.Forms apps. Before Essentials, you had to grab one or more of the many plugins from James Montemagno. Now we can access them through one, single codebase: Xamarin.Essentials. There is already some extensive documentation available so it’s easy to play around with.

Getting started

Here, I’ll use Xamarin.Forms as starting point but native Xamarin.iOS or Xamarin.Android will work as well. Simply add the Xamarin.Essentials NuGet package to all Projects (iOS, Android and .NET Standard). Since it’s currently in Preview, make sure you mark the Show pre-release packages checkbox in the Add Packages window.

Once you got the package in place, there’s some additional stuff you have to do to get it working on Android. We’ll need to initialise Essentials in the MainActivity and also override the OnRequestPermissionsResult like so:

protected override void OnCreate(Bundle bundle)
{
    ...
    global::Xamarin.Forms.Forms.Init(this, bundle);
    Xamarin.Essentials.Platform.Init(this, bundle);
    ...
}

public override void OnRequestPermissionsResult(int requestCode, string[] permissions,
    [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
    Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}

That’s all there is to it, we now can start using Xamarin.Essentials!

Sample

I created a very simple sample app that allows you to send a SMS message using Xamarin.Forms and Xamarin.Essentials. I created a very basic UI with two Entry-fields and one Button to submit. You can view the complete source on Github to directly to dive into the code. But this is all it takes to send a SMS using Xamarin.Essentials:

private async void submitBtn_Clicked(object sender, EventArgs e)
{
    var message = messageEntry.Text;
    var recipient = recipientEntry.Text;

    var smsMessage = new SmsMessage(message, recipient);
    await Sms.ComposeAsync(smsMessage);
}

Simple and very straightforward! James wrote a sample Compass-app as well and demonstrated it at Build to get even more info.

Conclusion

Even though Essentials is still in Preview, this is exactly what I wanted to have as a mobile developer. One package with all the cross-platform plugins in one place. I can’t wait for the package to be Stable, but it’s looking great so far! Don’t forget to check out my sample on Github. Jim Bennett also wrote about Xamarin.Essentials. What do you think of this library? What’s missing or would you like to see different? I can’t wait to see where this library will head to!

The post First look at Xamarin.Essentials appeared first on Marcofolio.net.