Tag Archive : iOS

/ iOS

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

Today Microsoft has released a new version of Visual Studio to add support for Xcode 9.2

This is a FUNDAMENTAL update for Visual Studio and Xamarin as with the old version you cannot compile code for Apple (you can read the?article here).

Let’s see now the complete

Release notes:

  • VS 15.6 does not respect the ‘apply server settings to all users (store in project file)’.
  • Project could not be opened because Visual C# 2017 compiler was not created.
  • NuGet Package Manager only sees latest package versions after manually clearing cache.
  • Lost IIS Server Settings.
  • Visual Studio hangs during Nuget package update.
  • Installer throws unexpected error and saved changes to Solution2.sln are not saved.
  • C:\\Windows\\temp?fills up with .itrace files after upgrade to 15.5.6.
  • vstest.console.exe?fails test run with socket exception.
  • This release includes support for Xcode 9.3.

There are a couple of important issues fixed in this release but definitely the support for Xcode 9.3 is the most important feature of this update.

You can update Visual Studio going on Help -> Check for Updates or you can install Visual Studio from here: https://www.visualstudio.com/downloads

UPDATE 4/4/2018: Microsoft has released the version 15.6.5 for Visual Studio that adds support for XCode 9.3. You can read more here.

The current Xamarin tool for Visual Studio 15.6.4 is not compatible yet with Xcode 9.3 so if you update Xcode to this version, you will not be able to compile your iOS projects anymore.

Visual Studio
Visual Studio 2017

In case you are still using the Xcode version 9.2, disable the auto update.

If your mac has already updated Xcode to the new version 9.3 and you need to compile your projects for Apple, then you need to uninstall Xcode 9.3, disable the auto update and install Xcode version 9.2.

You can download Xcode version 9.2 from here:

https://developer.apple.com/download/more/

Xamarin is already working on it but probably it will take some days.

I will update this post as soon as the issue will be solved.

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

Usually a desktop platform has a lot of available resources so many developers tend to avoid to improve the quality of their code.On a mobile platform the resources are quite limited and improving the code could make a huge difference. It can transform a slow and annoying app in a great fast and great one.Today, using the code I’ve written for one of my app Tv Series Time Manager, we are going to see how improving the code can make a huge difference in the loading time of your apps.

LINQ
LINQ

Improve your code – LINQ is your friend

Tv Series time manager allows you to keep track of your preferred tv series.It uses a public API to get information about all the TV Series created. As you can imagine there are thousands and thousands of Tv Series so we need to handle lists of thousands of items.Every time we launch the app, it searches online updated about the Tv Series you are following (new episodes, release dates, and so on). This can be a quite intensive task as the API we need to call returns a JSON file with more than 34000 items.The first time I’ve written the updated method I had this code:

var localTvShows = LocalData.GetAllTvShows(); 
var remoteUpdatedTime = await WsData.GetUpdatedShows(); 
foreach (var info in remoteUpdatedTime) 
{ 
    var show = localTvShows.FirstOrDefault(x => x.id == info.Key); 
    if (show != null && info.Value > show.updated) 
    { 
        updateRequired = true; 
        break; 
    } 
}

            if (UpdateRequired)
            {
                foreach (var info in remoteUpdatedTime)
                {
                    var show = localTvShows.FirstOrDefault(x => x.id == info.Key);
                    if (show != null && info.Value > show.updated)
                    {
                        var remoteserie = await WsData.GetShow(show.id);
                        SqlHelper.SyncSerie(show, remoteserie);
                        var episodeList = await WsData.GetEpisodes(show.id);
                        SqlHelper.SyncEpisodes(show.idLocal, episodeList);
                    }
                }
            }

I load the local Tv Show followed by the user and the remote Tv Series with the corresponding update time.Inside the first foreach I check if I need to update the local Tv Series.In case I have to update a Tv Series, I use a second foreach to update every local TV Series inside the local Sql database. (To add SQLite database to your app, you can read this tutorial)The code worked pretty well but I wasn’t satisfied by the loading time so I started to look for a way to improve the performances and here I discovered once more that LINQ is our friend.

The new code with LINQ

I decided to use LINQ to evaluate if I have to update a tv series, so I’ve written the code replacing the old one with this:

var seriesToUpdate = from remoteTime in remoteUpdatedTime
                join localShow in localTvShows 
                    on remoteTime.Key equals localShow.id
                where remoteTime.Key == localShow.id && remoteTime.Value > localShow.updated
                select localShow;

            if (seriesToUpdate.Any())
            {
                foreach (var show in seriesToUpdate)
                {
                    var remoteserie = await WsData.GetShow(show.id);
                    SqlHelper.SyncSerie(show, remoteserie);
                    var episodeList = await WsData.GetEpisodes(show.id);
                    SqlHelper.SyncEpisodes(show.idLocal, episodeList);
                }
            }

Speed Test

Now it’s time to see if the new code is really better than the first (Obviously it is 🙂 ). To do so, I’ve divided the code in two parts.

  • Evaluate if an update is required (Part A)
  • Update the Tv Series (Part B).

To give you the idea of how much time we can save, I’ve enclosed both the code in a for statement repeating the it for 100 times. These are the result:

Part A

  • OLD CODE:  Elapsed Time: 1077 ms
  • NEW CODE: Elapsed Time:   225 ms

Part B

  • OLD CODE:  Elapsed Time:  590 ms
  • NEW CODE: Elapsed Time:   122 ms

Total

  • OLD CODE:  Elapsed Time:  1667 ms
  • NEW CODE: Elapsed Time:    347 ms

Looking at the time spent by the old and new code we  went from 1667 ms to 347 ms, saving 1320 ms. The difference is HUGE.From the point of view of a user, saving almost 1.5 seconds makes a massive difference, maybe the difference between keeping your app or uninstalling it.

Conclusion

A mobile device has a limited amount of resources and users don’t like to spend time waiting in front of a loading screen. Even the most useful app, if not optimized will be uninstalled by the users. This is why it’s really important to optimize your code.Today we have seen that with a good use LINQ  we can massively reduce the time used by our code.If you like the article, comment and share it!

Xamarin.Forms is fantastic, you write your code once inside your PCL/.NetStandard project and it will run on many different platforms.However sometimes we need to access directly the native platform. To do so, we can use something called DependencyService.DependencyService allows us to use platform-specific functionality from shared code.To use the DependencyService we need:

  • An interface inside our shared code
  • An implementation for each platform
  • A registration

After the DependencyService is ready, then we can call it from our shared code.If we want to add a Sqlite database to our Xamarin.Forms project, because we cannot create it directly in our shared code, we need to use a DependencyService so in this tutorial we are going to see how to use the DependencyService to create and use a Sqlite database in our multi platform app.

TUTORIAL

First of all, let’s create an empty Xamarin.Forms project using a .NetStandard project. For a tutorial on how to create a Xamarin.Forms project, you can read this guide: http://www.xamarinexpert.it/2018/03/03/xamarin-forms-a-guide-for-beginners/

Empty Xamarin Project
Fig.1 Structure of an empty Xamarin.Forms Project

In the first image you can see the structure of a Xamarin.Forms project.As we said, the creation of a DependencyService consists of 3 steps.

First Step – The interface

Now the first step to do, is to create the Interface for our DependencyService.Let’s create and add an interface called ISql to our .NetStandard project:

public interface ISql
{
    SQLiteConnection GetConnection(string dbname = "database.db3");
    SQLiteAsyncConnection GetConnectionAsync(string dbname = "database.db3");
}

This interface exposes two methods:GetConnection: Get a connection for the Sqlite database.GetConnectionAsync: Get an async connection for the Sqlite database.Really easy. Don’t you think?

Second Step – The implementation

Inside this second step, we need to implement the interface in each platform. Let’s start with Android

Android

We need to create in Android a class the implements the ISql interface, let’s call this class SqlImplementation:

public class SqlImplementation : ISql
{
    public SQLiteConnection GetConnection(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        string documentsPath = System.Environment.GetFolderPath(Environment.SpecialFolder.Personal);
        // Documents folder
        var path = Path.Combine(documentsPath, sqliteFilename);
        var conn = new SQLiteConnection(path, SQLiteOpenFlags.ReadWrite | SQLiteOpenFlags.Create | SQLiteOpenFlags.FullMutex);
        return conn;
    }

    public SQLiteAsyncConnection GetConnectionAsync(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        string documentsPath = System.Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
        var path = Path.Combine(documentsPath, sqliteFilename);
        return new SQLiteAsyncConnection(path);
    }
}

We have basically implemented the two methods of our ISql interface. These two methods return the native connection to an Android Sqlite database.

iOS

Now we need to create the same class inside the native  iOS project:

public class SqlImplementation : ISql
{
    public SQLiteConnection GetConnection(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder

        var path = Path.Combine(documentsPath, sqliteFilename);
        var conn = new SQLiteConnection(path, SQLiteOpenFlags.ReadWrite | SQLiteOpenFlags.Create | SQLiteOpenFlags.FullMutex);
        return conn;
    }

    public SQLiteAsyncConnection GetConnectionAsync(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
        var path = Path.Combine(documentsPath, sqliteFilename);
        return new SQLiteAsyncConnection(path);
    }
}

As you can see the code is basically the same but it’s IMPORTANT to add the implementation to each platform you need to use, otherwise you’ll get an error.

UWP

Now it’s time to implement the interface for UWP:

public class SqlImplementation : ISql
{
    public SQLiteConnection GetConnection(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        var path = Path.Combine(ApplicationData.Current.LocalFolder.Path, sqliteFilename);
        var conn = new SQLiteConnection(path, SQLiteOpenFlags.ReadWrite | SQLiteOpenFlags.Create | SQLiteOpenFlags.FullMutex);
        return conn;
    }

    public SQLiteAsyncConnection GetConnectionAsync(string dbname = "database.db3")
    {
        var sqliteFilename = dbname;
        var path = Path.Combine(ApplicationData.Current.LocalFolder.Path, sqliteFilename);
        return new SQLiteAsyncConnection(path);
    }
}

and this concludes the second step.

Third Step – The registration

it’s extremely important to register the DependencyService otherwise it will not work.Don’t worry, this step is incredibly easy, the only thing you need to do is to add this line of code in each SqlImplementation class just before the namespace:

[assembly: Dependency(typeof(SqlImplementation))]

so for example the final code of your Android implementation will be:

[assembly: Dependency(typeof(SqlImplementation))]

namespace YOURNAMESPACE
{
    public class SqlImplementation : ISql
    {
        public SQLiteConnection GetConnection(string dbname = "database.db3")
        {
            var sqliteFilename = dbname;
            string documentsPath = System.Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
            var path = Path.Combine(documentsPath, sqliteFilename);
            var conn = new SQLiteConnection(path, SQLiteOpenFlags.ReadWrite | SQLiteOpenFlags.Create | SQLiteOpenFlags.FullMutex);
            return conn;
        }

        public SQLiteAsyncConnection GetConnectionAsync(string dbname = "database.db3")
        {
            var sqliteFilename = dbname;
            string documentsPath = System.Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
            var path = Path.Combine(documentsPath, sqliteFilename);
            return new SQLiteAsyncConnection(path);
        }
    }
}

REMEMBER to add the assembly line to EACH of your SqlImplementation classes.

HOW TO USE IT

Now the DependencyService is ready, we just need to call use it. If we want to get the SqLite connection we just need to use a single line of code inside our share code:

SQLiteConnection database = DependencyService.Get<ISQLite>().GetConnection();

Now you have your sql connection in you shared code so you can start to use your SqLite database.

Sqlite Plugin

It’s extremely easy to use the DependencyService to add a Sqlite database to your Xamarin.Forms app, but if you want an already made solution, you can use my Sqlite plugin so after you install it, you can directly use your database with a single line of code:

SQLiteConnection conn = MTSql.Current.GetConnection("yourdatabasename.db3");

It cannot be easier than that.You can find a tutorial on how to use the plugin here: http://www.xamarinexpert.it/2018/03/01/sqlite-made-easy/The official page is here: http://www.xamarinexpert.it/plugins/mt-sqlite/You can find the nuget package here: https://www.nuget.org/packages/MarcTron.Sqlite

More

You have doubts about the DependencyService or Sql? You want to know more? Ask me adding a comment below this article.

Have you ever dreamed to create a 3D game? Or maybe an Augmented Reality app? With Xamarin and UrhoSharp it couldn’t be easier.

UPDATE

The new UrhoSharp tutorial (with source code) is available here:https://www.xamarinexpert.it/blog/urhosharp-tutorial-how-to-create-your-first-project-with-xamarin-forms/

UrhoSharp

UrhoSharp is a lightweight Game Engine suitable for using with C# and F# to create games that run on Android, iOS, Mac, Windows and Unix. The game engine is available as a portable class library, allowing your game code to be written once and shared across all platforms. UrhoSharp is powered by Urho3D (http://urho3d.github.io/), a game engine that has been under development for more than a decade.The idea is the same as Xamarin: you write your code once and your app will run on many different platforms. In this case:

  • Android
  • iOS
  • Mac
  • Windows (WPF and UWP so it will run also on Windows phones)
  • Unix

After several months of silence UrhoSharp has come back strongly with a new release (v.1.8.91) tha fixes many bugs and updates this extremely powerful engine.The biggest news are:

  • Updated to Urho3D 1.7
  • ARKit and ARCore components
  • Fixed major Android and iOS crashes
  • Optional DirectX11 backend for Windows
  • UWP 64bit support (and .NET Native toolchain)

The amazing thing is that with UrhoSharp you can create your 2D/3D games and also create amazing Augmented Reality apps thanks to support to ARKit (iOS) and ARCore (Android).

I’m writing a tutorial on how to use UrhoSharp and I’ll publish it here as soon as it ready.

Meanwhile you can find more info on the official Xamarin website: https://developer.xamarin.com/guides/cross-platform/urhosharp/introduction/

For a beginner’s guide on how to create a Xamarin.Forms app you can read this tutorial: http://www.xamarinexpert.it/2018/03/03/xamarin-forms-a-guide-for-beginners/

Admob for Xamarin made easy

May 6, 2019 | Guide, Plugin, Tutorial | 155 Comments

In this tutorial I’ll show you how to monetize your Xamarin apps with AdMob using my MTAdmob plugin.

Important: If you receive errors compiling the code for iOS, install the package Xamarin.Google.iOS.MobileAds in your iOS project.

UPDATE 16/10/2019: MTAdmob is now Open Source on Github: https://github.com/marcojak/MTAdmobUPDATE 11/10/2019: VERY IMPORTANT!!! The new version 1.4.4 is out. There is an issue in the latest Xamarin.Google.iOS.MobileAds 7.47. Because of this, in your iOS project you have to install the plugin Xamarin.Google.iOS.SignIn 4.4.0 too. This will let you compile and use MobileAds.

UPDATE 1/May/2019: I’ve released the new version 1.3 thas sovles some issues with iOS and improves performances.

UPDATE: From version 1.2, MTAdmob supports also Google ads rewarded videos for Android and iOS

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

To help you to speed up your Xamarin development, I’ve created a set of plugins, one of them is MTAdmob. Thanks to this plugin you can add Admob banners and Insterstitials in just few lines of code. It couldn’t be easier than that and I’ll show you.

Install the plugin

First of all, right click on your Xamarin solution and select “Manage Nuget packages for Solution”

manage nuget

Visual Studio will open a new screen where you can search and install one or more nuget packages. In this case we can search for the MTAdmob plugin. Searching for MarcTron will show you all my packages (I’m sure you can find other useful plugins that I’ve written), and we can select the MTAdmob plugin as showed in the next image.

It’s very important that you install the plugin in your PCL/.Net standard project and in your platform projects (Android, iOS, UWP).

After the Admob plugin is installed we can add banners and insterstitials to our projects.

Add Ads to our project

With version 1.0 the MTAdmob plugin supports banner and interstitials for Android and iOS. If you would like to see the plugin supporting also the UWP platform, let me now and I’ll add the support in a new version.

As I’ve said we can add Banners and Interstitials Admob ads to our project. Let’s start with the Banners

How to add an Admob Banner

An Admob banner is just a view inside our page. It means that we can add it using XAML or C#. First of all let’s see how to add an Admob banner using XAML.

Add an Admob Banner with XAML

In MTAdmob to use an Admob banner I’ve created a custom control called AdView, so to use it we can use this code:

<?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:controls="clr-namespace:MarcTron.Plugin.Controls;assembly=Plugin.MtAdmob"
             x:Class="Test.MTAdmob.MainPage">

<StackLayout>
    <Label Text="Let's test an Admob Banner!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    <!-- Place the Admob controls here -->
    <controls:MTAdView/>
</StackLayout>

In this example we have created a StackLayout with 2 controls: a label and an AdView (our Admob banner). Easy! Isn’t it???

The AdView control is basically a View so you can use all the properties you can think of like: HorizontalOptions, VerticalOptions, IsVisible…

In addition to these properties, I’ve added in AdView two other properties: AdsId and PersonalizedAds.

AdsId: Allows you to add the Banner Id (you can find it in your Admob account)

PersonalizedAds: This allow you to use non personalized ads. For example in case of GPDR. Of course it’s better to use personalized Ads.

To use these properties you can update the previous code to:

<controls:AdView PersonalizedAds="true" AdsId="xxxxxxxxxxxxxxxxxx"/>

Add an Admob Banner with C#

In case you don’t write your pages with XAML or you write your UI in C# or you want to add your view only in some cases, you can add your Admob Banner using this code:

using MarcTron.Plugin;
...
MTAdView ads = new MTAdView();

Of course you need to attach this View to your layout, but you know how to do it (If not, feel free to ask).

To use the custom properties you can change the previous code to:

...
MTAdView ads = new MTAdView();
ads.AdsId = "xxx";
ads.PersonalizedAds = true;

Also in this case, to add an Admob banner is INCREDIBILY EASY!!!

Global Custom Properties

As you have seen, the properties AdsId and PersonalizedAds belong to a single AdView. It means that you have to set them for every Admob Banner.

To make things even easier I’ve added the option to set these properties only once. To do so, you can use this C# code:

CrossMTAdmob.Current.UserPersonalizedAds = true;
CrossMTAdmob.Current.AdsId = "xxxxxxxxxxxxxxxx";

In this case all your Admob banner will show personalized ads and will have the same Id.

If you set local and global properties, the local ones will have higher priority.

Use of Banner Events

I’ve added 4 events to the Admob banner that you could find nice to have. These events are:

  • AdsClicked When a user clicks on the ads
  • AdsClosed When the user closes the ads
  • AdsImpression Called when an impression is recorded for an ad.
  • AdsOpened When the ads is opened

To use these events you can write this code:

AdView myAds = new AdView();
myAds.AdsClicked += MyAdsAdsClicked;
myAds.AdsClosed += MyAds_AdVClosed;
myAds.AdsImpression += MyAds_AdVImpression;
myAds.AdsOpened += MyAds_AdVOpened;

Of course you can use these events also if you have declared your AdView in your XAML code.

Admob Interstitials

Now that we know how to add Admob banners using my plugin MTAdmob, let’s see how we can add Admob Interstitials. If possible, to add an Admob interstitial is even easier. You just need a single line of code. Don’t you believe me? Look here how to show an Admob interstitial:

CrossMTAdmob.Current.ShowInterstitial("ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx");

I told you!!! That’s it!!! With that line of code you have just showed an Interstitial in you app. Of course you need to replace that string with the Insterstitial ID you can find in your Admob account.

Events for Interstitials

There 3 events that you can use with Interstitials:

OnInterstitialLoaded        When it's loaded
OnInterstitialOpened        When it's opened      
OnInterstitialClosed        When it's closed

Rewarded Video

From version 1.1 the plugin supports the amazing Rewarded Video too.

To show a rewarded video you just need a single line of code:

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

Events for Rewarded videos

There are 7 events that you can use with the Rewarded video Ads:

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

Initialization

Before you can use the Admob banners and Interstitials, you need to initialize it. You need to do it only once so it makes sense to initialize it onside the OnCreate method in Android and FinishedLaunching in iOS.

In your Android project add this line in your OnCreate method:

MobileAds.Initialize(ApplicationContext, "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx");

In your iOS project add this line in your FinishedLaunching method:

MobileAds.SharedInstance.Start(CompletionHandler);

private void CompletionHandler(InitializationStatus status){}

In iOS you should install the package Xamarin.Google.iOS.MobileAds and Xamarin.Google.iOS.SignIn!

You need to add to your Info.plist file this:

	<key>GADApplicationIdentifier</key>
	<string>YOUR APP ID</string>
	<key>GADIsAdManagerApp</key>
	<true/>

Android Project (Important)

In your AndroidManifest you should add these lines:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<application android:label="Test.MTAdmob.Android">
    <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
    <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
</application>

iOS Project (Important)

From version 1.4.4 you need to manually install the packages: Xamarin.Google.iOS.MobileAds and Xamarin.Google.iOS.SignIn! If you don’t install them, your app will not compile.

Some useful links

Conclusion

This Admob MTAdmob plugin is incredibly easy to use but in case you need help, or you want to suggest a new feature or for any other reason, write me.

%d bloggers like this: