Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using UI for Xamarin in Visual Studio for Mac

DZone's Guide to

Using UI for Xamarin in Visual Studio for Mac

Check out Nickolay's quick tutorial for using UI for Xamarin in Visual Studio for Mac.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

See how easy it is to create and run an app with the new Visual Studio for Mac and UI for Xamarin.

Have you heard the BIG news? Visual Studio for Mac was announced just a little before Microsoft Connect(); and it is already available for download from here. What exciting times are coming! We were very excited, just like you, to try it out, together with Telerik UI for Xamarin.

First, I should say that, as a guy acquainted with both Visual Studio (for Windows) and Xamarin, I found the fact that Visual Studio for Mac actually resembles Xamarin Studio very appealing. So, you get both the easy-to-start experience coming from working in an already known environment and the confidence that this environment will continue to evolve and grow. I should also say that I am thrilled by the ability of the new version to show design-time for Forms. Custom native controls seem to be unsupported in the Preview version out-of-the-box, but I expect this to get improvements too.

Let’s now get straight to the point. What I will do now is first create a new project and then add the Telerik UI for Xamarin references using the NuGet server that we provide. Then, I will add our Calendar control and will run the app.

Create and Run an App in Visual Studio for Mac with UI for Xamarin

  1. Open Visual Studio for Mac and create a new Forms app visualstudio-for-mac-telerik-projectview
  2. Right-click the Packages folder of the portable class library project and select Add Packages visualstudio-for-mac-telerik-addpackage
  3. From the menu at top-left in the Add Packages window, select Configure Sources visualstudio-for-mac-telerik-configure-nuget
  4. From the Preferences window that appears, click Add and fill in the Name (e.x. Telerik) and the NuGet address (https://nuget.telerik.com/nuget) for the Telerik NuGet server. Then click Add Source. visualstudio-for-mac-telerik-fillfields
  5. Now, from the Add Packages window, choose the Telerik NuGet item that you just created and enter your Telerik.com credentials. Note that if you already have Xamarin Studio with the Telerik NuGet source added, you may get the following message: Password encryption is not supported on .NET Core for this platform. The following feed uses an encrypted password: ‘Telerik NuGet Package’. You can use a clear text password as a workaround.
    What you need to do is delete the Telerik NuGet feed from Xamarin Studio, as Visual Studio is trying to access it and it can’t for the aforementioned reason. visualstudio-for-mac-credentials
  6. After the credentials are accepted, search for “Xamarin” using the search box at top-right to reach our Telerik UI for Xamarin packages (available depending on your license). Add the package you are entitled to.
  7. In your main page of the portable class library, just add the following:

    this.Content = new RadCalendar();

  8. In the AppDelegate of the iOS project, you need to add a an attribute and a new instance for the CalendarRenderer:


using System;

using System.Collections.Generic;

using System.Linq;

using Foundation;

using Telerik.XamarinForms.Common.iOS;

using UIKit;

using Xamarin.Forms;

[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(Telerik.XamarinForms.InputRenderer.iOS.CalendarRenderer))]

namespace Test.iOS

    [Register("AppDelegate")]

    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)

            new Telerik.XamarinForms.InputRenderer.iOS.CalendarRenderer();

            global::Xamarin.Forms.Forms.Init();

            TelerikForms.Init();

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);




  • In the MainActivity of the Android project, you should do the same thing:
    using System;
    
    using Android.App;
    
    using Android.Content;
    
    using Android.Content.PM;
    
    using Android.Runtime;
    
    using Android.Views;
    
    using Android.Widget;
    
    using Android.OS;
    
    using Xamarin.Forms;
    
    [assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(Telerik.XamarinForms.InputRenderer.Android.CalendarRenderer))]
    
    namespace Test.Droid
    
        [Activity(Label = "Test.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    
            protected override void OnCreate(Bundle bundle)
    
                TabLayoutResource = Resource.Layout.Tabbar;
    
                ToolbarResource = Resource.Layout.Toolbar;
    
                base.OnCreate(bundle);
    
                global::Xamarin.Forms.Forms.Init(this, bundle);
    
                LoadApplication(new App());


  • Finally, just run the project for your favorite platform:visualstudio-for-mac-xamarin-calendar
  • This is it! You just witnessed how easy it is to create and run an app in Visual Studio for Mac with Telerik UI for Xamarin. The complete project source code is available on  GitHub. We are eager to see what's coming next in Visual Studio for Mac.

    Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

    Topics:
    visual studio ,telerik ,ui ,native ,microsoft ,web dev

    Published at DZone with permission of Nikolay Diyanov, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}