Skip to content

Commit 1728665

Browse files
authored
Update how-to-1.md
1 parent e4f954b commit 1728665

File tree

1 file changed

+24
-24
lines changed
  • content/learning-paths/laptops-and-desktops/win_xamarin_forms

1 file changed

+24
-24
lines changed

content/learning-paths/laptops-and-desktops/win_xamarin_forms/how-to-1.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
2-
title: "Creating a project"
2+
title: "Create an application using Xamarin Forms"
33

44
weight: 2
55

66
layout: "learningpathall"
77
---
88

99
## Introduction
10-
Xamarin Forms is a cross-platform UI toolkit that allows developers to create native user interfaces for iOS, Android, and Windows apps using a single, shared codebase. Developed by Xamarin, a Microsoft-owned company, Xamarin Forms extends the .NET platform with tools and libraries specifically for building mobile apps. It enables developers to use C# for cross-platform development, sharing code, logic, and UI across platforms. This approach significantly reduces the time and resources required to develop and maintain apps for multiple platforms. Xamarin Forms also integrates with popular .NET features like LINQ and async/await, making it a powerful tool for modern mobile development. The toolkit includes a rich set of controls and an (Model-View-ViewModel) MVVM framework, making it easier to separate logic from the UI and make the code portable.
10+
Xamarin Forms is a cross-platform UI toolkit that allows developers to create native user interfaces for iOS, Android, and Windows apps using a single, shared codebase. Developed by Xamarin, a Microsoft-owned company, Xamarin Forms extends the .NET platform with tools and libraries specifically for building mobile apps. It enables developers to use C# for cross-platform development, sharing code, logic, and UI across platforms. Xamarin Forms also integrates with popular .NET features like LINQ and async/await, making it a powerful tool for modern mobile development. The toolkit includes a rich set of controls and an (Model-View-ViewModel) MVVM framework, making it easier to separate logic from the UI and make the code portable.
1111

12-
In this learning path, we will learn how to use Xamarin Forms to create a cross-platform application. Then, we will launch this application on Windows on Arm using x64 and Arm64 build configurations. By doing so, we will be able to see how Arm64 can accelerate Xamarin Forms applications. In practice, you can use this feature to further optimize your cross-platform applications running on Arm64 platform.
12+
In this learning path, you will learn how to use Xamarin Forms to create a cross-platform application. Then, you will launch this application on Windows on Arm using x64 and Arm64 build configurations and compare the performance. By doing so, we will be able to see how Arm64 can accelerate Xamarin Forms applications.
1313

14-
You can find the companion code [here](https://github.com/dawidborycki/Arm64.MobileApp.XamarinForms.git).
14+
You can find the complete project code used in this learning path [here](https://github.com/dawidborycki/Arm64.MobileApp.XamarinForms.git).
1515

1616
## Before you begin
17-
Before you begin the implementation, it is essential to install Visual Studio 2022 with the following workloads:
17+
Before you begin the implementation, install Visual Studio 2022 with the following workloads:
1818
1. .NET Multi-platform App UI development,
1919
2. Universal Windows Platform development.
2020

2121
## Create the project
22-
Start by creating the project. Open Visual Studio, and then click 'Create a new project'.
22+
Open Visual Studio, and then click 'Create a new project'.
2323

2424
![fig1](Figures/01.png)
2525

@@ -56,27 +56,27 @@ There are four projects:
5656
3. Arm64.MobileApp.XamarinForms.iOS - this is an iOS-specific project, which generates executables for iOS.
5757
4. Arm64.MobileApp.XamarinForms.UWP - this is an Universal Windows App (UWP) project, which generates executables for Windows.
5858

59-
Now that your project is set up, you're ready to begin development. All subsequent modifications will be implemented in the shared project, Arm64.MobileApp.XamarinForms. The application is designed to perform intense computational task. Here, we will re-use the square matrix multiplication, which we implemented in the [Windows Forms learning path](/learning-paths/laptops-and-desktops/win_forms). The time required for the computations will be displayed on a label. Additionally, it will be rendered in a chart for visual representation. To create a chart, we will use the Syncfusion.SfChart.WPF library, a popular tool for graphical data representation, which we will install as a NuGet package.
59+
Now that your project is set up, you are ready to begin development. All subsequent modifications will be implemented in the shared project, `Arm64.MobileApp.XamarinForms`. The application is designed to perform intense computational task. You will use the square matrix multiplication, implemented in the [Windows Forms learning path](/learning-paths/laptops-and-desktops/win_forms). The time required for the computations will be displayed on a label. Additionally, it will be rendered in a chart for visual representation. To create a chart, you will use the `Syncfusion.SfChart.WPF` library, a popular tool for graphical data representation, which you will install as a NuGet package.
6060

61-
We will adopt the Model-View-ViewModel (MVVM) design pattern, which separates the UI from the business logic, for implementing the application's logic.
61+
You will adopt the Model-View-ViewModel (MVVM) design pattern, which separates the UI from the business logic, for implementing the application's logic.
6262

63-
Finally, we will compile the application for UWP for both x64 and Arm64 platforms to compare performance across different hardware architectures.
63+
Finally, you will compile the application for UWP for both x64 and Arm64 platforms to compare performance across different hardware architectures.
6464

6565
## User Interface
66-
Before starting the UI design, we need to install the Syncfusion.SfChart.WPF NuGet package in Visual Studio 2022. Follow these steps to complete the installation:
66+
Before starting the UI design, install the `Syncfusion.SfChart.WPF` NuGet package in Visual Studio 2022. Follow these steps to complete the installation:
6767

6868
1. Open Visual Studio 2022 and access the Solution Explorer by navigating to View -> Solution Explorer.
6969
2. In Solution Explorer, right-click on 'Dependencies' under the Arm64.MobileApp.XamarinForms project. From the context menu, select 'Manage NuGet Packages...' to open the NuGet Package Manager.
7070
3. In the NuGet Package Manager, search for 'Sf chart.' Then select 'Syncfusion.SfChart.WPF' from the results and click the 'Install' button. Refer to the figure below for guidance:
7171

7272
![fig7](Figures/07.png)
7373

74-
4. A 'Preview Changes' window will appear. Click the 'Apply' button to confirm and proceed with the changes to the solution. The installation of the NuGet package will commence and complete shortly.
74+
4. A 'Preview Changes' window will appear. Click the 'Apply' button to confirm and proceed with the changes to the solution. The installation of the NuGet package will complete.
7575
5. Finally, in the 'License Acceptance' window that appears, click the 'I Accept' button to agree to the terms and complete the installation process.
7676

77-
After installing the NuGet package, we proceed to modify the application view. The views of the Xamarin Forms applications are designed with the help of the XAML declarative markup language. Still, you can create the UI by manually putting controls on the window in the design mode. However, the approach based on XAML significantly accelerates the UI design and is much more efficient in practice. So, we use this approach here and start by opening MainWindow.xaml (to do so double-click MainWindow.xaml under the Arm64.MobileApp.XamarinForms in the Solution Explorer).
77+
After installing the NuGet package, proceed to modify the application view. The views of the Xamarin Forms applications are designed with the help of the XAML declarative markup language. Still, you can create the UI by manually putting controls on the window in the design mode. However, the approach based on XAML significantly accelerates the UI design and is much more efficient in practice. So, you will use this approach here and start by opening `MainWindow.xaml` (to do so double-click MainWindow.xaml under the Arm64.MobileApp.XamarinForms in the Solution Explorer).
7878

79-
Next, modify MainWindow.xaml as follows:
79+
Next, modify `MainWindow.xaml` as follows:
8080

8181
```XML
8282
<?xml version="1.0" encoding="utf-8" ?>
@@ -156,21 +156,21 @@ Next, modify MainWindow.xaml as follows:
156156
</ContentPage>
157157
```
158158

159-
In the XAML declaration, we start by importing the XAML namespace for Syncfusion controls, as indicated in the last parameter of the ContentPage attribute. We then define three anonymous styles that will be implicitly applied to all buttons, labels, and Syncfusion Charts within the current window. These styles are utilized to configure margins and font attributes.
159+
In the XAML declaration, start by importing the XAML namespace for Syncfusion controls, as indicated in the last parameter of the ContentPage attribute. Then define three anonymous styles that will be implicitly applied to all buttons, labels, and Syncfusion Charts within the current window. These styles are utilized to configure margins and font attributes.
160160

161-
Following this, we set up a Grid layout with two rows and two columns. The first row is configured to automatically adjust its height to fit all the controls, while the second row expands to fill the remaining window space. Both columns are designed to have equal widths. This arrangement effectively creates a 2x2 resizable table layout.
161+
Following this, you set up a Grid layout with two rows and two columns. The first row is configured to automatically adjust its height to fit all the controls, while the second row expands to fill the remaining window space. Both columns are designed to have equal widths. This arrangement effectively creates a 2x2 resizable table layout.
162162

163-
Using this layout, we position two buttons in the left cell of the first row. The label is then placed in the right cell of the first row. Finally, the chart, spanning across both cells, is added to the second row.
163+
Using this layout, you have positioned two buttons in the left cell of the first row. The label is then placed in the right cell of the first row. Finally, the chart, spanning across both cells, is added to the second row.
164164

165165
The chart is configured with two numerical axes. The horizontal (primary) axis displays the trial number, and the vertical (secondary) axis shows the calculation time for each trial. This setup allows users to generate a graph representing the calculation time across successive trials by running the calculation multiple times.
166166

167167
The complete XAML declaration results in the following view
168168

169169
![fig8](Figures/08.png)
170170

171-
To use the chart control on UWP we also need to make one more modification:
172-
1. In Solution Explorer go to Arm64.MobileApp.XamarinForms.UWP project.
173-
2. Open App.xaml.cs, and modify the OnLaunched method as follows:
171+
To use the chart control on UWP you will also need to make one more modification:
172+
1. In Solution Explorer go to `Arm64.MobileApp.XamarinForms.UWP` project.
173+
2. Open `App.xaml.cs`, and modify the OnLaunched method as follows:
174174

175175
```CS
176176
protected override void OnLaunched(LaunchActivatedEventArgs e)
@@ -236,10 +236,10 @@ You will now supplement the shared project with two helper classes:
236236
To implement these classes, follow these steps:
237237

238238
1. Open the Solution Explorer in Visual Studio 2022 by clicking View > Solution Explorer.
239-
2. In the Solution Explorer window, right-click on the Arm64.MobileApp.XamarinForms project, and choose Add -> New Folder from the context menu.
239+
2. In the Solution Explorer window, right-click on the `Arm64.MobileApp.XamarinForms` project, and choose Add -> New Folder from the context menu.
240240
3. Name the new folder 'Helpers'.
241241
4. Right-click on the Helpers folder, select Add -> Class to open the 'Add New Item' window. Enter 'MatrixHelper.cs' in the Name field and click the Add button.
242-
5. Modify the newly added MatrixHelper.cs file as outlined below.
242+
5. Modify the newly added `MatrixHelper.cs` file as outlined below.
243243
```cs
244244
using System;
245245

@@ -309,7 +309,7 @@ namespace Arm64.MobileApp.XamarinForms.Helpers
309309
}
310310
```
311311

312-
6. Similarly, within the 'Helpers' folder, create another file named PerformanceHelper.cs. Modify the file using the following code:
312+
6. Similarly, within the 'Helpers' folder, create another file named `PerformanceHelper.cs`. Modify the file using the following code:
313313
```cs
314314
namespace Arm64.MobileApp.XamarinForms.Helpers
315315
{
@@ -336,6 +336,6 @@ namespace Arm64.MobileApp.XamarinForms.Helpers
336336

337337
The MatrixMultiplication method in the MatrixHelper class accepts two square matrices and calculates their product using three 'for' loops. The result is stored in the 'result' variable and returned. The GenerateRandomMatrix method creates a square matrix with pseudo-randomly generated elements using the Random.NextDouble method. The class also includes the SquareMatrixMultiplication method for generating and multiplying two matrices of a given size. Here, we fix the matrix size to 250.
338338

339-
The PerformanceHelper class contains a MeasurePerformance method. This method executes a function (passed as the first parameter via the Action delegate) multiple times (specified by the 'executionCount' parameter) and returns the execution time. Execution time is measured using the System.Diagnostics.Stopwatch class, which has methods Restart (to reset and start the stopwatch) and Stop (to halt the stopwatch and record the time elapsed).
339+
The PerformanceHelper class contains a MeasurePerformance method. This method executes a function (passed as the first parameter via the Action delegate) multiple times (specified by the 'executionCount' parameter) and returns the execution time. Execution time is measured using the `System.Diagnostics.Stopwatch` class, which has methods Restart (to reset and start the stopwatch) and Stop (to halt the stopwatch and record the time elapsed).
340340

341-
With the UI and helper classes set up, you are now ready to implement the application logic using the Model View ViewModel (MVVM) architectural pattern.
341+
With the UI and helper classes set up, you are now ready to implement the application logic using the Model View ViewModel (MVVM) architectural pattern.

0 commit comments

Comments
 (0)