-->![Xamarin mac and windows app download Xamarin mac and windows app download](/uploads/1/3/4/2/134245961/177894372.jpg)
- Xamarin Mac And Windows App Download
- Xamarin Mac Textshouldendediting
- Xamarin For Windows 10
- Xamarin Mac And Windows App Installer
- Xamarin Mac And Windows App Download
![Xamarin mac and windows app download Xamarin mac and windows app download](/uploads/1/3/4/2/134245961/177894372.jpg)
This article covers working with windows and panels in a Xamarin.Mac application. It describes creating windows and panels in Xcode and Interface Builder, loading them from storyboards and .xib files, and working with them programmatically.
.NET is a big ecosystem. As you cannot develop all kinds of.NET projects using Visual Studio on Windows (Xamarin.Mac for example), you cannot do the same using Visual Studio for Mac (like you found, WinForms/WPF/UWP and so on). Such limitation comes from vendor SDK availability or other underlying systems. Sharing code between iOS and Mac and Windows is just a matter of splitting your code up into a shareable backend (mode) and a platform-specific frontend (UI). Xamarin.Forms allows more code to be reused in the UI layer between iOS and Android and Windows Phone, but it is not intended right now to allow you to share UI code on any platform. .NET is a big ecosystem. As you cannot develop all kinds of.NET projects using Visual Studio on Windows (Xamarin.Mac for example), you cannot do the same using Visual Studio for Mac (like you found, WinForms/WPF/UWP and so on). Such limitation comes from vendor SDK availability or other underlying systems.
When working with C# and .NET in a Xamarin.Mac application, you have access to the same Windows and Panels that a developer working in Objective-C and Xcode does. Because Xamarin.Mac integrates directly with Xcode, you can use Xcode's Interface Builder to create and maintain your Windows and Panels (or optionally create them directly in C# code).
Based on its purpose, a Xamarin.Mac application can present one or more Windows on screen to manage and coordinate the information it displays and works with. The principal functions of a window are:
- To provide an area in which Views and Controls can be placed and managed.
- To accept and respond to events in response to user interaction with both the keyboard and mouse.
Windows can be used in a Modeless state (such as a text editor that can have multiple documents open at once) or Modal (such as an Export dialog that must be dismissed before the application can continue).
Panels are a special kind of Window (a subclass of the base
NSWindow
class), that typically serve an auxiliary function in an application, such as utility windows like Text format inspectors and system Color Picker.In this article, we'll cover the basics of working with Windows and Panels in a Xamarin.Mac application. Dmg dudley media group. It is highly suggested that you work through the Hello, Mac article first, specifically the Introduction to Xcode and Interface Builder and Outlets and Actions sections, as it covers key concepts and techniques that we'll be using in this article.
You may want to take a look at the Exposing C# classes / methods to Objective-C section of the Xamarin.Mac Internals document as well, it explains the
Register
and Export
commands used to wire-up your C# classes to Objective-C objects and UI Elements.Introduction to windows
As stated above, a Window provides an area in which Views and Controls can be placed and managed and responds to events based on user interaction (either via keyboard or mouse).
According to Apple, there are five main types of Windows in a macOS App:
- Document Window - A document window contains file-based user data such as a spreadsheet or a text document.
- App Window - An app window is the main window of an application that is not document-based (like the Calendar app on a Mac).
- Panel - A panel floats above other windows and provides tools or controls that users can work with while documents are open. In some cases, a panel can be translucent (such as when working with large graphics).
- Dialog - A dialog appears in response to a user action and typically provides ways users can complete the action. A dialog requires a response from the user before it can be closed. (See Working with Dialogs)
- Alerts - An alert is a special type of dialog that appears when a serious problem occurs (such as an error) or as a warning (such as preparing to delete a file). Because an alert is a dialog, it also requires a user response before it can be closed. (See Working with Alerts)
For more information, see the About Windows section of Apple's macOS design themes.
Main, key, and inactive windows
Windows in a Xamarin.Mac application can look and behave differently based on how the user is currently interacting with them. The foremost Document or App Window that is currently focus of the user’s attention is called the Main Window. In most instances this Window will also be the Key Window (the window that is currently accepting user input). But this isn't always the case, for example, a Color Picker could be open and be the Key window that the user is interacting with to change the state of an item in the Document Window (which would still be the Main Window).
The Main and Key Windows (if they are separate) are always active, Inactive Windows are open windows that are not in the foreground. For example, a text editor application could have more than one document open at a time, only the Main Window would be active, all others would be inactive.
For more information, see the About Windows section of Apple's macOS design themes.
Naming windows
A Window can display a Title Bar and when the Title is displayed, it's usually the name of the application, the name of the document being worked on or the function of the window (such as Inspector). Some applications don't display a Title Bar because they are recognizable by sight and don't work with documents.
Apple suggest the following guidelines:
- Use your application name for the title of a main, non-document window.
- Name a new document window
untitled
. For the first new document, don't append a number to the Title (such asuntitled 1
). If the user creates another new document before saving and titling the first, call that windowuntitled 2
,untitled 3
, etc.
For more information, see the Naming Windows section of Apple's macOS design themes.
Full-screen windows
In macOS, an application's window can go full screen hiding everything including the Application Menu Bar (which can be revealed by moving the cursor to the top of the screen) to provide distraction free interaction with it's content.
Hide unhide app mac 10. Apple suggests the following guidelines:
- Determine whether it makes sense for a window to go full screen. Applications that provide brief interactions (such as a Calculator) shouldn't provide a full screen mode.
- Show the toolbar if the full-screen task requires it. Typically the toolbar is hidden while in full screen mode.
- The full-screen window should have all the features users need to complete the task.
- If possible, avoid Finder interaction while the user is in a full-screen window.
- Take advantage of the increased screen space without shifting the focus away from the main task.
For more information, see the Full-Screen Windows section of Apple's macOS design themes.
Panels
A Panel is an auxiliary window that contains controls and options that affect the active document or selection (such as the system Color Picker):
Panels can be either App-Specific or Systemwide. App-Specific Panels float over the top of the application's document windows and disappear when the application is in the background. Systemwide Panels (such as the Fonts panel), float on top of all open windows no matter the application.
Apple suggests the following guidelines:
- In general, use a standard panel, transparent panels should only be used sparingly and for graphically intensive tasks.
- Consider using a panel to give users easy access to important controls or information that directly affects their task.
- Hide and show panels as required.
- Panels should always include title bar.
- Panels should not include an active minimize button.
Inspectors
Most modern macOS applications present auxiliary controls and options that affect the active document or selection as Inspectors that are part of the Main Window (like the Pages app shown below), instead of using Panel Windows:
Microsoft silverlight for android phone free download. For more information, see the Panels section of Apple's macOS design themes and our MacInspector sample app for a full implementation of an Inspector Interface in a Xamarin.Mac app.
Creating and maintaining windows in Xcode
https://omlrcjq.weebly.com/blog/allow-apps-downloaded-from-anywhere-mac-os-x-sierra. When you create a new Xamarin.Mac Cocoa application, you get a standard blank, window by default. This windows is defined in a
.storyboard
file automatically included in the project. To edit your windows design, in the Solution Explorer, double click the Main.storyboard
file:This will open the window design in Xcode's Interface Builder:
In the Attribute Inspector, there are several properties that you can use to define and control your window:
- Title - This is the text that will be displayed in the window's titlebar.
- Autosave - This is the key that will be used to ID the window when it's position and settings are automatically saved.
- Title Bar - Does the window display a title bar.
- Unified Title and Toolbar - If the window includes a Toolbar, should it be part of the title bar.
- Full Sized Content View - Allows the content area of the window to be under the Title bar.
- Shadow - Does the window have a shadow.
- Textured - Textured windows can use effects (like vibrancy) and can be moved around by dragging anywhere on their body.
- Close - Does the window have a close button.
- Minimize - Does the window have a minimize button.
- Resize - Does the window have a resize control.
- Toolbar Button - Does the window have a hide/show toolbar button.
- Restorable - Is the window's position and settings automatically saved and restored.
- Visible At Launch - Is the window automatically shown when the
.xib
file is loaded. - Hide On Deactivate - Is the window hidden when the application enters the background.
- Release When Closed - Is the window purged from memory when it is closed.
- Always Display Tooltips - Are the tooltips constantly displayed.
- Recalculates View Loop - Is the view order recalculated before the window is drawn.
- Spaces, Exposé and Cycling - All define how the window behaves in those macOS environments.
- Full Screen - Determines if this window can enter the full screen mode.
- Animation - Controls the type of animation available for the window.
- Appearance - Controls the appearance of the window. For now there is only one appearance, Aqua.
See Apple's Introduction to Windows and NSWindow documentation for more details.
Setting the default size and location
To set the initial position of your window and to control it's size, switch to the Size Inspector:
From here you can set the initial size of the window, give it a minimum and maximum size, set the initial location on the screen and control the borders around the window.
Setting a custom main window controller
To be able to create Outlets and Actions to expose UI elements to C# code, the Xamarin.Mac app will need to be using a Custom Window Controller.
Do the following:
- Open the app's Storyboard in Xcode's Interface Builder.
- Select the
NSWindowController
https://omlrcjq.weebly.com/blog/mac-best-app-disk. in the Design Surface. - Switch to the Identity Inspector view and enter
WindowController
as the Class Name: - Save your changes and return to Visual Studio for Mac to sync.
- A
WindowController.cs
file will be added to your Project in the Solution Explorer in Visual Studio for Mac: - Reopen the Storyboard in Xcode's Interface Builder.
- The
WindowController.h
file will be available for use:
Adding UI elements
To define the content of a window, drag controls from the Library Inspector onto the Interface Editor. Please see our Introduction to Xcode and Interface Builder documentation for more information about using Interface Builder to create and enable controls.
As an example, let's drag a Toolbar from the Library Inspector onto the window in the Interface Editor:
Next, drag in a Text View and size it to fill the area under the toolbar:
Since we want the Text View to shrink and grow as the window's size changes, let's switch to the Constraint Editor and add the following constraints:
By clicking the four Red I-Beams at the top of the editor and clicking Add 4 Constraints, we are telling the text view to stick to the given X,Y coordinates and grow or shrink horizontally and vertically as the window is resized.
Finally, expose the Text View to code using an Outlet (making sure to select the
ViewController.h
file):Save your changes and switch back to Visual Studio for Mac to sync with Xcode.
For more information about working with Outlets and Actions, please see our Outlet and Action documentation.
Standard window workflow
For any window that you create and work with in your Xamarin.Mac application, the process is basically the same as what we have just done above:
- For new windows that are not the default added automatically to your project, add a new window definition to the project. This will be discussed in detail below.
- Double-click the
Main.storyboard
file to open the window design for editing in Xcode's Interface Builder. - Drag a new Window into the User Interface's design and hook the window into Main Window using Segues (for more information see the Segues section of our Working with Storyboards documentation).
- Set any required window properties in the Attribute Inspector and the Size Inspector.
- Drag in the controls required to build your interface and configure them in the Attribute Inspector.
- Use the Size Inspector to handle the resizing for your UI Elements.
- Expose the window's UI elements to C# code via Outlets and Actions.
- Save your changes and switch back to Visual Studio for Mac to sync with Xcode.
Now that we have a basic window created, we'll look at the typical processes a Xamarin.Mac application does when working with windows.
Displaying the default window
By default, a new Xamarin.Mac application will automatically display the window defined in the
MainWindow.xib
file when it is started:Since we modified the design of that window above, it now includes a default Toolbar and Text View control. The following section in the
Info.plist
file is responsible for displaying this window:The Main Interface dropdown is used to select the Storyboard that will be used as the main app UI (in this case
Main.storyboard
).A View Controller is automatically added to the project to control that Main Windows that is displayed (along with its primary View). It is defined in the
ViewController.cs
file and attached to the File's Owner in Interface Builder under the Identity Inspector:For our window, we'd like it to have a title of
untitled
when it first opens so let's override the ViewWillAppear
method in the ViewController.cs
to look like the following:Note
The window's
Title
property is set in the ViewWillAppear
method instead of the ViewDidLoad
method because, while the view might be loaded into memory, it is not yet fully instantiated. Accessing the Title
property in the ViewDidLoad
method we will get a null
exception since the window hasn't been constructed and wired-up to the property yet.Programmatically closing a window
There might be times that you wish to programmatically close a window in a Xamarin.Mac application, other than having the user click the window's Close button or using a menu item. macOS provides two different ways to close an
NSWindow
programmatically: PerformClose
and Close
.PerformClose
Calling the
PerformClose
method of an NSWindow
simulates the user clicking the window's Close button by momentarily highlighting the button and then closing the window.If the application implements the
NSWindow
's WillClose
event, it will be raised before the window is closed. If the event returns false
, then the window will not be closed. If the window does not have a Close button or cannot be closed for any reason, the OS will emit the alert sound.For example:
Would attempt to close the
MyWindow
NSWindow
instance. If it was successful, the window will be closed, else the alert sound will be emitted and the will stay open.Close
Calling the
Close
method of an NSWindow
does not simulates the user clicking the window's Close button by momentarily highlighting the button, it simply closes the window.A window does not have to be visible to be closed and an
NSWindowWillCloseNotification
notification will be posted to the default Notification Center for the window being closed.The
Close
method differs in two important ways from the PerformClose
method:- It does not attempt to raise the
WillClose
event. - It does not simulate the user clicking the Close button by momentarily highlighting the button.
For example:
Would to close the
MyWindow
NSWindow
instance.Modified windows content
In macOS, Apple has provided a way to inform the user that the contents of a Window (
NSWindow
) has been modified by the user and needs to be saved. If the Window contains modified content, a small black dot will be displayed in it's Close widget:If the user attempts to close the Window or quit the Mac App while there are unsaved changes to the Window's content, you should present a Dialog Box or Modal Sheet and allow the user to save their changes first:
Marking a window as modified
To mark a Window as having modified content, use the following code:
And once the change has been saved, clear the modified flag using:
Saving changes before closing a window
To watch for the user closing a Window and allowing them to save modified content beforehand, you will need to create a subclass of
NSWindowDelegate
and override its WindowShouldClose
method. For example:Use the following code to attach an instance of this delegate to the window:
Saving changes before closing the app
Finally, your Xamarin.Mac App should check to see if any of its Windows contain modified content and allow the user to save the changes before quitting. To do this, edit your
AppDelegate.cs
file, override the ApplicationShouldTerminate
method and make it look like the following:Working with multiple windows
Most document based Mac applications can edit multiple documents at the same time. For example, a text editor can have multiple text files open for edit at the same time. By default, a new Xamarin.Mac application has a File menu with a New item automatically wired-up to the
newDocument:
Action.The code below will activate this new item and allow the user to open multiple copies of the Main Window to edit multiple documents at once.
Edit the
AppDelegate.cs
file and add the following computed property: https://high-powerpurple.weebly.com/windows-7-serial-key-virtal-box.html.Use this to track the number of unsaved files so we can give feedback to the user (per Apple's guidelines as discussed above).
Next, add the following method:
This code creates a new version of our Window Controller, loads the new Window, makes it the Main and Key Window, and sets it title. Now if we run our application, and select New from the File menu a new editor window will be opened and displayed:
If we open the Windows menu, you can see the application is automatically tracking and handling our open windows:
For more information on working with Menus in a Xamarin.Mac application, please see our Working with Menus documentation.
Getting the currently active window
In a Xamarin.Mac application that can open multiple windows (documents), there are times when you will need to get the current, topmost window (the key window). The following code will return the key window:
It can be called in any class or method that needs to access the current, key window. If no window is currently open, it will return
null
.Accessing all app windows
There might be times where you need to access all of the windows that your Xamarin.Mac app currently has open. For example, to see if a file that the user wants to open is already open in an exiting window.
The
NSApplication.SharedApplication
maintains a Windows
property that contains an array of all open windows in your app. You can iterate over this array to access all of the app's current windows. For example:In the example code we are casting each returned window to the custom
ViewController
class in our app and the testing the value of a custom Path
property against the path of a file the user wants to open. If the file is already open, we are bringing that window to the front.Adjusting the window size in code
There are times when the application needs to resize a window in code. To resize and reposition a window, you adjust it's
Frame
property. When adjusting a window's size, you usually need to also adjust it's origin, to keep the window in the same location because of macOS's coordinate system.Unlike iOS where the upper left hand corner represents (0,0), macOS uses a mathematic coordinate system where the lower left hand corner of the screen represents (0,0). In iOS the coordinates increase as you move downward towards the right. In macOS, the coordinates increase in value upwards to the right.
The following example code resizes a window:
Important
When you adjust a windows size and location in code, you need to make sure you respect the minimum and maximum sizes that you have set in Interface Builder. This will not be automatically honored and you will be able to make the window bigger or smaller than these limits.
Monitoring window size changes
There might be times where you need to monitor changes in a Window's size inside of your Xamarin.Mac app. For example, to redraw content to fit the new size.
To monitor size changes, first ensure that you have assigned a custom class for the Window Controller in Xcode's Interface Builder. For example,
MasterWindowController
in the following:Next, edit the custom Window Controller class and monitor the
DidResize
event on the Controller's Window to be notified of live size changes. For example:Optionally, you can use the
DidEndLiveResize
event to only be notified after the user has finished changing the Window's size. For Example:Setting a window’s title and represented file
When working with windows that represent documents,
NSWindow
has a DocumentEdited
property that if set to true
displays a small dot in the Close Button to give the user an indication that the file has been modified and should be saved before closing.Let's edit our
ViewController.cs
file and make the following changes:We are also monitoring the
WillClose
event on the window and checking the state of the DocumentEdited
property. If it is true
we need to give the user the ability to save the changes to the file. If we run our app and enter some text, the dot will be displayed:If you try to close the window, you get an alert:
If you are loading a document from a file, set the title of the window to the file's name using the
window.SetTitleWithRepresentedFilename (Path.GetFileName(path));
method (given that path
is a string representing the file being opened). Additionally, you can set the URL of the file using the window.RepresentedUrl = url;
method.If the URL is pointing to a file type known by the OS, its icon will be displayed in the title bar. If the user right clicks on the icon, the path to the file will be shown.
Edit the
AppDelegate.cs
file and add the following method:Now if we run our app, select Open. from the File menu, select a text file from the Open Dialog box and open it:
The file will be displayed and the title will be set with the icon of the file:
Adding a new window to a project
Aside from the main document window, a Xamarin.Mac application might need to display other types of windows to the user, such as Preferences or Inspector Panels.
To add a new window, do the following:
- In the Solution Explorer, double-click the
Main.storyboard
file to open it for editing in Xcode's Interface Builder. - Drag a new Window Controller from the Library and drop it on the Design Surface:
- In the Identity Inspector, enter
PreferencesWindow
for the Storyboard ID: - Design your interface:
- Open the App Menu (
MacWindows
), select Preferences., Control-Click and drag to the new window: - Select Show from the popup menu.
- Save your changes and return to Visual Studio for Mac to sync with Xcode.
If we run the code and select the Preferences. from the Application Menu, the window will be displayed:
Working with panels
As stated at the start of this article, a panel floats above other windows and provides tools or controls that users can work with while documents are open.
Just like any other type of window that you create and work with in your Xamarin.Mac application, the process is basically the same:
- Add a new window definition to the project.
- Double-click the
.xib
file to open the window design for editing in Xcode's Interface Builder. - Set any required window properties in the Attribute Inspector and the Size Inspector.
- Drag in the controls required to build your interface and configure them in the Attribute Inspector.
- Use the Size Inspector to handle the resizing for your UI Elements.
- Expose the window's UI elements to C# code via Outlets and Actions.
- Save your changes and switch back to Visual Studio for Mac to sync with Xcode.
In the Attribute Inspector, you have the following options specific to Panels:
- Style - Allow you to adjust the style of the panel from: Regular Panel (looks like a standard window), Utility Panel (has a smaller Title bar), HUD Panel (is translucent and the title bar is part of the background).
- Non Activating - Determines in the panel becomes the key window.
- Document Modal - If Document Modal, the panel will only float above the application's windows, else it floats above all.
To add a new Panel, do the following:
- In the Solution Explorer, right-click on the Project and select Add > New File..
- In the New File dialog box, select Xamarin.Mac > Cocoa Window with Controller:
- Enter
DocumentPanel
for the Name and click the New button. - Double-click the
DocumentPanel.xib
file to open it for editing in Interface Builder: - Delete the existing Window and drag a Panel from the Library Inspector in the Interface Editor:
- Hook the panel up to the File's Owner - window - Outlet:
- Switch to the Identity Inspector and set the Panel's class to
DocumentPanel
: - Save your changes and return to Visual Studio for Mac to sync with Xcode.
- Edit the
DocumentPanel.cs
file and change the class definition to the following:public partial class DocumentPanel : NSPanel
- Save the changes to the file.
Edit the
AppDelegate.cs
file and make the DidFinishLaunching
method look like the following:If we run our application, the panel will be displayed:
Important
Panel Windows have been deprecated by Apple and should be replaced with Inspector Interfaces. For a full example of creating an Inspector in a Xamarin.Mac app, please see our MacInspector sample app.
Summary
This article has taken a detailed look at working with Windows and Panels in a Xamarin.Mac application. We saw the different types and uses of Windows and Panels, how to create and maintain Windows and Panels in Xcode's Interface Builder and how to work with Windows and Panels in C# code.
Related links
Nearly everyone these days has a mobile phone, and most of these are smartphones. Everyone downloads apps, from social media to games to fitness.
As developers, a lot of you probably think about making an app for your phones. Whether it's just for a laugh, or to solve an actual problem, our curious minds get us thinking.
In this post you will get an introduction to how you can create mobile apps using C# and Visual Studio, taking advantage of the awesome Xamarin mobile tooling built into Visual Studio.
Today you will cover the following set of topics:
- What is Xamarin?
- What tools will I need?
- Getting started with the Visual Studio tools for Xamarin
- Creating a simple counter app
- Learning more
If you would like to see a full integration of Twilio APIs in a .NET Core application then checkout this free 5-part video series. It's separate from this blog post tutorial but will give you a full run down of many APIs at once.
What is Xamarin?
Xamarin is a cross-platform mobile development framework that now ships with Visual Studio 2019 for Windows and Visual Studio for Mac.
It is a thin wrapper around the native APIs and tooling, so anything you can do in Java/Kotlin for Android, or Objective-C/Swift for iOS, you can do in Xamarin using the C# goodness we know and love.
In fact, it is not just C# that can be used to write Xamarin; F# can be used too! F#, as you may well know, is the functional .NET programming language. Both use the same native Android/iOS code underneath for the components, building the application, and running it. So once you deploy it there is no way to tell how the app was made—or in what language!
There is even day 1 support so, as a new OS release or feature comes out, Xamarin will have a release available to support it. That is a huge advantage over other HTML-based mobile technologies as they often require time for someone to develop the component that compiles to the native equivalent.
Xamarin Native vs Xamarin.Forms
As you will see in the image above, there are two types of Xamarin project you can create: Xamarin Native, the traditional Xamarin approach as it is sometimes called, or Xamarin.Forms.
Both share a common code base, either in C# or F#, which means business logic can be shared across platforms. https://omlrcjq.weebly.com/blog/how-large-is-chome-app-mac. So code for things like accessing databases, talking to cloud services like Azure etc, can be written once and used regardless of whether the code is being deployed to Android, iOS, UWP, or any other platform supported by Xamarin.
Where the two types of project differ is in the UI and how it is created. Either option still compiles down into the native components, but how you write it is different.
With the Xamarin Native approach, each platform’s UI is written separately. So iOS still uses Storyboards, Android uses AXML, and UWP uses XAML. The downside to this approach is that you need to be able to develop those UI’s individually; that requires not only expertise in each of those, but also time. If you are trying to prototype a cross-platform app on a low budget quickly, this can add overhead. However, because Xamarin.Native is just a thin wrapper around the native APIs, anything you can do in the native environment you can do with the Native approach. This makes it a powerful and completely viable alternative to native development, with the benefit of shared code and using the same .NET languages you love.
With Xamarin.Forms you have the option of writing your UI declaratively in code or using XAML.
The great thing with Xamarin.Forms is that you write the UI once and it is compiled to the native language for whatever platform you are deploying to, just like Xamarin.Native. As mentioned previously, it will look identical to the non-Xamarin native apps, so you will not know how it was made, and will have the time-saving benefits of a cross-platform UI.
The main difference is that Xamarin.Forms is both shared UI and shared business logic, so not everything you can do natively is possible here—or it requires more work. The individual platforms will implement some features differently, such as taking pictures and checking for cellular connectivity. This is where plugins or libraries come in. These nifty little gems (often NuGet packages) are the result of someone kind and smart deciding to take away the hard work of implementing it for each platform. So you add the library to your project and start using it to do whatever it is you are trying to achieve by calling the library code from your project code.
A few years ago the recommendation from Xamarin, at the time an independent company, was that if you wanted to do something graphics-intensive, for example, you were better off going with Xamarin.Native. However, with the evolution of products such as SkiaSharp, these limitations are shrinking every year—maybe even every month—and Xamarin.Forms becomes a viable option for more and more project ideas.
What tools will I need?
When it comes to developing Xamarin, you have 3 main IDE choices. Visual Studio 2019, Visual Studio for Mac, or Rider.
All three come with support for Xamarin out of the box. The download and installation instructions for each can be found below:
Visual Studio for both Windows and macOS supports Xamarin for free; you only require the Community edition.
Rider will require either a subscription to the whole toolbox, if you use other JetBrains products such as intelliJ, or just a subscription to the one product.
Getting started
The following steps will walk you through creating your first blank Xamarin.Forms project on both Windows and Mac and building your first Xamarin app!
These steps assume you have followed the relevant installation guide above and have all the tools required to get started.
Visual Studio 2019 for Windows
You can begin a new project by clicking Create a new project from the Welcome Window, shown below, or by selecting File > New > Project… from the menu bar.
In the Create a new project window, select Mobile from the Project Type list, Then select Mobile App (Xamarin.Forms) from the Filtering by: Mobile list and click Next.
In the Configure your new project window, enter 'Counter' in the Project name box, select a directory in which to save the project in the Location box, and accept the proposed value in the Solution box. Leave Place solution and project in the same directory unchecked. Click Create.
The New Cross Platform App window should open.
In the Select a template list, select Blank. Under Platform select Android and iOS. Click OK.
Visual Studio for Mac
You can begin a new project by clicking New on the right-hand side of the Welcome Window, shown below, or by selecting File > New Solution… from the menu bar.
On the left-hand side of the New Project window, under the Multiplatform category, click App, select Blank Forms App, ensuring that the drop-down box next to it is set to C#. Click Next.
Xamarin Mac And Windows App Download
In the App Name box, enter “Counter”. Organization Identifier is used as an identifier in your app if published to the app store, so in this case you can leave this value as the default if you wish. Click Next.
Select a Location to store the project on your hard drive. Ensure that the platforms you want to target are selected and Shared Code is set to “Use .NET Standard” then click Next. Best embroidery digitizing software for mac.
Understanding the new solution
So the solution has loaded and your blank Xamarin.Forms project has been created, but what are all these projects you see?
Shared project
Depending on the platforms you are targeting, you will have up to 4 projects in your solution. The first is your shared project. This is where all your UI and shared code lives. You will learn more about the important files in that folder when you start writing code later in this tutorial.
Platform-specific projects
One of the projects in your solution will be called <ProjectName>.Android. As you can imagine, this is the Android project.
If you ever have written any native Android code in Kotlin or Java, this project will look very familiar. It has the Resources folder, which contains the drawable folders for images at different resolutions, layouts, and the MainActivity.cs file, in this case with a .cs extension for C#, a Properties folder containing your AppManifest file, which adds information about the application, and many other items.
Unlike in a Xamarin.Native project, the layout folder doesn’t contain your UI and all your MainActivity.cs class (configured for you) does is call into the shared code App.xaml.cs class to find what code to execute when the application loads.
If you selected iOS as a target operating system, you will also have a <ProjectName>.iOS project in your solution. It follows the same structure as a native iOS project written in Objective-C or Swift.
The AppDelegate.cs file initializes the Xamarin.Forms library and calls into the Counter shared project to find the application to run, including the UI.
There is also the Info.plist file, which acts as the application information file, and Entitlements.plist, which identifies the device features to which the application needs access, such as HealthKit, Apple Pay, Siri, and many others.
The UWP Project will also look as expected from native development, this post will only focus on Android and iOS.
Coding the Counter app
It is that time.first app time! Now you have your new project created and you understand the solution structure better, it is time to actually write some code!
Xamarin Mac Textshouldendediting
This is a nice and simple app that is ideal to use to get started.
Begin with the user interface. You will want a way of displaying the current count and a button that makes the count increase.
Open the Main.XAML file in the Counter project folder. This is the default UI file the Visual Studio tooling creates from the New Project template. The file is templated with a stack layout containing a label centered vertically and horizontally saying “Welcome to Xamarin.Forms!” As you may guess from the name, a stack layout arranges UI components vertically. To learn more about different layout types in Xamarin.Forms, visit Layouts in Xamarin.Forms on docs.microsoft.com.
Delete the
StackLayout
element from the Main.XAML file and replace it with the following markup:The two main things here to take note of are the
x:Name
attribute on the Label
element and the Clicked
attribute on the Button
element. The x:Name
attribute is there so you can refer to the component in code. You do this so you can update the value as the button is clicked.As you can guess, the
Clicked
attribute on the button determines which method is called in code when the button is clicked. In this case it will be a method called IncrementCounterClicked
. The method doesn’t exist yet, so don’t worry about warnings from your IDE; you'll create the code for the method next.All Xamarin.Forms XAML files have an associated .cs partial class or “code behind” file which can be accessed by expanding the arrow next to the XAML file name in the Solution Explorer. Visual Studio and the Xamarin middleware use the file name, namespace, and class inheritance to automatically link any components referred to in the .xaml.cs code-behind file to the associated UI elements defined in the .xaml layout file for any pair of layout and code-behind files in the same namespace.
The Main.xaml.cs class is where you will code your app, including the method called from
Clicked
attribute on the Button
element in the layout.Replace the
MainPage
class in the MainPage.xaml.cs file with the following C# code:This is a very short and simple class, but it teaches you how to interact with your UI.
InitializeComponent()
is already written for you and is a Xamarin.Forms method for initializing all UI components for the associated XAML file.The
IncrementCounterClicked
method is fairly straightforward. The sender
parameter is the object that called the method, allowing it to be reused by multiple components. In this case it is only called from a Button
element so the sender will be Button
. EventArgs
allow you to pass data to the method; in this case you don’t require any, so this parameter can be ignored.As you can see, you reference your label using the
x:Name
you gave it earlier and set its text property to the string value of your current count. Boom!Customizing the appearance of your app
You will have noticed in the code you entered earlier that you make some changes to the font and color using attributes available on the components. This is the most common and “original” way of changing the appearance of your app. However, Xamarin.Forms also supports using CSS to style your app.
In this section you will learn what the same code would look like if you used CSS instead of in-line properties on the tags themselves.
This can be achieved by placing the CSS code at the top of the XAML file but this can be messy and confusing, so this it looks like the CSS is in a separate file:
Not much has changed in the above markup, but a
ContentPage.Resources
tag has been added before the StackLayout
element, which contains a Stylesheet
tag with the Source
attribute set to a styles.css file in the root of the shared project. The attributes on the components, which customize the appearance such as text color and font size, have also been removed.Xamarin For Windows 10
The CSS file itself looks like any other CSS file, but refers to the components themselves rather than id or class selectors:
It is important to note, however, that not everything that can be done regarding appearance using XAML tag properties can be done using CSS. To learn more about the different ways to use CSS and what can be customized, visit the docs.microsoft.com page on Styling Xamarin.Forms apps using CSS.
Learning more
Like many developers, now that you have experienced Xamarin you'll want to play more and do more things! You’ll probably want to run the app you just built, so look for the next post in this series: it will show you how to run your app using device emulators and actual smartphones.
Future posts in this series will cover data binding and the Model-View-ViewModel (MVVM) design pattern.
Summary
In this post, you have learned:
- What Xamarin is
- How you can use both C# and F#
- How to create your first app
- An understanding of the solution
- How to customize the appearance of a Xamarin app with CSS
Additional Resources
The code from this blog post can be found ion a companion repository on Github, with branches for the different steps. The Master branch is the most basic, then there are additional branches to allow you to see how the app architecture evolved.
No blog post is complete without useful links where you can continue learning, so below is a list of links that are very useful to new and experienced Xamarin devs alike:
Xamarin Documentation on Microsoft Docs
Xamarin.Essentials on Microsoft Docs – Essentials is an amazing library containing abstractions for common features that would be implemented differently on each platform, saving you from having to code it yourself. Examples include Accelerometer, Connectivity to a network, Geolocation and dozens more!
Cognitive Services – Cognitive Services is Microsoft’s super easy to use, super powerful AI/ML technology that allows you to bring in the magic of AI without having to train loads of models for common tasks from speech-to-text, facial recognition and language translation, to beyond.
App Center – App Center is a powerful end-to-end service intended for mobile applications. It allows you to build, test, distribute, analyse and diagnose your applications with a small amount of configuration. Perfect for anyone who likes CI/CD and/or metrics!
Xamarin Mac And Windows App Installer
Xamarin.Forms Solutions – A fantastic book giving you great samples for solving common tasks in Xamarin.Forms.
Xamarin in Action – This book is about native development in Xamarin rather than Xamarin.Forms, but for those who want to write apps using the native approach instead this is a must-have book to get you started creating your first app.
Xamarin Mac And Windows App Download
Luce Carter is a Software Developer at dunnhumby by day, Microsoft MVP and Twilio Champion by night. She is also the face behind the scenes, editing content for @JamesMontemagno, ensuring editorial quality in his blogs and episode descriptions on his podcast network, @soundbitefm. She can be found at @LuceCarter1 on Twitter, LuceCarter on Github and blogs on her own website. She writes C# in her dayjob, working mainly on an ASP.Net backend but Xamarin is her passion. When not writing apps for fun she can be found speaking around the UK or Europe on her two favourite Microsoft technologies, Xamarin and Cognitive Services.