День двадцать первый. Silverlight Toolkit for Windows Phone

Вступление

В стандартной поставке Visual Studio для Windows Phone 7 есть множество интересных и полезных компонентов. Но если вам и этого недостаточно, то можете установить дополнительные компоненты. Большой популярностью пользуется набор дополнительных инструментов Silverlight for Windows Phone Toolkit. Рассмотрим набор поближе.

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

Подключение Silverlight Toolkit

Скачайте пакет и добавьте сборку Silverlight Toolkit к проекту:

Добавьте пространство имен к тегу <phone:PhoneApplicationPage>:


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Элемент ContextMenu (Контекстное меню)

Если вам приходилось закреплять приложение на странице Start, значит вы уже видели ContextMenu в действии. Если еще нет, то сделайте следующее: приложите палец к значку приложения и удерживайте его несколько секунд. Появится контекстное меню pin to start:

Если в вашей программе нужна такая же функциональность, то используйте элемент ContextMenu из набора Silverlight Toolkit.

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


<Rectangle Width="100" Height="100" Fill="Red">
	<toolkit:ContextMenuService.ContextMenu>
		<toolkit:ContextMenu>
			<toolkit:MenuItem Header="первый элемент меню" Click="MenuItem_Click" />
			<toolkit:MenuItem Header="второй элемент меню" Click="MenuItem_Click" />
			<toolkit:MenuItem Header="третий элемент меню" Click="MenuItem_Click" />
		</toolkit:ContextMenu>
	</toolkit:ContextMenuService.ContextMenu>
</Rectangle>

Как видно из кода, нужно подключиться к ContextMenuService и добавить ContextMenu к выбранному элементу. Также мы видим, что для каждого элемента меню добавили событие Click:

Элементы DatePicker и TimePicker

Перейдем к элементам, связанных с датой и временем:


<toolkit:DatePicker Value="7/22/1976" />
<toolkit:TimePicker Value="12:02 AM" />

Когда вы добавите элементы в свой проект, они будут работать замечательно. У пользователя появляется удобная возможность выбрать дату или время (начальные значения устанавливаются в коде, если вы не укажете никаких значений, то будет использоваться текущее время и дата):

С этими элементами есть небольшая проблема. При добавлении их на страницу также выводятся значки ApplicationBar. Причем без картинок, поэтому в виде крестиков (смотри рисунок выше). На самом деле это кнопки Done и Cancel. Доработайте кнопки следующим образом. При установке Silverlight Toolkit for Windows Phone на вашем компьютере была создана папка Icons (C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11\Bin\Icons), в которой вы найдете два файла для значков: ApplicationBar.Cancel.png и ApplicationBar.Check.png

  • Создайте папку в вашем проекте под именем Toolkit.Content
  • Добавьте в папку два указанных значка
  • Установите у значков в свойствах Build Action значение Content

Теперь все заработает как положено:

Элемент GestureListener

Перейдем к GestureListener. Принцип работы с ним похож на ContextMenu. Мы подключаем GestureService, чтобы использовать GestureListener, а затем отслеживаем нужные события. Помните, что жесты обрабатываются только выбранными элементами. Поддерживаются следующие жесты:

  • Tap
  • DoubleTap
  • Hold
  • Flick
  • Pinch
  • Drag and Drop

Пользоваться жестами достаточно просто, только надо знать некоторые технические нюансы. Рассмотрим код (на другом прямоугольнике):


<Rectangle Width="100" Height="100" Fill="Blue">
	<toolkit:GestureService.GestureListener>
		<toolkit:GestureListener 
			DoubleTap="DoubleTapped"
			Tap="Tapped"
			Hold="Held"
			DragStarted="DragStart"
				DragDelta="DragDelta"
				DragCompleted="DragEnd"
			Flick="Flicked"
			PinchStarted="PinchStart"
				PinchDelta="PinchDelta"
				PinchCompleted="PinchEnd" />
	</toolkit:GestureService.GestureListener>
</Rectangle>

Как видите, нужно задать интересующие нас жесты и сопоставить им обработчики событий. В состав набора Silverlight Toolkit for Windows Phone входит пример на эту тему. Изучите его.

Элемент ToggleSwitch

Вы уже видели данный элемент, когда пытались изменить дату или время на своем устройстве в системных настройках (или вы даже не пытались?):

Добавить элемент очень просто:


<toolkit:ToggleSwitch Header="Receive updates automatically"/>

Вы можете задать текст (у нас это Receive updates automatically), а слова On/Off зашиты в элемент и появляются автоматически. Можно немного настроить элемент под себя. У него есть элементы HeaderTemplate и ContentTemplate, а также события Checked и Unchecked. (Похоже на CheckBox, не так ли?). Вот небольшой пример на эту тему (с привязкой данных):


<toolkit:ToggleSwitch Header="12:02 AM">
    <toolkit:ToggleSwitch.HeaderTemplate>
        <DataTemplate>
            <ContentControl FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}"/>
        </DataTemplate>
    </toolkit:ToggleSwitch.HeaderTemplate>
    <toolkit:ToggleSwitch.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Alert: " FontSize="{StaticResource PhoneFontSizeSmall}"/>
                    <ContentControl HorizontalAlignment="Left" FontSize="{StaticResource PhoneFontSizeSmall}" Content="{Binding}"/>
                </StackPanel>
                <TextBlock Text="every weekday" FontSize="{StaticResource PhoneFontSizeSmall}" Foreground="{StaticResource PhoneSubtleBrush}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>

Элемент WrapPanel

WrapPanel - это StackPanel с дополнительными возможностями. Если вам понадобится создать 30 кнопок равномерно на экране, то воспользуйтесь WrapPanel. Ниже показан пример для 12 кнопок.


<toolkit:WrapPanel>
	<Button Width="75" Height="75" Content="1" />
	<Button Width="75" Height="75" Content="2" />
	<Button Width="75" Height="75" Content="3" />
	<Button Width="75" Height="75" Content="4" />
	<Button Width="75" Height="75" Content="5" />
	<Button Width="75" Height="75" Content="6" />
	<Button Width="75" Height="75" Content="7" />
	<Button Width="75" Height="75" Content="8" />
	<Button Width="75" Height="75" Content="9" />
	<Button Width="75" Height="75" Content="10" />
	<Button Width="75" Height="75" Content="11" />
	<Button Width="75" Height="75" Content="12" />
</toolkit:WrapPanel>

В примере, который прилагается к уроку, при нажатии на кнопку размеры всех кнопок увеличиваются. И вы можете как WrapPanel динамически подстраивает кнопки на экране:

Мы рассмотрели пять элементов управления из набора Silverlight Toolkit for Windows Phone. Используйте набор в своих приложениях, если хотите, чтобы они выглядели профессионально.

К пакету также прилагается файл CHM-справки, где вы можете почерпнуть дополнительную информацию о всех элементах пакета. Ищите его в папке, в которую был установлен сам пакет (C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11).

Реклама