Часть 1. Быстрый старт на Xamarin.Forms

👁 92 просмотров

Первая часть будет демонстрировать, как создать приложение, которое будет преобразовать буквенно-цифровой номер, введенный пользователем в числовой номер телефона и затем вызывать этот номер.

Пример итогового приложения
Пример итогового приложения

 

И так, условимся, что мы начинаем новый проект в  Visual Studio с Xamarin.Forms под названием Phoneword:

1). Сначала запускаем Visual Studio. На картинке начальное окно программы:

Начальное окно программы Visual Studio
Начальное окно программы Visual Studio

 

2). В Visual Studio нажимаем на кнопку Create new project… :

Нажимаем на кнопку создания нового проекта
Нажимаем на кнопку создания нового проекта

 

3). В диалоге New Project, жмем Cross-Platform, выбираем шаблон Mobile App (Xamarin.Forms), задаем имя Phoneword, выбираем расположение проекта и жмем кнопку OK:

Диалог создания проекта
Диалог создания проекта

 

4). В диалоге New Cross Platform App, нажимаем Blank App, выбираем .NET Standard как Code Sharing Strategy, и жмем кнопку OK:

Диалог выбора платформ и стратегии развития проекта
Диалог выбора платформ и стратегии развития проекта

 

5). В разделе Solution Explorer, проекта Phoneword, делаем двойной щелчок на MainPage.xaml для открытия этого файла в редакторе:

Открытый файл MainPage.xaml в редакторе
Открытый файл MainPage.xaml в редакторе

 

6). В MainPage.xaml, удаляем весь код шаблона и заменяем кодом, который ниже. Этот код декларативно определяет интерфейс пользователя для страницы:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="Phoneword.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="20, 40, 20, 20" />
            <On Platform="Android, UWP" Value="20" />
        </OnPlatform>
    </ContentPage.Padding>
    <StackLayout>
      <Label Text="Enter a Phoneword:" />
      <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" />
      <Button Text="Translate" Clicked="OnTranslate" />
      <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
    </StackLayout>
</ContentPage>

Сохраняем изменения в MainPage.xaml , нажав комбинацию CTRL+S, и закрываем файл.

7). В разделе Solution Explorer, распускаем MainPage.xaml и двойным щелчком открываем файл кода страницы MainPage.xaml.cs:

Файл кода страницы MainPage.xaml.cs
Файл кода страницы MainPage.xaml.cs

 

8). В коде MainPage.xaml.cs, удаляем весь код шаблона и заменяем его на следующий код. Методы OnTranslate и OnCall должны быть выполнены в ответ на нажатие кнопок Translate и Call со стороны пользовательского интерфейса соответственно:

using System;
using Xamarin.Forms;

namespace Phoneword
{
    public partial class MainPage : ContentPage
    {
        string translatedNumber;

        public MainPage ()
        {
            InitializeComponent ();
        }

        void OnTranslate (object sender, EventArgs e)
        {
            translatedNumber = PhonewordTranslator.ToNumber (phoneNumberText.Text);
            if (!string.IsNullOrWhiteSpace (translatedNumber)) {
                callButton.IsEnabled = true;
                callButton.Text = "Call " + translatedNumber;
            } else {
                callButton.IsEnabled = false;
                callButton.Text = "Call";
            }
        }

        async void OnCall (object sender, EventArgs e)
        {
            if (await this.DisplayAlert (
                    "Dial a Number",
                    "Would you like to call " + translatedNumber + "?",
                    "Yes",
                    "No")) {
                var dialer = DependencyService.Get<IDialer> ();
                if (dialer != null)
                    dialer.Dial (translatedNumber);
            }
        }
    }
}

 

Замечание. Теперь можно попробовать построить приложение и мы увидим сообщения об ошибках, которые мы исправим далее.

Сохраняем изменения в файле MainPage.xaml.cs нажатием комбинации CTRL+S, закрываем файл.

9). В Solution Explorer, кликаем правую кнопку мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект
Добавляем новый элемент в проект

10). В диалоге Add New Item выбираем Visual C# > Code > Class, вводим название PhoneTranslator, и жмем кнопку Add:

Диалог добавления нового класса
Диалог добавления нового класса

 

11). В файле PhoneTranslator.cs, удаляем весь шаблон кода и заменяем на ниже указанный. Этот код транслирует буквы в телефонный номер:

using System.Text;

namespace Phoneword
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return null;

            raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                    newNumber.Append(c);
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                    // Bad character?
                    else
                        return null;
                }
            }
            return newNumber.ToString();
        }

        static bool Contains(this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static readonly string[] digits = {
            "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
        };

        static int? TranslateToNumber(char c)
        {
            for (int i = 0; i < digits.Length; i++)
            {
                if (digits[i].Contains(c))
                    return 2 + i;
            }
            return null;
        }
    }
}

Сохраняем файл PhoneTranslator.cs , нажатием CTRL+S, и закрываем файл.

12). В Solution Explorer, жмем правой кнопкой мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект
Добавляем новый элемент в проект

 

13). В меню Add New Item открываем диалог добавления, выбираем Visual C# > Code > Interface, вводим имя интерфейса IDialer, жмем кнопку Add:

Добавление нового интерфейса
Добавление нового интерфейса

 

14). В файле IDialer.cs, удаляем шаблон кода по умолчанию и заменяем его кодом, указанным ниже. В этом коде определен метод Dial , который должен быть реализована каждой платформе для набора переведенного номера телефона:

namespace Phoneword
{
    public interface IDialer
    {
        bool Dial(string number);
    }
}

Сохраняем изменения IDialer.cs нажатием CTRL+S, закрываем файл.

Замечание. Общий код для приложения сейчас закончен. На уровне определенной платформы код набора номера теперь будет реализован как DependencyService.

15). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.iOS и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.iOS
Добавляем элемент к проекту Phoneword.iOS

16). В разделе диалога Add New Item, выбираемApple > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту iOS
Добавляем новый класс к проекту iOS

 

17). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой iOS для набора транслированного телефонного номера:

using Foundation;
using Phoneword.iOS;
using UIKit;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.iOS
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            return UIApplication.SharedApplication.OpenUrl (
                new NSUrl ("tel:" + number));
        }
    }
}

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

18). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.Android и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.Android
Добавляем элемент к проекту Phoneword.Android

19). В разделе диалога Add New Item, выбираем Android > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту Android
Добавляем новый класс к проекту Android

 

20). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Android для набора транслированного телефонного номера:

using Android.Content;
using Android.Telephony;
using Phoneword.Droid;
using System.Linq;
using Xamarin.Forms;
using Uri = Android.Net.Uri;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.Droid
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            var context = MainActivity.Instance;
            if (context == null)
                return false;

            var intent = new Intent (Intent.ActionDial);
            intent.SetData (Uri.Parse ("tel:" + number));

            if (IsIntentAvailable (context, intent)) {
                context.StartActivity (intent);
                return true;
            }

            return false;
        }

        public static bool IsIntentAvailable(Context context, Intent intent)
        {
            var packageManager = context.PackageManager;

            var list = packageManager.QueryIntentServices (intent, 0)
                .Union (packageManager.QueryIntentActivities (intent, 0));

            if (list.Any ())
                return true;

            var manager = TelephonyManager.FromContext (context);
            return manager.PhoneType != PhoneType.None;
        }
    }
}

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

Замечание. Обратите внимание, что этот код предполагает, что вы используете новейший Android API.

21). Во вкладке Solution Explorer, в проекте Phoneword.Android, двумя щелчками открываем файл MainActivity.cs , удаляем весь шаблон кода и заменяем на следующий код:

using Android.App;
using Android.Content.PM;
using Android.OS;

namespace Phoneword.Droid
{
    [Activity(Label = "Phoneword", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true,
              ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        internal static MainActivity Instance { get; private set; }

        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);
            Instance = this;
            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

Сохраняем файл MainActivity.cs , нажатием CTRL+S, и закрываем файл.

23). В секции Required permissions , разрешаем телефону выполнять звонок CALL_PHONE:

Разрешаем телефону звонить
Разрешаем телефону звонить

Сохраняем файл манифеста, нажатием CTRL+S, и закрываем файл.

24). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.UWP и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.UWP
Добавляем элемент к проекту Phoneword.UWP

25). В разделе диалога Add New Item, выбираем Visual C# > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту UWP
Добавляем новый класс к проекту UWP

 

26). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Universal Windows Platform для набора транслированного телефонного номера:

using Phoneword.UWP;
using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Calls;
using Windows.UI.Popups;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.UWP
{
    public class PhoneDialer : IDialer
    {
        bool dialled = false;

        public bool Dial(string number)
        {
            DialNumber(number);
            return dialled;
        }

        async Task DialNumber(string number)
        {
            var phoneLine = await GetDefaultPhoneLineAsync();
            if (phoneLine != null)
            {
                phoneLine.Dial(number, number);
                dialled = true;
            }
            else
            {
                var dialog = new MessageDialog("No line found to place the call");
                await dialog.ShowAsync();
                dialled = false;
            }
        }

        async Task<PhoneLine> GetDefaultPhoneLineAsync()
        {
            var phoneCallStore = await PhoneCallManager.RequestStoreAsync();
            var lineId = await phoneCallStore.GetDefaultLineAsync();
            return await PhoneLine.FromIdAsync(lineId);
        }
    }
}

Сохраняем файл PphoneDialer.cs , нажатием CTRL+S, и закрываем файл.

27). На вкладке Solution Explorer, на проекте Phoneword.UWP , жмем правую кнопку на References, aи выбираем Add Reference…:

Добавляем новую ссылку к проекту UWP
Добавляем новую ссылку к проекту UWP

28). В диалоге Reference Manager , выбираем Universal Windows > Extensions > Windows Mobile Extensions for UWP, и жмем на кнопку OK:

Диалог менеджера ссылок
Диалог менеджера ссылок

Замечание. В v10.0.16299.0 Windows Mobile Extensions для UWP должен быть выбран класс PhoneLine .

29). Во вкладке Solution Explorer, в проекте Phoneword.UWP, делаем двойной щелчок и открываем файл Package.appxmanifest:

Настройка файла Package.appxmanifest
Настройка файла Package.appxmanifest

30). На странице Capabilities , разрешаем возможность звонить Phone Call:

Страница разрешений для UWP
Страница разрешений для UWP

Сохраняем изменения в файле нажатием CTRL+S, и закрываем файл.

31. В Visual Studio, выбираем пункт в меню Build > Build Solution (или нажимаем CTRL+SHIFT+B). Приложение будет построено и во вкладке статус бара Visual Studio должно появиться сообщение об удачном построении:

Сообщение об удачном построении
Сообщение об удачном построении

 

Если имеются сообщения об ошибках, то нужно повторить начальные шаги и исправить ошибки до тех пор, пока не будет удачное построение.

32). Во вкладке  Solution Explorer, кликаем правую кнопку на проекте Phoneword.UWP и выбираем Set as StartUp Project:

Устанавливаем проект по умолчанию
Устанавливаем проект по умолчанию

33). В панели инструментов Visual Studio, жмем кнопку Start (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения:

Запущенное приложение UWP
Запущенное приложение UWP

 

34). Во вкладке Solution Explorer, жмем правой кнопкой на проект Phoneword.Android выбираем пункт Set as StartUp Project.

35). На панели инструментов Visual Studio, жмем на кнопку Start  (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения Android в эмуляторе:

36). Если у вас есть устройство iOS и соответствуют требованиям Mac для разработки Xamarin.Forms, используйте аналогичный метод для развертывания приложения на устройстве iOS. Кроме того, развертываем приложение для удаленного симулятора iOS.

Привет, Xamarin.Forms

👁 82 просмотров

Данное подруководство предоставляет введение в разработку приложений на Xamarin.Forms, используя Visual Studio и описывает фундаментальную постройку приложения на Xamarin.Forms. Данный топик будет охватывать такие элементы разработки, как инструменты, концепцию и шаги, которые потребуются для построения и развертывания вашего первого приложения на Xamarin.Forms.

Часть 1. Быстрый старт на Xamarin.Forms

Первая часть будет демонстрировать, как создать приложение, которое будет преобразовать буквенно-цифровой номер, введенный пользователем в числовой номер телефона и затем вызывать этот номер.

Часть 2. Глубокое погружение в Xamarin.Forms

Вторая часть будет рассказывать про развитие построенного приложения в первой части и будет описывать фундаментальную основу работы Xamarin.Forms.

Требования для работы с Xamarin.Forms

👁 84 просмотров

Платформа и система разработки, требуемая для Xamarin.Forms.

Ссылка для установки необходимых инструментов разработки кроссплатформенных приложений.

Целевые платформы

Xamarin.Forms приложения могут быть написаны для следующих операционных систем:

Предполагается, что разработчики знакомы с .NET Standard и Shared Projects.

Поддержка дополнительных платформ

Текущие статусы положения развития возможности разработки ниже представленных платформ находятся на странице Xamarin.Forms GitHub:

  • Samsung Tizen
  • macOS
  • GTK#
  • WPF

Платформы ранних версий

Данные платформы не поддерживаются, если вы решили разработать приложение на Xamarin.Forms 3.0:

  • Windows 8.1 / Windows Phone 8.1 WinRT
  • Windows Phone 8 Silverlight

Android

У вас должны быть установлены последний инструментарий Android SDK и платформа Android API. Вы можете обновить их до последней актуальной версии, используя Android SDK Manager.

Дополнительно, целевая/компилируемая версия для Android проектов должны быть установлены на использование последней установленной платформы. Однако, минимальная версия должна быть установлена на API 15, за счет чего вы сможете продолжить поддержку устройств на Android 4.0.3 и новее. Данные параметры должны быть установлены в Project Options > Application > Application Properties:

Установки для разработки под Android
Установки для разработки под Android

Требование к системе разработки

Приложения Xamarin.Forms можно спроектировать на macOS и Windows. Однако, Windows и Visual Studio должны построить Windows версию приложения.

Требования к системе Mac

Вы должны использовать Visual Studio для Mac для разработки приложений на Xamarin.Forms на версии OS X El Capitan (10.11) или новее. Для построения приложений iOS рекомендуется иметь  iOS 10 SDK и установленный Xcode 8 или выше.

Замечение. Приложения для Windows нельзя построить на MacOS.

Требования к системе Windows

Приложения Xamarin.Forms для iOS и Android можно построить на любом Windows, который поддерживает разработку на Xamarin. Эти требования заключаются в том, чтобы можно было запускать Visual Studio 2017 на версии Windows 7 или новее. Для построения из Windows приложений для iOS необходимо сетевое интегрирование с Mac.

Universal Windows Platform (UWP)

Построение приложений Xamarin.Forms для UWP требует:

  • Windows 10 (Рекомендуется обновить до Fall Creators)
  • Visual Studio 2017
  • Windows 10 SDK

Проекты UWP имеют включеные в Xamarin.Forms решения, созданные в Visual Studio 2017, но нет решений, созданные в Visual Studio for Mac. Вы можете добавить UWP к существующему решению Xamarin.Forms в любое время.

Xamarin.Forms шаг за шагом

👁 56 просмотров

Xamarin.Forms

Xamarin.Forms — это полноценный кроссплатформенный инструмент с UI для разрабочиков на .NET, который позволяет построить нативные приложения для Android, iOS и UWP(Universal Windows Platform), используя популярный язык C# в среде Visual Studio.

Начальный старт

Данный пункт руководства позволит стартовать изучение Xamarin.Forms. На данном этапе необходимо убедиться, что все нужные для работы инструменты корректно установлены и будет построено первое приложение на Xamarin.Forms.

  1. Требования для работы с Xamarin.Forms
  2. Привет, Xamarin.Forms
  3. Привет, Xamarin.Forms Multiscreen
  4. Введение в Xamarin.Forms
  5. Начинаем с Xamarin University
  6. Связанные ссылки

XAML

Build user interfaces declaratively and share across mobile and desktop platforms.

  1. XAML Basics
  2. XAML Compilation
  3. XAML Previewer
  4. XAML Namespaces
  5. XAML Markup Extensions
  6. Field Modifiers
  7. Passing Arguments
  8. Bindable Properties
  9. Attached Properties
  10. Resource Dictionaries

Application Fundamentals

Everything you need to know to build Xamarin.Forms apps, such as working with files, images, databases, and more.

  1. Accessibility
  2. App Class
  3. App Lifecycle
  4. Behaviors
  5. Custom Renderers
  6. Data Binding
  7. Dependency Service
  8. Effects
  9. Files
  10. Gestures
  11. Localization
  12. Local Databases
  13. Messaging Center
  14. Navigation
  15. Templates
  16. Triggers
  17. Related Links

User Interface

Learn about the complete set of user interface controls available in Xamarin.Forms XAML.

  1. Animation
  2. BoxView
  3. Button
  4. Colors
  5. Controls Reference
  6. DataPages
  7. DatePicker
  8. Graphics
  9. Images
  10. Layouts
  11. ListView
  12. Maps
  13. Picker
  14. Slider
  15. Styles
  16. TableView
  17. Text
  18. Themes
  19. Visual State Manager
  20. WebView
  21. Related Links

Platform Features

Working with Xamarin.Forms platform features, such as Custom Renderers, and other important features of each release.

  1. Android
  2. Application Indexing and Deep Linking
  3. Device Class
  4. iOS
  5. GTK
  6. Mac
  7. Native Forms
  8. Native Views
  9. Platform-Specifics
  10. Plugins
  11. Tizen
  12. Windows
  13. WPF

Xamarin.Essentials

Cross-platform APIs for common tasks like file access, device info, hardware features, and more.

  1. Get Started with Xamarin.Essentials
  2. Feature Guides
  3. Troubleshooting
  4. API Documentation

Data & Cloud Services

Local and remote data storage and retrieval, and other cloud-based services.

  1. Understanding the Sample
  2. Consuming Web Services
  3. Authenticating Access to Web Services
  4. Synchronizing Data with Web Services
  5. Sending Push Notifications
  6. Storing Files in the Cloud
  7. Searching Data in the Cloud
  8. Storing Data in a Document Database
  9. Adding Intelligence with Cognitive Services

Deployment and Testing

Instructions for building and deploying your apps, and tips for testing them beforehand!

  1. Performance
  2. Automated Testing with Xamarin.UITest and App Center

Advanced Concepts & Internals

Additional information about Xamarin.Forms internals and assistance with features like localization and accessibility.

  1. Fast Renderers
  2. .NET Standard
  3. Dependency Resolution