Monologue

Keeping up with the latest in .NET, C#, Xamarin, and Azure is easier than ever. Co-hosts Matt Soucoup and James Montemagno cover a range of topics relevant to Xamarin developers from designing mobile apps to identity management. This week’s episode includes Xamarin.Forms 4 and the most recent features that were just released!

Xamarin.Forms 4

Xamarin.Forms 4.0 is in the wild, and it’s even better than you think! Matt and James give a full rundown of all the highlights in Xamarin.Forms 4.0 – and there are a ton of them! But there’s more in store for you in this podcast.

Office Hours

Are you ready for it…? Office Hours are back! Book some time with Matt to discuss any cloud or mobile dev topic that’s on your mind.

Even though Xamarin.Forms 4.0 is already out, we just can’t stop talking about the great features like Shell and ImageSourceTypes!

And can you believe it – Xamarin.Forms 4.1 is RIGHT around the corner?!?

Get Even More

James and Matt will also talk a bit about Microsoft Learn and discuss the Azure Event Grid. As well as share more details about this super cool conference coming up in July – the Xamarin Developer Summit.

Of course, last but not least… the Pick of the Pod!! Be sure to download this episode from your favorite podcast app.

Subscribe or Download Today

Join your co-hosts Matt Soucoup and James Montemagno to discuss the latest and greatest in Xamarin and cloud development. Get all the updates about Xamarin.Forms 4, recent features, and future releases in a jiffy.

Subscribe to the Xamarin Podcast on iTunes, Google Play Music, Stitcher, or your favorite podcast app today!

The post Xamarin Podcast: Xamarin.Forms 4 And So Much More! appeared first on Xamarin Blog.

This post was guest authored and contributed by Leonardo Viacava. Leo is co-founder and CTO of UXDivers, creators of Grial UI Kit and Gorilla Player. UXDivers specializes in designing and coding engaging mobile experiences using Xamarin technologies.

Grial UI Kit

Grial UI Kit provides XAML templates, custom controls, helpers and resources that accelerate the creation of Xamarin.Forms apps. We make it dead simple for .NET developers to build beautiful cross-platform apps, fast.

Let’s take a look at how Grial UI Kit can help you build a great app.

Below you can see an overview of the screens for a Tea Shop app called Clayton. The app took us 20 minutes to build, this blog took us much longer to write

After you read this blog, watch this video to see the complete process described below at normal speed.

Creating a Beautiful App in Minutes

Creating the App

Grial based apps are created with our Grial Wb Admin site, which allows you to create and manage your apps. There are 5 simple steps to create your app:

1. Register your App. Select your license and create the app.
2. App Name. Give your app a name
3. Project Setup. Enter the solution name, project name, namespace, assembly name and bundle identifier. All of these are auto-suggested based on the app name.
4. Screens. Choose any, and as many, screens from our 90+ cataloge to kick start your app.
5. Icon and Theme. Upload a high-resolution image of your app icon. Grial Wb Admin automatically generates all the required icon resolutions for iOS and Android. Select a theme to use. You can use the theme as it is, or choose to customize its accent color to match your brand’s look and feel.

Now, you can download the Visual Studio solution ready to run, and you can start working on your app. The downloaded Grial solution uses your specified names, app icon and theme. It includes all your selected screens plus any accessory views used by those screens. You can add more screens later if you need to.

Watch it in Action

Watch the video below to see the 5 steps wizard creation process using Grial Web Admin and the download and running of the Clayton app with Visual Studio.

Downloading the Solution

The downloaded Visual Studio solution includes:

1. XAML files for the selected screens and all accessory views
2. The App Theme
3. A View Model for each page
4. Sample data in JSON format
5. All helpers/resources required by the app to work

The solution also references a NuGet package called UXDivers.Grial that contains Grial custom controls, effects, custom renderers, and more. It also includes other popular community NuGet packages (e.g. Xamarin.Essentials, Xamarin.FFImageLoading, Newtonsoft.Json).

In the video, the downloaded app uses a master-detail navigation that includes a link for each page. You can tweak the code to add or remove links.

Using Gorilla Player

The options to customize your app pages are endless. You can remove or add sections, create new ones by combining parts of existing ones, or just keep them as they are. Preview your XAML file customizations instantly using Grial’s best friend: Gorilla Player (pre-configured for all Grial apps, read more about Gorilla in this previous post).

A note on Data: Grial pages have no hardcoded data, all data comes from View Models through data bindings. The View Models read Grial’s sample data from JSON files, which means manipulating the data of your prototypes is super easy. Once the prototype is ready, connect the View Models to the real data source with no impact to the XAML code of your pages.

Customizing the App

Watch the video below to see how we used Gorilla Player to customize the Clayton Tea Shop app. Note the following:

• XAML customization. We customized (1) the e-commerce main page EcommerceMainPage, (2) the product detail page ProductDetailPage and (3) the walkthrough WalkthroughIllustrationPage.
  1. The search bar from the navigation bar was removed and page title changed.
  2. The product color picker was also removed as it did not apply to the Tea Shop domain. Page title was changed and other minor tweaks were made.
  3. Adjusted images and texts.
• Data manipulation. The DesignTimeData.json file (where Gorilla Player stores its design-time data) was updated. Making the data for the e-commerce main page (EcommerceMainPage) and the product detail page (ProductDetailPage) relevant to the Tea Shop context. To get the running prototype as shown in the video, you also need to update the Grial JSON sample data files for the EcommerceMainPage.
• Navigation. We removed the unnecessary screens from the master page by updating the MainMenuViewModel class. Set the e-commerce main page (EcommerceMainPage) as the app’s initial page. And used a modal page to display the introductory walkthrough (WalkthroughIllustrationPage) right after the app starts.

The image below gives an overview of the screens transformed by this first round of tweaks.

Adding a New Functionality

Let’s say you love green tea. How do you explore the full category without going into each item individually while still getting more product details than its name and photo?

You add a See All button to the categories in the main page (EcommerceMainPage) and a command to navigate to the ProductCatalogPage passing the correspondent category items. To tailor it further, we modified the XAML file of the list items template (ProductsCatalogItemTemplate) to remove the Save/Compare/Share buttons, adjust the image aspect, and include the item’s price.

Well… clearly there’s still work to do before you would consider the app done. For instance, some screens are missing and the View Models are reading sample data instead of data from a backend. In any case, what we wanted you to see is how fast you can build a beautiful, cross-platform app using Xamarin.Forms and Grial UI Kit.

For a tour of the full 20 minutes process, at normal speed, check this video.

Note: the videos show only the iOS app, but the Android app looks just as great.

Grial UI Kit 3

Grial UI Kit 3 is the latest, and greatest version of Grial yet. With over 160 fully themeable, customizable and extensible XAML files, building beautiful Xamarin.Forms apps is now faster than ever.

This version comes with:

• 15 custom controls, including data grid, video player, tab control, card view, and checkbox.
• Gradients support, everywhere.
• Animations for a more engaging experience.
• 6k scalable icons.
• Responsive Helpers to simplify building multi-form factor layouts.
• Built-in localization support, with instant runtime switch.
• Right-to-Left support for all views, with instant runtime switch.
• 6 predefined, yet customizable themes.
• Fast project setup with Grial Web Admin.

Learn More

To learn more about Grial, please visit grialkit.com, for more technical and detailed information go to docs.grialkit.com. Download the Demo app, available in iOS and Android, to experience what you can build with Xamarin.Forms and Grial UI Kit.

All the videos shown here are available in this playlist. We’d love to hear your feedback on Twitter @grialkit.

The post Grial UI Kit: Building Beautiful Xamarin.Forms Apps, Faster appeared first on Xamarin Blog.

On July 11-12th, the community-run Xamarin Developer Summit is set to launch in Houston, Texas. The two-day conference is packed full of amazing Xamarin content, covering a wide range of mobile development topics by expert speakers from around the world. Microsoft is excited to partner with the Xamarin Developer Summit community and for helping to bring even more Xamarin awesomeness to this conference.

Microsoft at Xamarin Developer Summit

Members from the Xamarin, Azure, and App Center teams will deliver deep, technical sessions and participate in panel discussions. Additionally, they will be featured in keynotes all throughout the conference!

With over 35 sessions, there is something for everyone. Here is just a sneak peek at the sessions from teams at Microsoft:

• Keynote: A Glimpse Into The Future of Xamarin
• Keynote: Mobile DevOps with Xamarin, App Center, & Azure DevOps
• What’s new for Xamarin Developers
• Let’s Make Crazy Beautiful UI with Xamarin.Forms
• Creating Consistent UI with Visual
• Speed Up Android Build Times & Shrink APK Sizes
• Xamarin.Forms Shell: Consistent, Dynamic, Customized, & Feature Filled UI
• App Center and the Future of Azure Mobile Apps
• Page Object Pattern & UITest Best Practices
• Building Xamarin.Android from source
• and More!

The Community at Xamarin Developer Summit

Attending the conference will also allow you to network with other enthusiasts, professionals, and companies who share your passion for Xamarin, .NET and multi-experience app development. Get to know more about the future of the platform from leading voices in the community.

Learn More

Head over to the official Xamarin Developer Summit page for a full list of speakers & sessions. There, you will also find details about how you can be a part of this amazing conference. Sign up today!

The post Join Microsoft Teams at Xamarin Developer Summit appeared first on Xamarin Blog.

A common scenario for mobile apps is to help their users get to a specific location. This may be a restaurant, office, or the trailhead for the most amazing hike in the pacific northwest. We can leverage the existing built-in map application of iOS, Android, and Windows to easily get our users there. This is great because these apps already have the map data, user preferences, and full GPS navigation built right in. Xamarin.Essentials, our cross-platform API library, enables any mobile app to easily launch the map to a specific location or start navigation to that location from the user’s current position using the Maps API.

Setup

to start with the Xamarin.Essentials library, you can create a new Xamarin.Forms project using the latest version of Visual Studio 2019. Xamarin.Essentials now comes bundled with every project. If you have an existing app, you can add Xamarin.Essentials to it by installing the NuGet package. Finally, you can add Xamarin.Essentials to your .NET Standard library if you are using one to share code across your iOS, Android, and UWP app projects.

After installing the NuGet package, there is a small amount of code on Android that is required to initialize Xamarin.Essentials.

In the Android project’s MainLauncher or any Activity that is launched, Xamarin.Essentials must be initialized in the OnCreate method:

protected override void OnCreate(Bundle savedInstanceState) {
  //...
  base.OnCreate(savedInstanceState);
  Xamarin.Essentials.Platform.Init(this, savedInstanceState); // add this line to your code, it may also be called: bundle
  //...

To handle runtime permissions on Android, Xamarin.Essentials must receive an OnRequestPermissionsResult. Add the following code to all Activity classes:

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

  base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}

Open a Specific (Map) Location

The easiest way to open maps is to use a Location that consists of the latitude and longitude to display. This location is passed into the Maps.OpenAsync method along with MapLaunchOptions, which define additional information to pass to the map app. One property that you may want to set in the options is the Name, which the map app will display instead of the latitude and longitude. Here is an example of opening the map app to Microsoft Building 25, the home of Channel 9.

public async Task MapBuilding25()
{
   var location = new Location(47.645160, -122.1306032);
   var options =  new MapLaunchOptions { Name = "Microsoft Building 25" };

   await Map.OpenAsync(location, options);
}

Navigate to Location

Set the NavigationMode property when launching the map if your map needs to give navigation options to the user. There are several navigation modes including driving, walking, bicycling, and transit. There are a few platform differences when it comes to supported modes, so be sure to read the Maps documentation.

public async Task NavigateToBuilding25()
{
   var location = new Location(47.645160, -122.1306032);
   var options =  new MapLaunchOptions { NavigationMode = NavigationMode.Driving };

   await Map.OpenAsync(location, options);
}

Using Placemarks

In addition to navigation to a specific Location, the Maps API can also use Placemarks. This property contains information such as street address, city, and country. Here is an example of navigating to Microsoft Building 25 with a Placemark

public class MapTest
{
    public async Task NavigateToBuilding25()
    {
        var placemark = new Placemark
            {
                CountryName = "United States",
                AdminArea = "WA",
                Thoroughfare = "Microsoft Building 25",
                Locality = "Redmond"
            };
        var options =  new MapLaunchOptions { Name = "Microsoft Building 25" };

        await Map.OpenAsync(placemark, options);
    }
}

See It In Action

Did you know that we have a dedicate The Xamarin Show each week that’s available both on YouTube, and Channel 9 ? There we highlight how to set up, get started, and use the APIs in Xamarin.Essentials. Check out this episode on Maps:

Learn More

Browse through the Xamarin.Essentials documentation to learn more about all of the great cross-platform native APIs. Further more, be sure to check out the Maps documentation to learn of the APIs available, additional implementation, and limitation details. Xamarin.Essentials is also open source on GitHub where you can report issues, ask for features, and contribute to the library.

The post Use Maps to Display and Navigate Users with Xamarin.Essentials appeared first on Xamarin Blog.

If you pay attention to the release notes, you probably know that Plastic's command line client now has a clone command. If you are used to other version control tools, then using it will be as easy as falling off a log. If not, let me tell you what the cm clone command does—it creates an exact copy of a remote repository in your Plastic SCM server.

You just need to type in the remote repository specification, and the cm will take care of creating a local repository of the same name (if it doesn't exist yet) and replicating all the content from one to the other.

The syntax of the cm clone command is as follows:

> cm clone <src_rep>@<src_rep_server> [dst_rep_server]

For example:

> cm clone codice@central.home:9095 codice@co-located.home:8084

If you don't specify the destination server, the clone command will use your default server.

I know what you're thinking. What if I don't have a direct Internet connection between source and destination? No problem. You can clone to a package! Let me show you how:

Just a few weeks ago we shipped Xamarin.Forms 4.0, which introduced the new Shell navigation for quickly bootstrapping your applications. As well as image source unification to make it convenient to use the same images everywhere, like the new FontImageSource. Several months ago our very own James Montemagno submitted a pull request introducing a CheckBox control. In recent days we also shipped a service release to quickly respond to the feedback you sent us. You’re not slowing down, and neither are we!

Today we are shipping a pre-release of our next version, Xamarin.Forms 4.1. Here’s is what is in store for you.

CheckBox has Arrived

Our team worked with James to get CheckBox across the line, and we’re excited to now share it with you. We have also provided Material versions of CheckBox when you use Visual.

<CheckBox IsChecked="True" Color="Blue" />

Android

iOS

UWP

CheckBox is implemented for many platforms:

• iOS
• Android
• UWP
• MacOS
• WPF

This control marks another significant step in the transition of Xamarin.Forms from being platform focused, to being customer focused. Previously, if a control did not exist on all of the primary Xamarin.Forms platforms of Android, iOS, and UWP then it was considered platform specific and would not be implemented. Today, however, when we hear that you need a cross-platform control that isn’t present on 1 of the 3 platforms, we will consider how we can meet that need for you.

Improved Text Scaling for iOS Accessibility

We now use the iOS preferred font scaling features, so your fonts will magically size in response to the user’s accessibility preferences when you used named font sizes. And there are more sizes to now choose from:

• Large = 4,
• Body = 5,
• Header = 6,
• Title = 7,
• Subtitle = 8,
• Caption = 9

<ContentPage.Resources>
    <ResourceDictionary>
        <local:MapItemTemplateSelector x:Key="MapItemTemplateSelector">
            <local:MapItemTemplateSelector.DataTemplate>
                <DataTemplate>
                    <map:Pin Position="{Binding Position}"
                                Address="{Binding Address}"
                                Label="{Binding Description}" />
                </DataTemplate>
            </local:MapItemTemplateSelector.DataTemplate>
        </local:MapItemTemplateSelector>
    </ResourceDictionary>
</ContentPage.Resources>

<map:Map 
    ItemsSource="{Binding Places}"
    ItemTemplateSelector="{StaticResource MapItemTemplateSelector}" />

class MapItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DataTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return DataTemplate;
    }
}

<map:Map MapClicked="Handle_MapClicked" />

void Handle_MapClicked(object sender, MapClickedEventArgs e)
{
    Debug.WriteLine($"Last MapClick: {e.Position.Latitude}, {e.Position.Longitude}");
}

<controls:MyCustomControl... >
    <controls:MyCustomControl.ControlTemplate>
         <ControlTemplate>
              <Label x:Name="myLabel"/>
         </ControlTemplate>
    <controls:MyCustomControl.ControlTemplate>
</controls:MyCustomControl>

class MyCustomControl : TemplatedView
{
      Label _myLabel;

       protected override OnApplyTemplate()
       {  
               _myLabel = GetTemplateChild("myLabel");
       }
}