Create a Beautiful Mobile App With JetBrains Rider and Syncfusion Components

Alexander Kurakin

Wondering how to build a Xamarin mobile application with Rider? In this blog post, our friends from Syncfusion explain how to do it using Syncfusion Xamarin Components.

JetBrains Rider is a cross-platform IDE for consistent application development. Cross-platform is what most mobile developers are, targeting Android and iOS.

Syncfusion Xamarin components include over 145 essential controls, like DataGrid, Charts, and ListView, for building powerful line-of-business Xamarin applications.

In this post we’ll be using JetBrains Rider along with Syncfusion Xamarin components to develop a mobile application that will illustrate a bus seating layout in a ticket booking app. To develop this application, we’re going to use Syncfusion’s Maps control for Xamarin.

Creating a Xamarin project in Rider

Follow the below steps to create a Xamarin application in JetBrains Rider:

1. Open the Rider IDE. When prompted with a few options, choose to create a New Solution.

   

2. In the New Solution dialog, select Application under the Xamarin category. Choose Xamarin.Forms for the type, .NET Standard for the sharing strategy, and then provide a name for the solution. Here we are going to use SeatingLayoutApp as its name. Click Create to create the project and the solution.

   

Adding SfMaps to the app

Follow the below steps to add an SfMaps control to the Xamarin project:

1. Right-click the Solution name in the Solution Explorer and choose Manage NuGet Packages.

   

2. Search for Syncfusion.Xamarin.SfMaps NuGet, select the NuGet package, and install it in the three projects in the solution.

   

   If you face any issues installing the NuGet package, try to update the packages —such as Xamarin.Forms package v3.6.0.344457 or above and Android support libraries package v28.0.0.1 or above—before installing the Syncfusion.Xamarin.SfMaps package.

   

3. Add the necessary XML Namespace for adding the Maps control in the application, and then add the Maps controls along with the layers.

   <?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:SeatingLayoutApp"
                xmlns:maps="clr-namespace:Syncfusion.SfMaps.XForms; 
                assembly=Syncfusion.SfMaps.XForms"
                x:Class="SeatingLayoutApp.MainPage">
   
       <Grid>
           <maps:SfMaps>
               <maps:SfMaps.Layers>
                   <maps:ShapeFileLayer />
               </maps:SfMaps.Layers>
       	</maps:SfMaps>
       </Grid>
   
   </ContentPage>

4. Add the necessary shape files to render the shapes on the map. A shape file is a set of files that are stored in a non-topological geometry with the attribute information for the spatial features and records in a data set.

   The maps control supports reading and loading shape files. A shape file can be a set of files or a single file. Generally, a shape file contains the following files:

   • Main file (.shp)
   • dBase file (.dbf)

   Download the shape files from the GitHub location: .shp file and .dbf file.

   • Android
     1. Add the necessary shape files to the Assets folder of the Android project.
     2. Open their properties by right-clicking them.
     3. Set AndroidAsset as the value for the Build action property.
   • iOS
     1. Add the necessary shape files to the Resources folder of the iOS project.
     2. Open their properties by right-clicking them.
     3. Set BundleResource as the value for the Build action property.
5. To launch the SfMaps control in iOS, SfMapsRenderer should be initialized in the FinishedLaunching method of the AppDelegate class.

   public override bool FinishedLaunching(UIApplication app, NSDictionary options)
   { 
       global::Xamarin.Forms.Forms.Init(); 
       Syncfusion.SfMaps.XForms.iOS.SfMapsRenderer.Init(); 
       LoadApplication(new App()); 
       return base.FinishedLaunching(app, options);
   }

With this we have created a Xamarin application, added an SfMaps control, and configured it.

Rendering custom shapes

Since the Xamarin.Forms SfMaps control renders shapes from shape data in the main shape file (.shp) and the dBase file (.dbf), you need to build shape data with coordinates that render a bus seating layout. For this blog post, we created the shape data beforehand. Now, assign the shape data file to the Uri property in the ShapeFileLayer. Since you need to select multiple seats, set the SelectionMode property to Multiple. Also, assign GeometryType to Points for custom shapes as shown in the following code.

<maps:SfMaps> 
    <maps:SfMaps.Layers> 
        <maps:ShapeFileLayer Uri="Custom.shp" 
         SelectionMode="Multiple" GeometryType="Points"> 
        </maps:ShapeFileLayer> 
    </maps:SfMaps.Layers>
</maps:SfMaps>

Next, create a view model class named ViewModel and populate the data for the seat number. Set the BindingContext of the MainPage to the view model class and Bind ShapeItems to the ItemsSource property of ShapeFileLayer.

Also, set the ShapeIDPath property to refer to the data field in the ItemsSource, and set the ShapeIDTableField property to refer to the column name in the dBase file (.dbf) of shape layers to identify the shape.

public class ViewModel
{
    public List<ShapeData> ShapeItems { get; set; } 

    public SeatingLayoutViewModel() 
    { 
        int totalSeats = 22; 
        ShapeItems = new List<ShapeData>(); 
        for (int i = 1; i < totalSeats; i++) 
        { 
            ShapeItems.Add(new ShapeData("" + i)); 
        }
    }
}

public class ShapeData
{ 
    public ShapeData(string seatNumber) 
    { 
        SeatNumber = seatNumber; 
    } 

    public string SeatNumber { get; set; }
}

<Grid x:Name="Maingrid" BackgroundColor="White">
    <Grid.BindingContext>
        <local:ViewModel /> 
    </Grid.BindingContext>
    <maps:SfMaps EnableZooming="false" x:Name="Maps">
        <maps:SfMaps.Layers> 
            <maps:ShapeFileLayer Uri="Custom.shp" ItemsSource="{Binding ShapeItems}" 
                 SelectionMode="Multiple" ShapeIDPath="SeatNumber" 
                 ShapeIDTableField="seatno" EnableSelection="true" GeometryType="Points" 
                 ShapeSelectionChanged="MapsTicketBooking_ShapeSelectionChanged"> 
            </maps:ShapeFileLayer> 
        </maps:SfMaps.Layers> 
    </maps:SfMaps>
</Grid>

Setting shape colors

Colors are applied to shapes to differentiate the booked seats and available seats. To do this, set the colors from the data source to the ShapeColorValuePath property. For the booked seats’ color, use the EqualColorMapping feature to set the color based on the seat number.

<Grid x:Name="Maingrid" BackgroundColor="White">
    <Grid.BindingContext>
        <local:ViewModel />
    </Grid.BindingContext>
    <maps:SfMaps EnableZooming="false" x:Name="Maps">
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="Custom.shp" ItemsSource="{Binding ShapeItems}" SelectionMode="Multiple"
                                 ShapeIDPath="SeatNumber" ShapeIDTableField="seatno" EnableSelection="true"
                                 GeometryType="Points"
                                 ShapeSelectionChanged="MapsTicketBooking_ShapeSelectionChanged">
                <maps:ShapeFileLayer.ShapeSettings>
                    <maps:ShapeSetting ShapeFill="Gray" SelectedShapeColor="#62AA5F"
                                       ShapeColorValuePath="SeatNumber"
                                       ShapeValuePath="SeatNumber">
                        <maps:ShapeSetting.ColorMappings>
                            <maps:EqualColorMapping Value="9" Color="#FFA500" />
                            <maps:EqualColorMapping Value="8" Color="#FFA500" />
                            <maps:EqualColorMapping Value="1" Color="#FFA500" />
                            <maps:EqualColorMapping Value="2" Color="#FFA500" />
                        </maps:ShapeSetting.ColorMappings>
                    </maps:ShapeSetting>
                </maps:ShapeFileLayer.ShapeSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
</Grid>

Enabling selection

For selecting shapes in maps, the selection feature should be enabled. All the shapes in the maps can be selected. This means you need to add code in the ShapeSelectionChanged event to restrict the selection of already booked seats and display the seat number to the right of the map when a non-booked seat is clicked.

private void MapsTicketBooking_ShapeSelectionChanged(object sender, ShapeSelectedEventArgs e)
{
    ShapeFileLayer shapeLayer = sender as ShapeFileLayer;
    ShapeData data = e.Data as ShapeData;
    if (data != null)
    {
        if (data.SeatNumber == "1" || data.SeatNumber == "2" 
            || data.SeatNumber == "8" || data.SeatNumber == "9")
        {
            if (shapeLayer.SelectedItems.Contains(e.Data))
                shapeLayer.SelectedItems.Remove(e.Data);
        }
    }
}

Customizing the map

Furthermore, you can add titles, images, and borders to maps in XAML to create the appearance of a bus seating layout, and you can add a button to clear the selection.

All these features are implemented in a sample we shared in this GitHub location. Build and deploy the project in all the platforms (Android, iOS).

The screenshot of the completely implemented sample will be similar to the one below.

Conclusion

I hope you have enjoyed reading this post and can see how easy it is to create a mobile application with JetBrains Rider and Syncfusion Xamarin Components.

To learn about even more features of the Syncfusion Maps component, visit the Feature Tour page. Try this sample and share your feedback as comments below.

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!