Цель работы: освоить методики работы с элементами управления
В стандартной поставке среды разработки для Windows Phone имеется набор элементов управления. Просмотреть доступные элементы можно, открыв Панель элементов нажатием на её ярлык, расположенный в левой части экрана. При необходимости Панель элементов можно закрепить в видимом состоянии, для её закрепления или переключения в режим автоматического скрытия служит значок с изображением канцелярской кнопки в заголовке её окна.
Состав Панели элементов можно расширить, для этого нужно щёлкнуть по ней правой кнопкой мыши и выбрать в появившемся контекстном меню пункт Выбрать элементы. На рис. 11.1. показано окно Visual Studio с открытым окном Выбор элементов панели элементов. Если вы полагаете, что какого-то стандартного элемента управления "нет на месте", вероятнее всего, его отображение просто отключено. С помощью данного окна можно включить отображение нужного элемента. Панель элементов можно вернуть к виду по умолчанию, для этого служит команда её контекстного меню Сброс панели элементов. Здесь мы рассматриваем работу с элементами управления на примере проекта P2_1, который можно найти в составе дополнительных материалов к курсу. Приложение создано с использованием шаблона Приложение Windows Phone, в качестве целевой платформы выбрана Windows Phone 8.0.
(рис 11.1) Настройка состава Панели элементов
Ниже, когда мы будем говорить о дополнительных элементах управления, мы вернемся к этому окну.
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
к виду:
<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />
Добавим на страницу элемент управления Button (Кнопка), рис. 11.2.
(рис 11.2) На страницу добавлен новый элемент управления
Обратите внимание на то, что сейчас у кнопки нет имени, его можно назначить либо в окне Свойства, указав поле Имя, либо – отредактировав XAML-код, соответствующий данному элементу управления. И тот и другой подходы вполне допустимы. Правка XAML-кода потенциально способна привести к ошибкам (хотя при правке и действует система подсказок), однако, если вы хорошо знакомы с каким-то элементом управления, если у вас, например, есть элемент управления, настроенный так, как вам нужно, и вы хотите перенести его в другой проект, пожалуй, самый универсальный метод заключается в непосредственной работе с XAML-кодом.
Желательно давать элементам управления понятные имена, иначе, при росте размеров проекта с элементами управления будет не очень удобно работать. Для того, чтобы понять, например, какова роль той или иной кнопки, при использовании её имени в программном коде, придётся постоянно сверяться с XAML-кодом.
Дадим кнопке имя cmdMain. В данном случае используется префикс имени "cmd", что означает "command button", это играет роль исключительно для удобства разработки – для того, чтобы сразу было видно, например – в именах обработчиков событий, с каким именно элементом мы имеем дело. Именам кнопок, кроме того, нередко дают префикс "btn" В свойство Content, определяющее то, что выводится на кнопке, введем текст "Нажми меня".
Если сейчас запустить приложение в эмуляторе или на устройстве, нажатие на кнопку будет анимироваться, однако никаких полезных действий она выполнять не будет. Для того, чтобы наша кнопка заработала, нам понадобится обработчик соответствующего события кнопки. Если переключить панель свойств, при выделенной кнопке, в режим просмотра событий, что можно сделать, нажав на кнопку Обработчики событий для выделенного элемента, откроется большой список событий, на которые может реагировать кнопка. Как правило, кнопки используются для вызова события Click, именно обработчик этого события создаётся в качестве обработчика по умолчанию при выполнении двойного щелчка по элементу управления Button в окне конструктора. При необходимости, конечно, можно назначить кнопке (или другому элементу) и другие обработчики событий. Для того, чтобы это сделать, достаточно выполнить двойной щелчок по соответствующему полю в панели свойств при просмотре событий элемента управления. То же самое достижимо и при ручной правке XAML-кода. После добавления обработчика события Click, имя которому назначена автоматически, XAML-код кнопки выглядит так:
<Button x:Name="cmdMain" Content="Нажми меня" HorizontalAlignment="Left" Margin="12,37,0,0" Grid.Row="1" VerticalAlignment="Top" Height="88" Width="196" Click="cmdMain_Click"/<
Код обработчика выглядит так:
private void cmdMain_Click(object sender, RoutedEventArgs e)
{
}
Благодаря понятному имени элемента управления, который мы дали ему ранее, имя обработчика события элемента так же получилось понятным.
Добавим в обработчик события код, который будет менять надпись на кнопке на "Click me", если надпись на ней содержит текст "Нажми меня" и наоборот. Для этого мы можем обратиться к элементу управления по имени, записав через точку его нужное свойство:
private void cmdMain_Click(object sender, RoutedEventArgs e)
{
if (cmdMain.Content.ToString() == "Нажми меня")
{
cmdMain.Content = "Click me";
}
else
{
cmdMain.Content = "Нажми меня";
}
}
Хотя мы можем присвоить свойству Content строку и на кнопке отобразится нужный текст, свойство кнопки Content – это не простая строка, а объект типа Object. Для того, чтобы исследовать внутреннее устройство элемента управления Button, сначала нужно уточнить, с помощью окна Выбор элементов панели элементов, подробности о данном элементе управления. В частности, имя сборки и версию. В нашем случае это сборка System.Windows (в частности, элементы управления описаны в пространстве имен System.Windows.Controls), версия 2.0.6.0, рис. 11.3.
(рис 11.3) Сведения о кнопке, полученные из окна Выбор элементов панели элементов
Теперь можно перейти в папку References нашего проекта и сделать двойной щелчок по ссылке Windows Phone. Будет открыт Обозреватель объектов, там мы найдём сборку System.Windows [2.0.6.0], в сборке – пространство имен System.Windows.Controls, в этом пространстве имен найдём класс Button. Здесь мы можем видеть иерархию наследования элемента с описаниями свойств, методов, событий, здесь можно понять, как устроена кнопка, посмотреть сведения о её свойстве Content, к которому мы обращались выше (рис. 11.4).
(рис 11.4) Элемент System.Windows.Control.Button, открытый в Обозревателе объектов
Зная полное имя элемента (System.Windows.Control.Button) мы можем обратиться к документации, доступной на сайте на http://msdn.microsoft.com. Здесь можно, сразу после перехода на сайт ввести в поле поиска такой запрос: "System.Windows.Controls.Button phone 8.0". В нашем случае, поиск по полному имени элемента дал, в частности, ссылку на страницу http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.controls.button%28v=vs.105%29.aspx. В разделе страницы Version Information (Информация о версиях) указано, что данные сведения справедливы для Windows Phone OS, в частности, среди версий операционной системы указана версия 8.0. То есть, нам нужна именно эта страница, рис. 11.5.
(рис 11.5) Справочные сведения на сайте MSDN
Здесь, помимо описания устройства кнопки, приводятся примеры кода, в результатах поиска по MSDN, через которые мы вышли на данную страницу, имеются и ссылки на другие страницы – там могут быть дополнительные примеры, ветки обсуждения на форумах и иные полезные материалы.
В нашем случае речь идёт о достаточно простом и понятном элементе управления – о кнопке, "справиться" с ним можно даже на чисто интуитивном уровне. Не все элементы управления столь просты, для эффективного использования большинства из них недостаточно той неявной справочной информации, которую несет в себе, например, панель свойств элемента. Поэтому Однако, нужно учитывать и то, что нельзя, до практических испытаний, быть окончательно уверенным в том, будет ли работать в каждом конкретном случае тот или иной подход, описанный в документации, найденный среди других материалов. Не стоит забывать и об исследовании используемых элементов управления (и других механизмов) с помощью отладочных сообщений и точек останова.
Полезный материал о стандартных элементах управления для Windows Phone можно найти здесь: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402561%28v=vs.105%29.aspx.
В распоряжении разработчика достаточно много стандартных элементов управления. Но не всегда их достаточно для реализации того или иного приложения. Сторонние разработчики создают пакеты элементов управления для платформы Windows Phone, этими элементами управления вполне можно пользоваться в собственных проектах.
В частности, пакеты элементов управления (и других библиотек, элементы управления – лишь один из примеров) можно найти, воспользовавшись сервисом NuGet.
Предположим нам в приложении нужен элемент управления, который позволяет пользователю выбирать цвет. Например, речь идёт о приложении для рисования и у пользователя должна быть возможность настраивать цвет кисти. Подобного элемента управления нет среди стандартных, но несколько его вариантов существует в пакете Coding4Fun (http://coding4fun.codeplex.com/, рис. 11.6).
(рис 11.6) Копии экранов приложений, использующих набор элементов управления Coding4Fun
Сервис NuGet, поддержка которого интегрирована в Visual Studio 2012, упрощает задачи по поиску пакетов, он берет на себя их загрузку, обновление, добавляет в проект необходимые ссылки.
Выполним в Visual Studio команду Сервис > Диспетчер пакетов библиотек > Управление пакетами NuGet для решения… В этом же меню есть и команда Консоль диспетчера пакетов – она позволяет, используя интерфейс командной строки, представленный в этой консоли, работать с пакетами. Мы воспользуемся графическим средством, окно которого открывается при выполнении вышеупомянутой команды.
Так как нас интересует пакет элементов управления Coding4Fun, мы можем ввести "Coding4Fun" в поле поиска, которое расположено в правой верхней части окна. В результате поиска окно приобретет следующий вид (рис. 11.7.).
(рис 11.7) Поиска пакета с использованием сервиса NuGet
При выделении пакета в списке результатов поиска можно видеть описание пакета в правой части окна. Нужный нам пакет называется Coding4Fun Toolkit – Controls. При выделении строки, соответствующей пакету, появляется кнопка Установить. Нажмём её. Нам будет предложено выбрать проекты для установки, так как в данном случае решение содержит лишь один проект, в этом окне можно ничего не менять и сразу же нажать ОК. После этого пакет будет загружен и установлен, в папке References в Обозревателе решений появится ссылка на Coding4Fun.Toolkit.Controls (при двойном щелчке по этой ссылке открывается уже знакомый вам Обозреватель объектов). При этом файлы пакета, который содержит не только элементы управления для Windows Phone, будут размещены в папке нашего проекта, в частности, в нашем случае, по следующему адресу (в вашем случае это будет адрес, соответствующий расположению пакета на вашем компьютере):
C:\Users\Alexander\Documents\Visual Studio 2012\Projects\P2_1\packages\Coding4Fun.Toolkit.Controls.2.0.5\lib\windowsphone8
Здесь находится файл Coding4Fun.Toolkit.Controls.dll, который и содержит нужные нам элементы управления. Удобнее всего работать с ними, предварительно добавив нужные элементы управления в Панель элементов. В этом нам поможет знание места расположения библиотеки элементов для Windows Phone 8. Вызовем из контекстного меню Панели элементов окно Выбор элементов панели элементов, нажмём на кнопку Обзор, которая находится в её нижней части и перейдём в вышеупомянутую папку с библиотекой Coding4Fun.Toolkit.Controls.dll. Выбрав этот файл, нажмём кнопку Открыть.
В окно выбора элементов будут добавлены все элементы из библиотеки, они будут выделены, напротив каждого будет установлен флаг, который говорит о том, что при нажатии на кнопку ОК выделенные элементы окажутся в Панели элементов. Нажмём ОК. В Панели элементов появится большой список новых элементов управления. Среди них есть несколько элементов, которые позволяют организовать выбор пользователем некоторого цвета. Например, это ColorHexagonPicker, ColorPicker, ColorSlider. Эти элементы управления добавляются на страницы точно так же, как обычные. Например, добавим на нашу страницу элемент управления ColorPicker.
На рис. 11.8. показано состояние окна Visual Studio после добавления этого элемента управления.
(рис 11.8) Новый элемент управления
Этот элемент управления, так же как и стандартные, поддерживает настройку с помощью окна Свойства. Нужно отметить, что при добавлении его на страницу, в её XAML-коде автоматически появляется не только его описание, но и ссылка на соответствующее пространство имён XAML.
То есть, в заголовочной части файла появилась следующая ссылка:
xmlns:Controls="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"
А в области описания содержимого страницы, в сетке для содержимого, созданной по умолчанию, размещается следующее:
<Controls:ColorPicker HorizontalAlignment="Left" Margin="25,162,0,0" Grid.Row="1" VerticalAlignment="Top" Height="353" Width="423"/>
Если сейчас запустить наше приложение, можно заметить, что элемент управления работает, реагируя на щелчки мыши (в эмуляторе) или на касания (на устройстве), однако, полезных функций он пока не выполняет, мы ничего не делаем с тем цветом, который выбираем с его помощью.
Добавим на нашу страницу элемент управления Rectangle, дадим ему имя recColor, дадим элементу управления выбора цвета имя cpMain и создадим обработчик события ColorChanged для элемента управления cpMain. Мы хотим организовать с помощью этого обработчика события изменение цвета прямоугольника recColor.
У элемента управления есть свойство Fill, которое определяет фоновый цвет фигуры. В обработчике события изменения цвета элемента cpMain нам доступен параметр color типа System.Windows.Media.Color. Для того, чтобы поменять цвет свойства прямоугольника Fill, нам нужен объект типа System.Windows.Media.Brush (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.brush%28v=vs.105%29.aspx) (рис. 11.9).
(рис 11.9) Создание обработчика события для изменения цвета прямоугольника
Класс System.Windows.Media.Brush – это абстрактный класс, он служит основой для нескольких классов кистей, которые можно использовать в случаях, подобных нашему. В частности, для того, чтобы закрасить прямоугольник некоторым цветом, нам подойдёт кисть System.Windows.Media.SolidColorBrush (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.solidcolorbrush%28v=vs.105%29.aspx). Один из вариантов конструктора этого объекта принимает объект типа System.Windows.Media.Color, который у нас уже есть.
В итоге, код обработчика события выглядит так:
private void cpMain_ColorChanged(object sender, System.Windows.Media.Color color)
{
recColor.Fill = new System.Windows.Media.SolidColorBrush(color);
}
Запуск приложения в эмуляторе даёт нам возможность убедиться в работоспособности этого механизма, рис. 11.10.
(рис 11.10) Экран программы при испытаниях в эмуляторе
Мы использовали в приложении библиотеку элементов управления, и, хотя использовали всего один элемент управления, в пакет приложения будет включена вся эта библиотека. Посмотрим, как выглядит пакет нашего приложения, построенный в конфигурации выпуска. Для этого изменим конфигурацию построения с Debug на Release и выполним команду Построение > Построить решение. Теперь перейдем по адресу (в вашем случае это будет адрес папки, где в вашей системе по умолчанию сохраняются проекты приложений):
C:\Users\Alexander\Documents\Visual Studio 2012\Projects\P2_1\P2_1\Bin\Release
Найдём в данной папке файл с расширением .XAP. Это – пакет приложения, который, если бы речь шла о готовом приложении, устанавливался бы на устройства пользователей. Пакет имеет расширение .XAP, но по своей структуре это – обычный .ZIP-файл, если переименовать пакет, изменив расширение на .ZIP, можно увидеть его содержимое (Windows 8 автоматически открывает такие файлы, хотя можно воспользоваться и приложением-архиватором).
Здесь можно обнаружить, что в сжатом виде библиотека Coding4Fun занимает 78 Кб, в развёрнутом она будет занимать 312 Кб. В сравнении со скромными 17 Кб для dll-файла нашего приложения это – довольно большой объем.
Конечно, если речь идёт о сотнях килобайт, необходимых для библиотеки, которая нам нужна, может показаться, что в современных условиях подобные объемы незначительны. Но использование в приложении нескольких библиотек размером по несколько сотен килобайт каждая даст уже гораздо больший объем и установочного пакета, и развёрнутого приложения. При этом часть пространства используется нерационально, код большинства элементов управления не используется. Для того, чтобы оптимизировать использование подобных пакетов, можно, (если позволяет лицензия на используемый пакет, если имеется его исходный код), создать собственную сборку, содержащую только необходимые элементы. Наличие исходного кода пакетов (код рассматриваеЗымого пакета Coding4Fun доступен для загрузке в формате программных проектов для Visual Studio на http://coding4fun.codeplex.com/), кроме того, позволяет глубже изучить и понять особенности функционирования инструментов, включенных в него, а, значит, эффективнее использовать эти инструменты.
В этой лабораторной работе мы рассмотрели особенности работы со стандартными элементами управления и пакетами элементов управления сторонних разработчиков. Набора стандартных элементов управления не всегда достаточно для разработки приложений, в решении этой проблемы могут помочь элементы управления сторонних разработчиков (или пользовательские элементы управления, создание которых мы изучим в следующей работе). При этом использование таких элементов управления (и других библиотек) приводит к увеличению размера пакета приложения. Оптимизировать размер пакета (если позволяет лицензия набора инструментов) можно, создав собственную сборку, содержащей только необходимые элементы, на основе существующей.
Создайте учебное приложение, которое использует 5-8 элементов управления из пакета Coding4Fun, исследуйте их возможности и подготовьте отчёт о проделанной работе с приложением к нему копий экранов страниц приложений и описанием особенностей настройки и использования каждого из выбранных элементов управления. Поищите другие свободно распространяемые пакеты элементов управления, дайте описание одного из них в отчёте.
К данной лекции подготовлено видеоприложение и демонстрационный программный проект.
Цель работы: освоить методики работы с элементами управления
В стандартной поставке среды разработки для Windows Phone имеется набор элементов управления. Просмотреть доступные элементы можно, открыв Панель элементов нажатием на её ярлык, расположенный в левой части экрана. При необходимости Панель элементов можно закрепить в видимом состоянии, для её закрепления или переключения в режим автоматического скрытия служит значок с изображением канцелярской кнопки в заголовке её окна.
Состав Панели элементов можно расширить, для этого нужно щёлкнуть по ней правой кнопкой мыши и выбрать в появившемся контекстном меню пункт Выбрать элементы. На рис. 11.1. показано окно Visual Studio с открытым окном Выбор элементов панели элементов. Если вы полагаете, что какого-то стандартного элемента управления "нет на месте", вероятнее всего, его отображение просто отключено. С помощью данного окна можно включить отображение нужного элемента. Панель элементов можно вернуть к виду по умолчанию, для этого служит команда её контекстного меню Сброс панели элементов. Здесь мы рассматриваем работу с элементами управления на примере проекта P2_1, который можно найти в составе дополнительных материалов к курсу. Приложение создано с использованием шаблона Приложение Windows Phone, в качестве целевой платформы выбрана Windows Phone 8.0.
(рис 11.1) Настройка состава Панели элементов
Ниже, когда мы будем говорить о дополнительных элементах управления, мы вернемся к этому окну.
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
к виду:
<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />
Добавим на страницу элемент управления Button (Кнопка), рис. 11.2.
(рис 11.2) На страницу добавлен новый элемент управления
Обратите внимание на то, что сейчас у кнопки нет имени, его можно назначить либо в окне Свойства, указав поле Имя, либо – отредактировав XAML-код, соответствующий данному элементу управления. И тот и другой подходы вполне допустимы. Правка XAML-кода потенциально способна привести к ошибкам (хотя при правке и действует система подсказок), однако, если вы хорошо знакомы с каким-то элементом управления, если у вас, например, есть элемент управления, настроенный так, как вам нужно, и вы хотите перенести его в другой проект, пожалуй, самый универсальный метод заключается в непосредственной работе с XAML-кодом.
Желательно давать элементам управления понятные имена, иначе, при росте размеров проекта с элементами управления будет не очень удобно работать. Для того, чтобы понять, например, какова роль той или иной кнопки, при использовании её имени в программном коде, придётся постоянно сверяться с XAML-кодом.
Дадим кнопке имя cmdMain. В данном случае используется префикс имени "cmd", что означает "command button", это играет роль исключительно для удобства разработки – для того, чтобы сразу было видно, например – в именах обработчиков событий, с каким именно элементом мы имеем дело. Именам кнопок, кроме того, нередко дают префикс "btn" В свойство Content, определяющее то, что выводится на кнопке, введем текст "Нажми меня".
Если сейчас запустить приложение в эмуляторе или на устройстве, нажатие на кнопку будет анимироваться, однако никаких полезных действий она выполнять не будет. Для того, чтобы наша кнопка заработала, нам понадобится обработчик соответствующего события кнопки. Если переключить панель свойств, при выделенной кнопке, в режим просмотра событий, что можно сделать, нажав на кнопку Обработчики событий для выделенного элемента, откроется большой список событий, на которые может реагировать кнопка. Как правило, кнопки используются для вызова события Click, именно обработчик этого события создаётся в качестве обработчика по умолчанию при выполнении двойного щелчка по элементу управления Button в окне конструктора. При необходимости, конечно, можно назначить кнопке (или другому элементу) и другие обработчики событий. Для того, чтобы это сделать, достаточно выполнить двойной щелчок по соответствующему полю в панели свойств при просмотре событий элемента управления. То же самое достижимо и при ручной правке XAML-кода. После добавления обработчика события Click, имя которому назначена автоматически, XAML-код кнопки выглядит так:
<Button x:Name="cmdMain" Content="Нажми меня" HorizontalAlignment="Left" Margin="12,37,0,0" Grid.Row="1" VerticalAlignment="Top" Height="88" Width="196" Click="cmdMain_Click"/<
Код обработчика выглядит так:
private void cmdMain_Click(object sender, RoutedEventArgs e)
{
}
Благодаря понятному имени элемента управления, который мы дали ему ранее, имя обработчика события элемента так же получилось понятным.
Добавим в обработчик события код, который будет менять надпись на кнопке на "Click me", если надпись на ней содержит текст "Нажми меня" и наоборот. Для этого мы можем обратиться к элементу управления по имени, записав через точку его нужное свойство:
private void cmdMain_Click(object sender, RoutedEventArgs e)
{
if (cmdMain.Content.ToString() == "Нажми меня")
{
cmdMain.Content = "Click me";
}
else
{
cmdMain.Content = "Нажми меня";
}
}
Хотя мы можем присвоить свойству Content строку и на кнопке отобразится нужный текст, свойство кнопки Content – это не простая строка, а объект типа Object. Для того, чтобы исследовать внутреннее устройство элемента управления Button, сначала нужно уточнить, с помощью окна Выбор элементов панели элементов, подробности о данном элементе управления. В частности, имя сборки и версию. В нашем случае это сборка System.Windows (в частности, элементы управления описаны в пространстве имен System.Windows.Controls), версия 2.0.6.0, рис. 11.3.
(рис 11.3) Сведения о кнопке, полученные из окна Выбор элементов панели элементов
Теперь можно перейти в папку References нашего проекта и сделать двойной щелчок по ссылке Windows Phone. Будет открыт Обозреватель объектов, там мы найдём сборку System.Windows [2.0.6.0], в сборке – пространство имен System.Windows.Controls, в этом пространстве имен найдём класс Button. Здесь мы можем видеть иерархию наследования элемента с описаниями свойств, методов, событий, здесь можно понять, как устроена кнопка, посмотреть сведения о её свойстве Content, к которому мы обращались выше (рис. 11.4).
(рис 11.4) Элемент System.Windows.Control.Button, открытый в Обозревателе объектов
Зная полное имя элемента (System.Windows.Control.Button) мы можем обратиться к документации, доступной на сайте на http://msdn.microsoft.com. Здесь можно, сразу после перехода на сайт ввести в поле поиска такой запрос: "System.Windows.Controls.Button phone 8.0". В нашем случае, поиск по полному имени элемента дал, в частности, ссылку на страницу http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.controls.button%28v=vs.105%29.aspx. В разделе страницы Version Information (Информация о версиях) указано, что данные сведения справедливы для Windows Phone OS, в частности, среди версий операционной системы указана версия 8.0. То есть, нам нужна именно эта страница, рис. 11.5.
(рис 11.5) Справочные сведения на сайте MSDN
Здесь, помимо описания устройства кнопки, приводятся примеры кода, в результатах поиска по MSDN, через которые мы вышли на данную страницу, имеются и ссылки на другие страницы – там могут быть дополнительные примеры, ветки обсуждения на форумах и иные полезные материалы.
В нашем случае речь идёт о достаточно простом и понятном элементе управления – о кнопке, "справиться" с ним можно даже на чисто интуитивном уровне. Не все элементы управления столь просты, для эффективного использования большинства из них недостаточно той неявной справочной информации, которую несет в себе, например, панель свойств элемента. Поэтому Однако, нужно учитывать и то, что нельзя, до практических испытаний, быть окончательно уверенным в том, будет ли работать в каждом конкретном случае тот или иной подход, описанный в документации, найденный среди других материалов. Не стоит забывать и об исследовании используемых элементов управления (и других механизмов) с помощью отладочных сообщений и точек останова.
Полезный материал о стандартных элементах управления для Windows Phone можно найти здесь: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402561%28v=vs.105%29.aspx.
В распоряжении разработчика достаточно много стандартных элементов управления. Но не всегда их достаточно для реализации того или иного приложения. Сторонние разработчики создают пакеты элементов управления для платформы Windows Phone, этими элементами управления вполне можно пользоваться в собственных проектах.
В частности, пакеты элементов управления (и других библиотек, элементы управления – лишь один из примеров) можно найти, воспользовавшись сервисом NuGet.
Предположим нам в приложении нужен элемент управления, который позволяет пользователю выбирать цвет. Например, речь идёт о приложении для рисования и у пользователя должна быть возможность настраивать цвет кисти. Подобного элемента управления нет среди стандартных, но несколько его вариантов существует в пакете Coding4Fun (http://coding4fun.codeplex.com/, рис. 11.6).
(рис 11.6) Копии экранов приложений, использующих набор элементов управления Coding4Fun
Сервис NuGet, поддержка которого интегрирована в Visual Studio 2012, упрощает задачи по поиску пакетов, он берет на себя их загрузку, обновление, добавляет в проект необходимые ссылки.
Выполним в Visual Studio команду Сервис > Диспетчер пакетов библиотек > Управление пакетами NuGet для решения… В этом же меню есть и команда Консоль диспетчера пакетов – она позволяет, используя интерфейс командной строки, представленный в этой консоли, работать с пакетами. Мы воспользуемся графическим средством, окно которого открывается при выполнении вышеупомянутой команды.
Так как нас интересует пакет элементов управления Coding4Fun, мы можем ввести "Coding4Fun" в поле поиска, которое расположено в правой верхней части окна. В результате поиска окно приобретет следующий вид (рис. 11.7.).
(рис 11.7) Поиска пакета с использованием сервиса NuGet
При выделении пакета в списке результатов поиска можно видеть описание пакета в правой части окна. Нужный нам пакет называется Coding4Fun Toolkit – Controls. При выделении строки, соответствующей пакету, появляется кнопка Установить. Нажмём её. Нам будет предложено выбрать проекты для установки, так как в данном случае решение содержит лишь один проект, в этом окне можно ничего не менять и сразу же нажать ОК. После этого пакет будет загружен и установлен, в папке References в Обозревателе решений появится ссылка на Coding4Fun.Toolkit.Controls (при двойном щелчке по этой ссылке открывается уже знакомый вам Обозреватель объектов). При этом файлы пакета, который содержит не только элементы управления для Windows Phone, будут размещены в папке нашего проекта, в частности, в нашем случае, по следующему адресу (в вашем случае это будет адрес, соответствующий расположению пакета на вашем компьютере):
C:\Users\Alexander\Documents\Visual Studio 2012\Projects\P2_1\packages\Coding4Fun.Toolkit.Controls.2.0.5\lib\windowsphone8
Здесь находится файл Coding4Fun.Toolkit.Controls.dll, который и содержит нужные нам элементы управления. Удобнее всего работать с ними, предварительно добавив нужные элементы управления в Панель элементов. В этом нам поможет знание места расположения библиотеки элементов для Windows Phone 8. Вызовем из контекстного меню Панели элементов окно Выбор элементов панели элементов, нажмём на кнопку Обзор, которая находится в её нижней части и перейдём в вышеупомянутую папку с библиотекой Coding4Fun.Toolkit.Controls.dll. Выбрав этот файл, нажмём кнопку Открыть.
В окно выбора элементов будут добавлены все элементы из библиотеки, они будут выделены, напротив каждого будет установлен флаг, который говорит о том, что при нажатии на кнопку ОК выделенные элементы окажутся в Панели элементов. Нажмём ОК. В Панели элементов появится большой список новых элементов управления. Среди них есть несколько элементов, которые позволяют организовать выбор пользователем некоторого цвета. Например, это ColorHexagonPicker, ColorPicker, ColorSlider. Эти элементы управления добавляются на страницы точно так же, как обычные. Например, добавим на нашу страницу элемент управления ColorPicker.
На рис. 11.8. показано состояние окна Visual Studio после добавления этого элемента управления.
(рис 11.8) Новый элемент управления
Этот элемент управления, так же как и стандартные, поддерживает настройку с помощью окна Свойства. Нужно отметить, что при добавлении его на страницу, в её XAML-коде автоматически появляется не только его описание, но и ссылка на соответствующее пространство имён XAML.
То есть, в заголовочной части файла появилась следующая ссылка:
xmlns:Controls="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"
А в области описания содержимого страницы, в сетке для содержимого, созданной по умолчанию, размещается следующее:
<Controls:ColorPicker HorizontalAlignment="Left" Margin="25,162,0,0" Grid.Row="1" VerticalAlignment="Top" Height="353" Width="423"/>
Если сейчас запустить наше приложение, можно заметить, что элемент управления работает, реагируя на щелчки мыши (в эмуляторе) или на касания (на устройстве), однако, полезных функций он пока не выполняет, мы ничего не делаем с тем цветом, который выбираем с его помощью.
Добавим на нашу страницу элемент управления Rectangle, дадим ему имя recColor, дадим элементу управления выбора цвета имя cpMain и создадим обработчик события ColorChanged для элемента управления cpMain. Мы хотим организовать с помощью этого обработчика события изменение цвета прямоугольника recColor.
У элемента управления есть свойство Fill, которое определяет фоновый цвет фигуры. В обработчике события изменения цвета элемента cpMain нам доступен параметр color типа System.Windows.Media.Color. Для того, чтобы поменять цвет свойства прямоугольника Fill, нам нужен объект типа System.Windows.Media.Brush (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.brush%28v=vs.105%29.aspx) (рис. 11.9).
(рис 11.9) Создание обработчика события для изменения цвета прямоугольника
Класс System.Windows.Media.Brush – это абстрактный класс, он служит основой для нескольких классов кистей, которые можно использовать в случаях, подобных нашему. В частности, для того, чтобы закрасить прямоугольник некоторым цветом, нам подойдёт кисть System.Windows.Media.SolidColorBrush (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.solidcolorbrush%28v=vs.105%29.aspx). Один из вариантов конструктора этого объекта принимает объект типа System.Windows.Media.Color, который у нас уже есть.
В итоге, код обработчика события выглядит так:
private void cpMain_ColorChanged(object sender, System.Windows.Media.Color color)
{
recColor.Fill = new System.Windows.Media.SolidColorBrush(color);
}
Запуск приложения в эмуляторе даёт нам возможность убедиться в работоспособности этого механизма, рис. 11.10.
(рис 11.10) Экран программы при испытаниях в эмуляторе
Мы использовали в приложении библиотеку элементов управления, и, хотя использовали всего один элемент управления, в пакет приложения будет включена вся эта библиотека. Посмотрим, как выглядит пакет нашего приложения, построенный в конфигурации выпуска. Для этого изменим конфигурацию построения с Debug на Release и выполним команду Построение > Построить решение. Теперь перейдем по адресу (в вашем случае это будет адрес папки, где в вашей системе по умолчанию сохраняются проекты приложений):
C:\Users\Alexander\Documents\Visual Studio 2012\Projects\P2_1\P2_1\Bin\Release
Найдём в данной папке файл с расширением .XAP. Это – пакет приложения, который, если бы речь шла о готовом приложении, устанавливался бы на устройства пользователей. Пакет имеет расширение .XAP, но по своей структуре это – обычный .ZIP-файл, если переименовать пакет, изменив расширение на .ZIP, можно увидеть его содержимое (Windows 8 автоматически открывает такие файлы, хотя можно воспользоваться и приложением-архиватором).
Здесь можно обнаружить, что в сжатом виде библиотека Coding4Fun занимает 78 Кб, в развёрнутом она будет занимать 312 Кб. В сравнении со скромными 17 Кб для dll-файла нашего приложения это – довольно большой объем.
Конечно, если речь идёт о сотнях килобайт, необходимых для библиотеки, которая нам нужна, может показаться, что в современных условиях подобные объемы незначительны. Но использование в приложении нескольких библиотек размером по несколько сотен килобайт каждая даст уже гораздо больший объем и установочного пакета, и развёрнутого приложения. При этом часть пространства используется нерационально, код большинства элементов управления не используется. Для того, чтобы оптимизировать использование подобных пакетов, можно, (если позволяет лицензия на используемый пакет, если имеется его исходный код), создать собственную сборку, содержащую только необходимые элементы. Наличие исходного кода пакетов (код рассматриваеЗымого пакета Coding4Fun доступен для загрузке в формате программных проектов для Visual Studio на http://coding4fun.codeplex.com/), кроме того, позволяет глубже изучить и понять особенности функционирования инструментов, включенных в него, а, значит, эффективнее использовать эти инструменты.
В этой лабораторной работе мы рассмотрели особенности работы со стандартными элементами управления и пакетами элементов управления сторонних разработчиков. Набора стандартных элементов управления не всегда достаточно для разработки приложений, в решении этой проблемы могут помочь элементы управления сторонних разработчиков (или пользовательские элементы управления, создание которых мы изучим в следующей работе). При этом использование таких элементов управления (и других библиотек) приводит к увеличению размера пакета приложения. Оптимизировать размер пакета (если позволяет лицензия набора инструментов) можно, создав собственную сборку, содержащей только необходимые элементы, на основе существующей.
Создайте учебное приложение, которое использует 5-8 элементов управления из пакета Coding4Fun, исследуйте их возможности и подготовьте отчёт о проделанной работе с приложением к нему копий экранов страниц приложений и описанием особенностей настройки и использования каждого из выбранных элементов управления. Поищите другие свободно распространяемые пакеты элементов управления, дайте описание одного из них в отчёте.
К данной лекции подготовлено видеоприложение и демонстрационный программный проект.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.