Let's first design our app UI so it has a TextBox control where you can enter the description of a to do item, a checkbox to mark it as complete, and some buttons to perform add, delete, and refresh data functionalities.

Open the MainPage.xaml file. This is where we can edit the UI. Replace the default Grid panel with the following XAML code snippet:

<Grid> 
    <StackPanel Width="270" Margin="10"> 
        <TextBlock Text="Task description:"/> 
        <TextBox x:Name="txbTaskDescription" Height="26" /> 
        <CheckBox x:Name="chkComplete" Content="Complete?"  
                    Margin="0 10"/> 
        <StackPanel Orientation="Horizontal"  
                    HorizontalAlignment="Center"> 
            <Button Content="Save" Width="100"  
                    Margin="10" Click="OnSaveButtonClicked"/> 
            <Button Content="Refresh" Width="100"  
                    Margin="10" Click="OnRefreshButtonClicked"/> 
        </StackPanel> 
        <ListBox x:Name="lstDetails" Height="100"> 
            <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel Orientation="Horizontal"> 
                        <CheckBox IsChecked="{Binding Complete}"/> 
                        <TextBlock Text="{Binding Text}"  
                                    Margin="10 0"/> 
                    </StackPanel> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 
        </ListBox> 
        <StackPanel Orientation="Horizontal"  
                    HorizontalAlignment="Center"> 
            <Button Content="Delete" Width="80"  
                    Margin="5" Click="OnDeleteButtonClicked"/> 
        </StackPanel> 
    </StackPanel> 
</Grid> 

In the code-behind file of MainPage, that is, the MainPage.xaml.cs file, define the button click events that we associated in the XAML page. Mark all of them with the async keyword. This will now look like the following code snippet:

private async void OnSaveButtonClicked(object sender,  
                                       RoutedEventArgs e) 
{ 
 
} 
 
private async void OnRefreshButtonClicked(object sender, 
                                          RoutedEventArgs e) 
{ 
 
} 
 
private async void OnDeleteButtonClicked(object sender,  
                                         RoutedEventArgs e) 
{ 
 
}

Now, build the solution to check for any errors and correct them if you encounter anything. Once this is done, run the application, which will look like the following screenshot:

Now it's time to integrate the mobile service API to perform CRUD operations on the Azure database from your application. The GetTable method of the service client object returns the handle of the table where you want to perform database operations as IMobileServiceTable. Generally, it takes the table name as an argument. Alternatively, you can call strongly typed data operations by the type of the instance of the table:

App.MobileService.GetTable("TodoItem"); // untyped data operation 
App.MobileService.GetTable<TodoItem>(); // typed data operation 

To fetch the contents of the remote table, we need to call the ReadAsync() method on top of the mobile service table instance and set the response as the ItemsSource method of the list box that we have added in the UI. Here is the code for reference:

lstDetails.ItemsSource = await App.MobileService.GetTable<TodoItem>().ReadAsync(); 

Similarly, when you want to insert an item to the remote database table, you should call the InsertAsync method and pass the instance of the model, as follows:

await App.MobileService.GetTable<TodoItem>().InsertAsync(todoItem);

For delete operations, call the DeleteAsync method by passing the instance of the model. Here's how to call it:

await App.MobileService.GetTable<TodoItem>().DeleteAsync(item); 

Additionally, you may want to add validations while performing add or delete operations. When you compile and run the application, enter the task description and optionally select the Complete? checkbox before clicking on the Save button.

Once the save operation completes, or when you click on the Refresh button, the API call will retrieve the latest data available on the Azure database. If you want to delete a record, select the desired data in the list box and click on the Delete button:

Here is the complete code snippet of the code-behind file, for reference:

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
        InitializeComponent(); 
        OnRefreshButtonClicked(this, new RoutedEventArgs()); 
    } 
 
    private async void OnSaveButtonClicked(object sender, 
                                           RoutedEventArgs e) 
    { 
        var taskDescription = txbTaskDescription.Text; 
 
        if (!string.IsNullOrWhiteSpace(taskDescription)) 
        { 
            var isComplete = chkComplete.IsChecked == true; 
            var todoItem = new TodoItem { Text = taskDescription, 
                                          Complete = isComplete }; 
 
            txbTaskDescription.Text = string.Empty; 
            chkComplete.IsChecked = false; 
 
            await App.MobileService.GetTable<TodoItem>()
                      .InsertAsync(todoItem); 
            OnRefreshButtonClicked(sender, e); 
        } 
    } 
 
    private async void OnRefreshButtonClicked(object sender, 
                                              RoutedEventArgs e) 
    { 
        lstDetails.ItemsSource = await 
            App.MobileService.GetTable<TodoItem>().ReadAsync(); 
    } 
 
    private async void OnDeleteButtonClicked(object sender, 
                                             RoutedEventArgs e) 
    { 
        if(lstDetails.SelectedItem is TodoItem item) 
        { 
            await App.MobileService.GetTable<TodoItem>()
                      .DeleteAsync(item); 
            OnRefreshButtonClicked(sender, e); 
        } 
    } 
} 

You can now navigate to the Azure portal to view the data that's been entered in the table. Log in to the Azure dashboard, navigate to App Service, and select the mobile app service that you created.

Now, as shown in the following screenshot, scroll down the panel to find the Easy tables option. Click on the TodoItem table to examine the data that it contains. From this screen, you can also create a new table:

When you click on the table, it will open another screen, where you can see the records that the table has. On this screen, you can also change the permissions to access the table, edit the script, and manage the schema of the table:

In this section, we have learned how to integrate a mobile app service into a Windows application. If you want to integrate it into an ASP.NET or Universal Windows Platform (UWP) application, the procedure is almost the same.