Лабораторная работа №1

1. Visual Studio + Xamarin.Forms

Добавить в приложение страницу настроек Settings с помощью XAML файла. В

настройках необходимо сделать опцию выбора цвета фона для всех окон приложения.
Для этого на странице настроек добавляется кнопка с заголовком Set Background Color,
при нажатии на которую открывается окно выбора цвета.

1.1 Создать новое решение (solution) Xamarin.Forms

Файл -> Создать решение…

1.2 Добавление формы

Solution -> Common project -> Views  -> ПКМ -> Добавить -> Создать файл -> Forms -> 
Forms Content Page XAML

Название создаваемого объекта - SettingsPage

Содержимое файла SettingsPage.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=”<class name>” xmlns:vm="clr-namespace:<namespace>"       
    Title="{Binding Title}">
    <ContentPage.BindingContext>
        <vm:SettingsViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <Button
            Margin="30,40,30,40"
                VerticalOptions = "StartAndExpand"
            Text="Set Background Color"
            Clicked="OpenColorPick"
                BackgroundColor="{StaticResource Primary}"
            TextColor="White" 
/>
    </ContentPage.Content>
</ContentPage>

В строке 

    x:Class=”<class name>” xmlns:vm="clr-namespace:<namespace>"       

необходимо указать правильные значения для <class name> и <namespace>

** имя класса необходимо указывать с пространством имен!

В связанном файле скрипта SettingsPage.xaml.cs необходимо добавить обработчик

события нажатия для кнопки выбора цвета:

        async void OpenColorPick(object sender, EventArgs e)

        {
                var modalPage = new ColorPicker ();
            await Navigation.PushAsync(modalPage);
        }

1.3 Добавление модели

Solution -> <Common project> -> ViewModels  -> ПКМ -> Добавить -> Создать файл
->General -> Пустой класс

Название создаваемого объекта - SettingsViewModel

После создания объекта необходимо добавить к объявлению класса наследование

от базовой модели:

public class SettingsViewModel : BaseViewModel

1.4 Добавление формы выбора цвета

Solution -> Common project -> Views  -> ПКМ -> Добавить -> Создать файл -> Forms -> 
Forms Content Page XAML

Название создаваемого объекта - ColorPicker

Заменить содержимое файла ColorPicker.xaml.cs на следующий текст:

using System;
using System.Collections.Generic;

using Xamarin.Forms;
namespace <namespace>
{
    public partial class ColorPicker : ContentPage
    {
        // Dictionary to get Color from color name.
        Dictionary<string, Color> nameToColor = new Dictionary<string, Color>
        {
            { "Aqua", Color.Aqua }, { "Black", Color.Black },
            { "Blue", Color.Blue },
            { "Gray", Color.Gray }, { "Green", Color.Green },
            { "Lime", Color.Lime }, { "Maroon", Color.Maroon },
            { "Navy", Color.Navy }, { "Olive", Color.Olive },
            { "Purple", Color.Purple }, { "Red", Color.Red },
            { "Silver", Color.Silver }, { "Teal", Color.Teal },
            { "White", Color.White }, { "Yellow", Color.Yellow }
        };

        public ColorPicker()

        {
            Label header = new Label
            {
                Text = "Select background color",
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center
            };

            Picker picker = new Picker

            {
                Title = "Color",
                VerticalOptions = LayoutOptions.Center
            };

            foreach (string colorName in nameToColor.Keys)

            {
                picker.Items.Add(colorName);
            }

            // Create BoxView for displaying picked Color

            BoxView boxView = new BoxView
            {
                WidthRequest = 200,
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

            picker.SelectedIndexChanged += (sender, args) =>

            {
                if (picker.SelectedIndex == -1)
                {
                    boxView.Color = Color.Default;
                }
                else
                {
                    string colorName = picker.Items[picker.SelectedIndex];
                    boxView.Color = nameToColor[colorName];
                    App.BackColor = nameToColor[colorName]; // all magic is here
                }
            };

            // Accomodate iPhone status bar.

            this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

            // Build the page.

            this.Content = new StackLayout
            {
                Children =
                {
                    header,
                    picker,
                    boxView
                }
            };

        }
    }
}

** Замените  <namespace> на соответствующее вашему проекту пространство имен!

1.5 Отображение страницы настроек в приложении

Для этого необходимо соответствующим образом модифицировать файл

Solution -> Common project -> Views  -> MainPage.cs

по образу и подобию добавления страниц Browse и About.

1.6 Управление цветом фона

Для хранения значения цвета фона в главном классе приложения App добавим
соответствующее свойство:

public static Color BackColor = Color.White;

Соберите приложение и запустите его. Данный этап позволит выявить

ошибки редактирования.

Использовать это свойство можно, например, при активации окна. Для этого надо
добавить в перегруженный метод OnAppearing строку

BackgroundColor = App.BackColor;

Если метод не перегружен, его необходимо перегрузить, добавив в класс окна

(SettingsPage.xaml.cs):
 
        protected override void OnAppearing()
        {
           base.OnAppearing();
            BackgroundColor = App.BackColor;
        }

Классы всех окон (страниц) приложения находятся в Solution -> Common project ->
Views.

** для ItemsPage.xaml.cs необходимо в конструктор добавить строку

           ItemsListView.BackgroundColor = Color.Transparent;

public ItemsPage()
        {
            InitializeComponent();
            BindingContext = viewModel = new ItemsViewModel();
            ItemsListView.BackgroundColor = Color.Transparent;
        }
 1.7 Запуск приложения

Для сборки и запуска приложения на симуляторе платформы iOS или Android

необходимо cделать активным проект <имя решения>.iOS или <имя решения>.Droid
соответственно.
Отладку рекомендуется делать на симуляторе iPhone 7, т.к. он быстрее работает. 
Для запуска на Android рекомендуется использовать симулятор Android_ARMv7a