Tag Archive : Android

/ Android

On September 2013 I released Safe Photo a native application for Android that allows you to hide pictures on your phone.

The app was quite successful with over 100.000 downloads and an impressive rating of 4.1.

During these years I’ve stopped to write native apps to concentrate entirely on Xamarin. So the logic consequence of that is that I’ve now created a new version of the app with Xamarin.Forms: Safe Photo 2.

Get it on Google Play
Get the app on Google Play Store

The idea behind the app is always the same: Safe Photo 2 will allow you to hide your secret pictures behind the security of the app.

Features

  • Protect the photos on your smartphone or tablet
  • Take new photos directly from the application, they will be protected automatically
  • Import photos from the public gallery (then delete them from the public gallery)
  • Protect your privacy with a numeric password
  • Organise your photos in galleries
  • Share your photos with whoever you want and how you want
  • The application can run on an external memory card so you will not consume the internal memory of your smartphone
  • Your photos are invisible also connecting the phone to a PC
  • Delete one or more images or galleries in one click
  • Compatible with smartphones and tablets
  • And it’s free

Gallery

Xamarin : How the app is made

To store all the data, Safe Photo 2 uses a SQLite database and of course the app uses the Sqlite Plugin For Xamarin And Windows (Nuget package).

The app also uses a Google Admob to show ads as banners and interstitials. As soon as possible I’ll create a package to easily add Admob to your Xamarin applications. If you prefer to write code yourself instead of using the plugin, I’ll also add a tutorial on how to add Admob on Xamarin.Android, Xamarin.iOS and Ads on UWP.

The app also uses some Dependency Services to execute some code on the native platforms. We use them to

  • Share a picture
  • Save, Copy and delete Files
  • Implement banners and interstitials for Admob

Do you want to know more about the app code or about Xamarin? Let me know and I’ll tell you more.

Have you seen how amazing are the Admob Rewarded video Ads? If you are creating a game or an app, the Rewarded Videos are something you should add to your app.

UPDATE: I’ve added on github the source code of a project to test this Admob plugin. You can find it here: https://github.com/marcojak/TestMTAdmob

Do you think that are difficult to implement and it takes hours of your time? WRONG!

Thanks to my plugin MarcTron.Admob (https://www.nuget.org/packages/MarcTron.Admob) you can add Rewarded Videos with a single line of code!!!

Exactly!!! Install the MarcTron.Admob free plugin and in less than few seconds you can show Rewarded Videos in your Android and iOS apps!

HOW (It’s super easy!!!)

  • Install the MarcTron.Admob plugin in your projects (.netstandard, Android and iOS).
  • That’s it! No other things to do!!!

Now, if you want to show a rewarded video you just have to write this code:

CrossMTAdmob.Current.ShowRewardedVideo("xx-xxx-xxx-xxxxxxxxxxxxxxxxx/xxxxxxxxxx");

Of course remember to replace the xxx with your video ID that you can find on your Google Admob page.

EVENTS

We all love events 🙂 If you love them as well. There are 7 events that you can use with Rewarde Videos:

OnRewarded                          When the user gets a reward
OnRewardedVideoAdClosed             When the ads is closed
OnRewardedVideoAdFailedToLoad       When the ads fails to load
OnRewardedVideoAdLeftApplication    When the users leaves the application
OnRewardedVideoAdLoaded             When the ads is loaded
OnRewardedVideoAdOpened             When the ads is opened
OnRewardedVideoStarted              When the ads starts

CONCLUSION

We have just seen how to add Rewarded Videos (with the plugin you can add Banners and Interstitials as well) in less than few seconds.

Basically it’s a dream 🙂 But it’s all TRUE!

USEFUL LINKS

Now here some links that you can use:

A detailed tutorial on how to use the plugin: https://www.xamarinexpert.it/blog/admob-made-easy/

The nuget package link:

https://www.nuget.org/packages/MarcTron.Admob

The bitbucket project site to report/view issues:

https://bitbucket.org/marcojak81/mtadmob/issues

Github test project to try the plugin: https://github.com/marcojak/TestMTAdmob

Microsoft has now released a new update for Visual Studio 2019. Let see what news we are and if there are improvements for Xamarin (Yes, there are…Yes!!!!)

As usual I’ll copy here Microsoft Release notes (it’s quite long, so I’ll keep only the important part) and then we’ll see the improvements for Xamarin. I’ve added in bold the parts related to Xamarin.

Release Notes Visual Studio 2019 version 16.1

IDE

  • Visual Studio IntelliCode is now generally available and comes installed with any workload that supports C#, C++, TypeScipt/JavaScript, or XAML.
  • We have added Per-Monitor Awareness support.
  • New codefixes are available for C#.
  • Most Recently Used has been added to Visual Studio Search.

Performance

  • You can now experience optimizations to improve the solution load time of very large solutions.
  • Template authors can add custom tags to their templates.
  • There is now CodeLens support for custom UI.
  • We have provided updates to Language Server Protocol implementation.
  • We have updated behavior for switching between solutions, folders, and other views.

C++

  • In-editor documentation for CMake has been added.
  • Use Windows Subsystem for Linux with C++ natively in Visual Studio, and AddressSanitizer for Linux projects and WSL.
  • We have made improvements and modified colorization in C++ Quick Info tooltips.
  • We have implemented new C++ Code Analysis quick fixes.

F#

  • We have released more performance improvements and a bulk of bug fixes for F# and F# tooling.

.NET

  • New .NET productivity features include one-click code cleanup on projects and solutions, a new toggle block comment keyboard shortcut, refactoring to move types to other namespaces.
  • You can now clone code from an SSH URI through the clone screen in the start window.
  • .NET Productivity additions in this release include intellisense completion for unimported types, toggling single-line comment/uncomment, exporting naming styles to editorconfig, and a new code style setting for preferring usings inside/outside namspaces.
  • We have implemented .NET SDK tooling additions primarily around supporting WinForms and WPF projects for .NET Core 3.0 along with bug fixes and performance improvements.
  • Visual Studio SDK v16.0 has been released to NuGet.
  • A preview of the XAML Designer for .NET Core 3.0 WPF development is available.

Xamarin

  • Default Android Experience for Xamarin now supports API 28.
  • Xamarin.Forms XAML recommendations for design time attributes.

Top Issues Fixed in Visual Studio 2019 version 16.1

  • Cannot navigate to the symbol under the caret in ASP.NET MVC Projects.
  • Resx editor doesn’t render.
  • Xamarin.iOS cannot find the application manifest. Please ensure the project contains a manifest file named ‘Info.plist”.
  • nmake environment missing path to NETFX tools.
  • Clicking on a ASP.NET Core project in solution opening the project .csproj file.
  • Assembly reference is removed from project after running app referencing library.

Details of What’s New in Visual Studio 2019 version 16.1

IDE

  • IntelliCode is now generally available and comes installed with any workload that supports C#, C++, TypeScipt/JavaScript, or XAML.
  • Use the start window to clone code from an online repository through SSH.
Clone with SSH on start window

Clone with SSH on start window

  • Visual Studio IntelliCode is installed by default when you install a workload that supports C#, XAML, or C++.
    • C# and XAML base models will be on by default.
    • Preview features, such as custom model training and argument completion, can be enabled via Tools > Options > IntelliCode.
  • Added Per-Monitor Awareness support
  • New codefixes available for C#.
  • Added Per-Monitor Awareness support for WinForms based PropertyBrowser window of Visual Studio. Requires .NET Framework 4.8 RTM version installed on the machine.

Debugger

  • Source Link can now use Windows Authentication to support on-premises TFS Source Control.
  • Added nuget.org symbol server to the list of default symbol servers

Project

  • The button for switching the Solution Explorer view will now consistently show you a dropdown menu of all possible views.
Solution switching

Solution view switching

  • Improved the loading time for very large solutions. The improvement varies based on the size of the solutions.
  • Removed the Convert dialog under File > Convert. This feature was previously deprecated in Visual Studio 2015.
  • Updated the validation rules for the task.vs.json and launch.vs.json schemas, and added descriptions for the properties.
  • Added support for Linux remote debugging using a custom program via launch.vs.json.

Editor

  • Visual Studio Search will now display on focus the three most recently used actions invoked through Visual Studio Search, as shown in this sample mockup. (Note: icons and specific line items have not been fully updated in this mock-up.)
Visual Studio Search

.NET Productivity

  • There is now experimental intellisense completion for unimported types! You now receive intellisense suggestions for types in dependencies in your project even if you have not yet added the import statement to your file. You must turn this option on in Tools > Options > Text Editor > C# > Intellisense.
Intellisense completion for unimported types

Intellisense completion for unimported types

  • Toggle Single Line Comment/Uncomment is now available through the keyboard shortcut (Ctrl+K,/). This command will add or remove a single line comment depending on whether your selection is already commented.
  • You can now export naming styles with the “Generate editorconfig” button located in Tools > Options > Text Editor > C# > Code Style.
  • You can now use a new editorconfig code style rule to require or prevent usings inside a namespace. This setting will also be exported when you use the “Generate editorconfig” button located in Tools > Options > Text Editor > C# > Code Style.
Editorconfig rule for usings outside/inside namespaces

Editorconfig rule for usings outside/inside namespaces

Tools Options setting for usings inside/outside namespace

Tools Options setting for usings inside/outside namespace

  • The Find All References “Kind” column now has more filter options and is aware of namespaces and types.
Find All References Kind column has more filter options

Find All References Kind column has more filter options

  • We have added a codefix for split/merge if statements.
Split or merge if statements

Split or merge if statements

  • We have added a codefix for wrapping binary expressions.
Wrap binary expressions

Wrap binary expressions

  • A regex completion list can now be accessed through the intellisense menu (Ctrl + space) when inside a regex string. These completions also include an in-line description of what the suggestion does.
Regex completion offered in Intellisense with (Ctrl + space)

Regex completion

  • We have added a codefix for unsealing a class.
Unseal a class codefix

Unseal a class

  • You can now use one-click code cleanup for projects and solutions. You can right-click on projects or the solution in the Solution Explorer and select ‘Run Code Cleanup’.
Right-click to run code cleanup over the entire solution

Right-click to run code cleanup over the entire solution

You will see a dialog box while cleanup is applied to each file

You will see a dialog box while cleanup is applied to each file

  • You can now use a refactoring dialog to move type to namespace or folder. Place your cursor in the class name and type (Ctrl + .) to open the quick actions and refactorings menu and select ‘Move to namespace.’ This launches a dialog where you can select the target namespace you would like to move the type to.
Place cursor in class name and type (Ctrl+.) to view refactorings

Place cursor in class name and type (Ctrl+.) to view refactorings

Select the destination namespace

Select the destination namespace

  • Toggle Block Comment/Uncomment is now available through the keyboard shortcut (Ctrl+Shift+/) or through Edit > Advanced > Toggle Block Comment. This command will add or remove block comments depending on what you have selected.
Toggle block comment with (Ctrl+Shift+/)

Toggle block comment with (Ctrl+Shift+/)

  • There is now a codefix for making readonly struct fields writable. Place your cursor in the struct name, type (Ctrl+.) to open the quick actions and refactorings menu, and select ‘Make readonly fields writable.’
  • The codefix to add a private field from a constructor and vice versa is easier to discover and will show when any portion of the field name is selected. This refactoring now also offers all possible constructors.

XAML Designer Preview for .NET Core 3.0 WPF development

  • There is an early preview of the XAML Designer for developers building .NET Core 3.0 WPF applications in Visual Studio. Many design-time features will be unavailable at this time. Since this is an early preview, if you encounter issues such as crashes, please submit Visual Studio feedback for the team to improve the experience going forwards.
  • With each update to Visual Studio 2019, we will continue implementing more of the features that were previously available in the XAML Designer for .NET Framework WPF applications.

Xamarin

  • We have updated the default Android Experience to API 28 for templates, device creation, installers, and more.
  • IntelliSense on Windows now shows recommendations for design-time attributes when writing Xamarin.Forms XAML.

Changes related to Xamarin

As we have seen, there are 2 main changes. The first one is relative to Android, now everything is updated to API 28, so we should find updated Android templates.

The second change is relative to IntelliSense, now it should give us better recommendations when we write our Xamarin.Froms XAML files.

A very annoying bug has been fixed in Xamarin.iOS: Xamarin.iOS cannot find the application manifest. Please ensure the project contains a manifest file named ‘Info.plist”.

That was quite a bad bug and the only way to resolve it was to unload and reload the iOS project. Fortunately now Microsoft has fixed it so…..Yeahhh!

Are you going to update Visual Studio? I’m doing it right now!

For a list of all changes, please visit this page: https://docs.microsoft.com/en-gb/visualstudio/releases/2019/release-notes#16.1.0

N.B. The images were taken from the page above. So the copyright belongs to them

Xamarin.Forms 4.0 is finally out

May 22, 2019 | News | No Comments

Every release of Xamarin.Forms improves the performances and adds new features. It has been a long time since the first Xamarin.Forms came out. That version was very basic and to be honest not very great. Then Xamarin.Forms 2 came out and it was better, finally something that could be used for a production app. When Xamarin.Forms 3 came out, it was great, better performances, new features. Xamarin.Forms 3 has been a great tool to create amazing multiplatform apps and now Xamarin.Forms 4.0 promises even more, again better performances and new features. Let’s see together the main news of this release.

The Shell

Shell is a new way to create our apps. First of all it allows us to add easily flyouts and menus to our apps. It also adds the concept of URI navigation.

That’s great but what is even better is that it uses “fast renderers” (see later). To use the shell, on Visual Studio 2019 starting a new Xamarin.Forms app, you can select the Shell template. To get more info about Shell, you can use this documentation:

Android Fast Renderers

Android Fast Renderers were introduced in Xamarin.Forms 2.4 but disabled by default. The idea behind them is to reduce the number of views required to render a particular control. Honestly you could see improved performances so now they are enabled by default. This means that you will notice better perfomances with the enw Xamarin.Forms.

Image Source Unification

From Xamarin.Forms 3.5, they have introduced the FontImageSource to use the font glyphs but was not possible to use it everywhere. From version 4.0using ImageSource you can use them wherever you want.

Accessibility

From Xamarin Forms 4.0 we can now control the focus order directly in X.F. To do this, we can use the TabIndex property available on any VisualElement.

Conclusion

I will personally test Xamarin.Forms 4.0 and in particular the Shell to see how great that is. I will also test the new navigation pattern (URI Navigation) to see if there are improvements here. I will also evaluate the new performances to see if the app can be faster or more fluid.

And what do you think about Xamarin.Forms 4.0?

If you are using the Syncfusion library together with Xamarin.Forms > 3.4 you should definitely continue to read.

Since the new release of Xamarin.Form 3.5, if you try to use the Syncfusion Listview (SfListView) in Release mode on Android, your app will crash.

In this moment there are two things that you can do:

  • Use a version of Xamarin.Forms < 3.5
  • Set the Linking to None (in this case your final APK will be bigger than usual).

Unless you are using some of the new features of Xamarin.Forms > 3.4, I’d suggest you to continue to use Xamarin.Forms 3.4 otherwise in you Android project, set the Linking to None and it will solve your problem.

I will update this post, as soon as Synfusion and Xamarin will solve this massive issue.

Meanwhile you can follow the progress of this bug here: https://github.com/xamarin/Xamarin.Forms/issues/5288

Basically all the apps use a Listview to show one or more list of items.Sometimes you want to change the appearance of your items according to some parameter (for example inside the same page, sometimes you want to show partial forms, other times completed forms and so on).Let’s see how easily you can achieve this in Xamarin.

UI

First of all, we need to add a listview in our page:

<ListView ItemTemplate = "{Binding MyTemplate}" ItemsSource="{Binding MySource}" HasUnevenRows="True" VerticalOptions="FillAndExpand"></ListView>

With these few lines of code we have added a ListView that will vertically fill our page. We have also specified the ItemSource (the items we want to add to our listview), the ItemTemplate (the template to specify the appearance of our items) and set HasUnevenRows (true if we have items with different height, false otherwise).The UI is really easy! Isn’t it? Now let’s see how to specify the template.

TEMPLATE

Inside the ViewModel connected to our page we need to load MySource and MyTemplate:

...
public DataTemplate MyTemplate { get; set; }
        public ObservableCollection<MyItems> MySource { get; set; }

        public ListOfMyItemsViewModel(ItemType itemType)
        {
            MyTemplate = GetTemplate(itemType);
            MySource = new ObservableCollection<MyItems>(LocalData.GetMyItems(itemType));
        }

        private DataTemplate GetTemplate(ItemType itemType)
        {
            switch (itemType)
            {
                case ItemType.ItemType1: return new DataTemplate(typeof(CellType1));
                case ItemType.ItemType2: return new DataTemplate(typeof(CellType2));
                case ItemType.ItemType3: return new DataTemplate(typeof(CellType3));
                case ItemType.ItemType4: return new DataTemplate(typeof(CellType4));
            }

            return null;
        }
...

Inside the constructor we have specified the Template  for our cells and then we have loaded the Items.In this specific case (GetTemplate) we can load 4 different types of cell but of course we can have as many templates as we want. CellType1, CellType2, CellType3 and CellType4 are of type:  ViewCell. It’s important to note that in this example we have set the template inside the constructor (so when the page is loaded) but we can set it whenever we want so that for example we can change the appearance of our cells pressing a button or maybe selecting a value from a picker.

RECAP

With this few lines of code we can dynamically set the cell appearance in  our listview according to the type of cell we want to load (specified in our case by itemType). 

Questions? Leave a message or send me an e-mail and I’ll answer you.

Finally a new version of Visual Studio is here and it seems great.

Visual Studio
Visual Studio 2017

As usual let’s see the release note from the Visual Studio website.

Release Note:

  • We added support to change installation locations.
  • You can Save All your pending changes before you start your update.
  • The update dialog provides you even more details about your update during installation.
  • C# 7.3 is included in Visual Studio version 15.7.
  • We improved solution load time for C# and VB projects.
  • We made numerous updates to F# and its tools, with a focus on performance.
  • We reduced the time to enable IntelliSense for large .NET Core projects by 25%.
  • We made Quick Info improvements and new .NET refactorings like convert for-to-foreach and make private fields readonly.
  • We added the ability to publish ASP.NET Core applications to App Service Linux without containers.
  • Live Unit Testing works with embedded pdbs and supports projects that use reference assemblies.
  • The Test Explorer has more responsive icons during test runs.
  • C++ developers can use CodeLens for unit testing.
  • We added new rules enforcing items from the C++ Core Guidelines.
  • Debugging large solutions with /Debug:fastlink PDBs is more robust.
  • CMake integration supports CMake 3.11 and static analysis.
  • Python projects support type hints in IntelliSense, and a Run MyPy command has been added to look for typing errors in your code.
  • Conda environments are supported in Python projects.
  • We added a next version of our Python debugger based on the popular open source pydevd debugger.
  • TypeScript 2.8 is included in Visual Studio version 15.7.
  • We improved Kestrel HTTPs support during debugging.
  • We added support for JavaScript debugging with Microsoft Edge.
  • The Debugger supports VSTS and GitHub Authentication for Source Link.
  • IntelliTrace?s step-back debugging feature is supported for debugging .NET Core projects.
  • We added IntelliTrace support for taking snapshots on exceptions.
  • We removed the blocking modal dialog from branch checkouts in Git when a solution or project reload is not required.
  • There is an option to choose between OpenSSL and SChannel in Git.
  • You can create and associate Azure Key Vaults from within the Visual Studio IDE.
  • Visual Studio Tools for Xamarin can automatically install missing Android API levels required by Xamarin.Android projects.
  • The Xamarin.Forms XAML editor provides IntelliSense and quick fixes for conditional XAML.
  • We added support for Azure, UWP, and additional project types in Visual Studio Build Tools.
  • You can create build servers without installing all of Visual Studio.
  • The Windows 10 April 2018 Update SDK – Build 17134 is the default required SDK for the Universal Windows Platform development workload.
  • We added support for Visual State Management for all UWP apps and more.
  • We enabled automatic updates for sideloaded APPX packages.
  • You have new tools for migrating to NuGet PackageReference.
  • We added support for NuGet package signatures.
  • We added Service Fabric Tooling for the 6.2 Service Fabric release.
  • We updated Entity Framework Tools to work with the EF 6.2 runtime and to improve reverse engineering of existing databases.

And now let’s see the improvements around Xamarin:

Performance

  • In this release, we improved solution load time for C# and VB projects by an average of 20%.

Visual Studio Tools for Xamarin

This release includes Xamarin.Android 8.3 and Xamarin.iOS 11.10.

Automatic Android SDK Management

When a Xamarin.Android project is loaded, Visual Studio can determine if the Android API level used by the project is missing from your machine and automatically install it for you in the background. To enable this feature, go to Tools > Options > Xamarin > Android Settings > Auto Install Android SDKs.

Improved XAML IntelliSense

Xamarin.Forms developers using Visual Studio 2017 version 15.7 will notice a vastly improved IntelliSense experience

Automatic iOS Provisioning

We made iOS device provisioning for development easier. In Visual Studio 2017 version 15.7, there’s a streamlined experience to request a development certificate, generate a signing key, add a device in the Developer Center, and create a provisioning profile, all with a single button click. All the heavy lifting of provisioning an iOS device is handled for you in less than 30 seconds.

I really think you should update Visual Studio to the new version 15.7. The improvements around Xamarin are really impressive and very useful.You can read all about the new update here: https://docs.microsoft.com/en-gb/visualstudio/releasenotes/vs2017-relnotes

In this post we’ll how is possible to invert a boolean value in our XAML page using a ConverterLet’s say that we have a Label that should be visible only if a boolean property is false. In the next example in our XAML we have a Label with the text bound to MyText and this label should be visible only if the boolean property HideMyText is false:

<Label Text="{Binding MyText}" 
       IsVisible="{Binding HideMyText}">
</Label>

How we can do that? An amateur will create a new property ShowMyText whose value will be:ShowMyText = !HideMyTextIf you want to be a mediocre developer you can stop here because it works but if you want to be a great developer, then this solution is not for you and you should continue to read!

IValueConverter

To solve our problem we need to create a converter that will invert our boolean value. This is really easy, we just need to create a new class BooleanConverter (you can user whatever name you prefer):

public class BooleanConverter : IValueConverter, IMarkupExtension
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !((bool) value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }

    public object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

and then use this new converter in our XAML:

<Label Text="{Binding MyText}" 
       IsVisible="{Binding HideMyText, Converter={converters:BooleanConverter}}">
</Label>

So now in our XAML we have a label that is visible when HideMyText is false. YEAH!You need to write this converter only once and then you can use it every time you need it. It’s amazing!

In this tutorial I’ll show you how to create a UrhoSharp project using Xamarin.Forms. This UrhoSharp project will run on Android, iOS and UWP.

A basic game I’ve created using UrhaSharp

Don’t worry if the code seems complicated, it’s not. To help you, I’ll include the source code of this project at the end of the tutorial.

The first step consists in creating a cross-platform project with Xamarin.Forms:

Creating a new cross platform Xamarin project

I suggest you to use a Blank template. Select the platform you need (Android, iOS, UWP to cover everything). Select the .NET Standard code sharing strategy.

Our new Cross Platform Solution

I suggest you to update all the Nuget packages before we start. After that, a nice clean and rebuild should guarantee us a clean start!

INSTALL URHOSHARP

The next step is to add the UrhoSharp.Forms nuget package to our solution. At the time of writing the latest version is 1.9.67. We must install this package in all our projects (.net standard, Android, iOS and UWP).

LET’S START WITH URHOSHARP

As you can imagine, UrhoSharp need a surface where it can draw our world. We can create this surface inside the MainPage.xaml file we have in our project. The MainPage will be similar to this:

As you can imagine, UrhoSharp need a surface where it can draw our world. We can create this surface inside the MainPage.xaml file we have in our project. The MainPage will be similar to this:

<?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:local="clr-namespace:UrhoSharpTutorial"
             xmlns:forms="clr-namespace:Urho.Forms;assembly=UrhoSharp.Forms"
             x:Class="UrhoSharpTutorial.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <forms:UrhoSurface x:Name="urhoSurface" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        </forms:UrhoSurface>
    </StackLayout>

</ContentPage>

Basically we have added an UrhoSurface calling it urhoSurface. This surface will fill our entire screen. Now we need to edit the MainPage.cs to load our UrhoSharp application. The code will be this:

using Xamarin.Forms;

namespace UrhoSharpTutorial
{
    public partial class MainPage : ContentPage
    {
        XamarinExpertApp urhoApp;

        public MainPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            StartUrhoApp();
        }

        async void StartUrhoApp()
        {
            urhoApp = await urhoSurface.Show<XamarinExpertApp>(new Urho.ApplicationOptions("Data") { Orientation = Urho.ApplicationOptions.OrientationType.LandscapeAndPortrait });
        }
    }
}

This code will load our XamarinExpert UrhoSharp app inside the urhoSurface when the MainPage appears. Let’s see now how to create the XamarinExpertApp class.

This XamarinExpertApp should inherit from Urho.Application. The code of this class is:

using System.Diagnostics;
using Urho;
using UrhoSharpTutorial.Scenes;

namespace UrhoSharpTutorial
{
    public class XamarinExpertApp : Application
    {
        private BaseScene _mainScene;

        [Preserve]
        public XamarinExpertApp(ApplicationOptions options = null) : base(options)
        {
        }

        static XamarinExpertApp()
        {
            UnhandledException += (s, e) =>
            {
                if (Debugger.IsAttached)
                    Debugger.Break();
                e.Handled = true;
            };
        }

        protected override void Start()
        {
            base.Start();
            Input.Enabled = true;
            Input.SetMouseVisible(true, false);
            Input.TouchEmulation = true;

            StartMainScene();
        }

        private void StartMainScene()
        {
            _mainScene?.Destroy();
            Current.UI.Root.RemoveAllChildren();
            _mainScene = new MainScene(Graphics.Width, Graphics.Height);
        }

        protected override void OnUpdate(float timeStep)
        {
            base.OnUpdate(timeStep);
            _mainScene.OnUpdate(timeStep);
        }
    }
}

This class is our UrhoSharp project. It handles the exceptions and initialises the Input of our project. Inside the Start method, we load our scene. We also override the OnUpdate method so that we can decide what will happen every time that the screen is refreshed.

At this point we should create the mainScene. In this project we have only a scene, but in a more complex project we can have multiple scenes. Maybe one for the menu, another for the game, another for the settings and so on. Because of this, I prefer to create a basic scene calling it BaseScene. The code of this class is this:

using Urho;

namespace UrhoSharpTutorial.Scenes
{
    public class BaseScene
    {
        private int width;
        private int height;
        public Scene Scene;
        public Node CameraNode { get; set; }

        public BaseScene(int width, int height)
        {
            this.width = width;
            this.height = height;
        }

        public void InitScene()
        {
            Scene = new Scene();
            Scene.CreateComponent<Octree>();
        }

        public void CreateCamera(Vector3 vector3)
        {
            CameraNode = Scene.CreateChild("Camera");
            CameraNode.Position = vector3;
            Camera camera = CameraNode.CreateComponent<Camera>();
            camera.Orthographic = true;

            camera.OrthoSize = (float)Application.Current.Graphics.Height * Application.PixelSize;
        }

        public void SetupViewport()
        {
            var renderer = Application.Current.Renderer;
            Viewport vp = new Viewport(Application.Current.Context, Scene, CameraNode.GetComponent<Camera>());
            renderer.SetViewport(0, vp);
            vp.SetClearColor(Color.White);
        }

        public virtual void OnUpdate(float timeStep)
        {
        }

        public virtual void Destroy()
        {
        }
    }
}

In this base class we store the width and the height of our surface (it’s not necessary but it could be handy). Here we have several methods to create our Scene (it’s mandatory to create a Scene, so don’t forget it), to create our Camera (again mandatory, and in this case it’s an orthographic camera) and to setup our viewport (again mandatory). We must do these things every time we need to create a scene and this is why I’ve created this base class.

Now we can finally create our mainScene. I’ll show you a basic code for a mainScene and then a more complex one where I’ll add some methods to handle the inputs and interact with the objects in our scene.

The basic scene is this:

using Urho;

namespace UrhoSharpTutorial.Scenes
{
    public class MainScene : BaseScene
    {
        public MainScene(int width, int height) : base(width, height)
        {
            CreateScene();
        }

        private void CreateScene()
        {
            InitScene();
            CreateCamera(new Vector3(0f, 0f, -15));
         
            SetupViewport();
        }
    }
}

Here we just initialise the scene, create the camera and set the Viewport. Now I can show you a more useful mainScene:

using Urho;

namespace UrhoSharpTutorial.Scenes
{
    public class MainScene : BaseScene
    {
        private MainSceneInput _mainInput;
        public float movementSize = 0.8f;
        public float movementSpeed = 0.25f;

        public MainScene(int width, int height) : base(width, height)
        {
            CreateScene();
        }

        private void CreateScene()
        {
            InitScene();
            CreateCamera(new Vector3(0f, 0f, -15));

            _mainInput = new MainSceneInput(this);
            _mainInput.OnEvaluateNode += MainInput_OnEvaluateNode;

            SetupViewport();
            CreateEvents();
        }

        private void MainInput_OnEvaluateNode(object sender, Node node)
        {
            
        }

        private void CreateEvents()
        {
            Application.Current.Input.TouchBegin += _mainInput.Input_TouchBegin;
            Application.Current.Input.TouchMove += _mainInput.Input_TouchMove;
            Application.Current.Input.TouchEnd += _mainInput.Input_TouchEnd;
            Application.Current.Input.KeyUp += _mainInput.Input_KeyUp;
        }
        
        public override void Destroy()
        {
            base.Destroy();
            Application.Current.Input.TouchBegin -= _mainInput.Input_TouchBegin;
            Application.Current.Input.TouchMove -= _mainInput.Input_TouchMove;
            Application.Current.Input.TouchEnd -= _mainInput.Input_TouchEnd;
            Application.Current.Input.KeyUp -= _mainInput.Input_KeyUp;
        }
    }
}

What I’ve added here is some logic to interact with our world. Precisely I’ve created several methods to handle the touches on the screen. I’ve implemented all the methods inside another class called MainSceneInput. The code of this class is:

using System;
using Urho;
using Urho.Actions;

namespace UrhoSharpTutorial.Scenes
{
    internal class MainSceneInput
    {
        private readonly MainScene _scene;

        public event EventHandler<Node> OnEvaluateNode;

        public MainSceneInput(MainScene scene)
        {
            _scene = scene;
        }

        private Node GetSelectedNode(float objX, float objY)
        {
            Ray cameraRay = _scene.CameraNode.GetComponent<Camera>().GetScreenRay(objX / Application.Current.Graphics.Width, objY / Application.Current.Graphics.Height);
            var result = _scene.Scene.GetComponent<Octree>().RaycastSingle(cameraRay, RayQueryLevel.Triangle, 100);
            return result?.Node;
        }

        public void Input_TouchBegin(TouchBeginEventArgs obj)
        {
            Node selectedNode = GetSelectedNode((float)obj.X, (float)obj.Y);
            OnEvaluateNode?.Invoke(this, selectedNode);
        }

        public void Input_TouchMove(TouchMoveEventArgs obj)
        {
            Node selectedNode = GetSelectedNode((float)obj.X, (float)obj.Y);
            OnEvaluateNode?.Invoke(this, selectedNode);
        }

        public async void Input_TouchEnd(TouchEndEventArgs obj)
        {

        }

        internal void Input_KeyUp(KeyUpEventArgs obj)
        {
            if (obj.Key == Key.I)
            {
                var camera = _scene.CameraNode.GetComponent<Camera>();
                camera.Zoom += 0.05f;
            }
            else if (obj.Key == Key.O)
            {
                var camera = _scene.CameraNode.GetComponent<Camera>();
                camera.Zoom -= 0.05f;
            }
            else if (obj.Key == Key.W)
            {
                _scene.CameraNode.RunActions(new MoveTo(_scene.movementSpeed, new Vector3(_scene.CameraNode.Position2D.X, _scene.CameraNode.Position2D.Y + _scene.movementSize, -1.0f)));
            }
            else if (obj.Key == Key.S)
            {
                _scene.CameraNode.RunActions(new MoveTo(_scene.movementSpeed, new Vector3(_scene.CameraNode.Position2D.X, _scene.CameraNode.Position2D.Y - _scene.movementSize, -1.0f)));
            }
            else if (obj.Key == Key.A)
            {
                _scene.CameraNode.RunActions(new MoveTo(_scene.movementSpeed, new Vector3(_scene.CameraNode.Position2D.X - _scene.movementSize, _scene.CameraNode.Position2D.Y, -1.0f)));
            }
            else if (obj.Key == Key.D)
            {
                _scene.CameraNode.RunActions(new MoveTo(_scene.movementSpeed, new Vector3(_scene.CameraNode.Position2D.X + _scene.movementSize, _scene.CameraNode.Position2D.Y, -1.0f)));
            }
        }
    }
}

In this class I have a method to evaluate which object the user has touched (in that case the OnEvaluateNode method will be called with the selected node). And another method to move the camera using the keyboard (of course you can change this as you want, this is just an example on how to intercept these events).

Conclusion

All the code added until now is a basic empty template for every UrhoSharp project you want to create. You can use this template as a starting point for your UrhoSharp projects.

I’ve added on bitbucket this source code with just a simple code to add a sprite to our scene, so from there it can be easier for you to add all the sprites you need. The link is: https://bitbucket.org/marcojak81/urhosharpbasictemplate/src/master/

I’ll create later other more advanced tutorial on UrhoSharp.

As usual, if you have questions, please ask me and I’ll try to help you.

How to add a Checkbox in Xamarin.Forms

May 14, 2019 | Tutorial | No Comments

We are going to show step by step how to create a Checkbox for Xamarin.Forms with a very simple code without the use of Custom Renderers.This checkbox will work on every platform: Android, iOS, UWP… and the final result will be something like:

Checkbox disabled
Checkbox disabled
Checkbox enabled
Checkbox enabled

There are just two steps you need to do:

  • Add your images
  • Create the Checkbox class

After the two steps, I’m going to show you a small example on how to use this checkbox.

Add the Checkbox images

The first thing to do is to choose two images for the checkbox, one enabled and the other disabled (similat to the ones you can see in the previous images).

Add the images as embedded resources
Add the images as embedded resources

Create an Images folder inside your PCL/.NetStandard project and add the two images in it. Be sure to set the two images as Embedded Resources (as in the previous image).

Add the Checkbox class

Now it’s time to create our checkbox class. Inside your PCL/.NetStandard project create the file Checkbox:

using System;
using System.Windows.Input;
using Xamarin.Forms;

namespace Tutorial02
{
    public class Checkbox : StackLayout
    {
        public event EventHandler CheckedChanged;
        private readonly Image _image;

        private readonly Label _label;
        //CHANGE THESE 2 STRINGS ACCORDING TO YOUR NAMESPACE AND IMAGE

        static string imgUnchecked = "Tutorial02.Images.unchecked.png";
        static string imgChecked = "Tutorial02.Images.checked.png";
        public static readonly BindableProperty CommandProperty = BindableProperty.Create("Command", typeof(ICommand), typeof(Checkbox));

        public static readonly BindableProperty CheckedProperty = BindableProperty.Create("Checked", typeof(Boolean?), typeof(Checkbox), null,
            BindingMode.TwoWay, propertyChanged: CheckedValueChanged);

        public static readonly BindableProperty TextProperty =
            BindableProperty.Create("Text", typeof(String), typeof(Checkbox), null, BindingMode.TwoWay, propertyChanged: TextValueChanged);

        public ICommand Command
        {
            get => (ICommand) GetValue(CommandProperty);
            set => SetValue(CommandProperty, value);
        }

        public Boolean? Checked
        {
            get => (bool?) GetValue(CheckedProperty);
            set => SetValue(CheckedProperty, value);
        }

        public String Text
        {
            get => (string) GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public Checkbox()
        {
            Orientation = StackOrientation.Horizontal;
            BackgroundColor = Color.Transparent;
            _image = new Image()
                {Source = ImageSource.FromResource(imgUnchecked), HeightRequest = 35, WidthRequest = 35, VerticalOptions = LayoutOptions.Center};
            var tg = new TapGestureRecognizer();
            tg.Tapped += Tg_Tapped;
            _image.GestureRecognizers.Add(tg);
            Children.Add(_image);
            _label = new Label() {VerticalOptions = LayoutOptions.Center};
            _label.GestureRecognizers.Add(tg);
            Children.Add(_label);
        }

        private void Tg_Tapped(object sender, EventArgs e)
        {
            Checked = !Checked;
        }

        private static void CheckedValueChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (newValue != null && (Boolean) newValue) ((Checkbox) bindable)._image.Source = ImageSource.FromResource(imgChecked);
            else ((Checkbox) bindable)._image.Source = ImageSource.FromResource(imgUnchecked);
            ((Checkbox) bindable).CheckedChanged?.Invoke(bindable, EventArgs.Empty);
            ((Checkbox) bindable).Command?.Execute(null);
        }

        private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (newValue != null) ((Checkbox) bindable)._label.Text = newValue.ToString();
        }
    }
}

Your are now ready to use the checkbox in your apps and it will work for every platform supported by Xamarin. GREAT!Now I’ll show you a small example on how to use this checkbox inside your App:

Add the Checkbox to your ContentPage

Inside the our ContentPage we have set the ViewModel and then added the checkbox:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"             
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             
             xmlns:local="clr-namespace:Tutorial02"
             xmlns:viewModel="clr-namespace:SafePhoto2.ViewModel;assembly=SafePhoto2"
             x:Class="Tutorial02.MainPage">
    <ContentPage.BindingContext>
        <viewModel:MainViewModel />
    </ContentPage.BindingContext>
    <local:Checkbox VerticalOptions="CenterAndExpand"                     
                    HorizontalOptions="CenterAndExpand"                     
                    Checked="{Binding IsChecked}"                     
                    Text="{Binding TextCheckBox}"                     
                    Command="{Binding OnCheckedChanged}">

    </local:Checkbox>
</ContentPage>

The checkbox has two important properties: Checked and Text.

  • Checked is bound to the IsChecked property of the ViewModel and indicates if the checkbox is checked or not
  • Text is bound to the TextCheckBox property of the ViewModel and is the text that appears next to the CheckBox image

In case you want to execute an action after the status of the checkbox is changed, you can use Command  (bound to the OnCheckedChanged inside the ViewModel) otherwise you can remove it from your XAML.

Create the ViewModel

The ViewModel used in our example is very easy and you can change it as you prefer. For this simple example we have just created a basic ViewModel:

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace Tutorial02
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private bool _isChecked;
        private string _textCheckBox;
        public event PropertyChangedEventHandler PropertyChanged;

        public bool IsChecked
        {
            get => _isChecked;
            set
            {
                _isChecked = value;
                TextCheckBox = _isChecked ? "Is Enabled" : "Is Disabled";
                OnPropertyChanged();
            }
        }

        public string TextCheckBox
        {
            get => _textCheckBox;
            set
            {
                _textCheckBox = value;
                OnPropertyChanged();
            }
        }

        public Command OnCheckedChanged { get; set; }

        public MainViewModel()
        {
            OnCheckedChanged = new Command(OnCheckBoxChanged);
        }

        private void OnCheckBoxChanged()
        {
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

As usual the ViewModel inherits from INotifyPropertyChanged.We have added two properties IsChecked and TextCheckBox and the Command OnCheckedChanged required only if we want to execute an action after the status of the checkbox is changed.When the IsChecked value changes, we set the Checkbox text to Is Enabled or Is Disabled according to its value.

Conclusion

In this tutorial we have seen how to create a Checkbox in Xamarin.Forms.The code is incredibly easy and ready to be used (you can copy and paste the code and it will work).If you have questions or doubts leave here a comment.If you need more info about the MVVM pattern in Xamarin you can check the Microsoft documentation here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm

%d bloggers like this: