Этот текст — перепост моего старого поста

Не так давно я обнаружил, что по программе MSDN AA доступен Surface SDK, чем был приятно удивлён. На тот момент эта была единственная подписка, по которой можно было получить данный SDK. Сейчас он доступен и другим подписчикам MSDN, так же его можно скачать с сайта загрузок Microsoft. SDK доступен в версии 1.0 и требует для своей работы XNA 2.0 (подойдёт версия для распространения) и VS 2008. Так же вы можете поставить XNA более поздних версий, и соответствующие проекты будут доступны для Surface. Следующим шагом будет установка непосредственно пакета Surface SDK.

Для разработки приложений, в пакет входит Surface Simulator, который предлагает возможность отлаживать приложения для Surface. К тому же, если у вас вдруг где-то завалялся настоящий Surface, студия может запустить приложение на нем. Если у вас нет Surface, и симулятор вы не запустили, тогда приложение запуститься как обычное оконное. В этой версии SDK мультитач для элементов управления Surface доступен не будет, даже если вы работаете под window 7. Что, впрочем, неудивительно. Эта версия SDK появилась даже раньше, чем бета win7. Я думаю в будущих версиях, это уже исправлено.

Остановлюсь подробнее на Surface Simulator. Что бы симулятор заработал, необходимо запускать его на мониторе с разрешением большем либо равном 1280 X 960. К сожалению, моему ноутбуку не хватает пикселей по высоте. Но это ограничение обходиться. Есть вариант, сказать системе, что у неё есть внешний монитор, с нужным разрешением, и, пользуясь лупой, работать с симулятором, но это не очень удобно (хотя данную статью, я готовил именно так). Так же можно установить виртуальную машину (там, при желании можно задать любое разрешение). Если вы уже настроили всю инфраструктуру на реальной машине и вам лень повторять все эти действия ещё раз, то можно воспользоваться утилитой Disk2VHD, которая создаст виртуальный диск с копией вашей системы, вам остаётся только использовать его на виртуальной машине.

При запуске Surface Simulator, запускается приложение Water, более известное под названием Surface Laguna. Только в последней ещё и рыбки есть. На Виртуальной машине оно не работает, не хватает эмулируемой видеокарты.

image

Других приложений там нет. Но, во-первых, напишем свои. А во вторых есть приложения доступные на сайте Surface. Устанавливаются они в гостевой системе, но потом запускать их можно из симулятора.

image

Меня поначалу несколько напугало то, что Surface находиться “вверх ногами” по отношению к нам. Но потом понял, что это понятие к Surface просто не применимо, ведь пользователь может оказаться с любой стороны. Так что, “это не баг, это фича”, что б вы не забывали особенности Surface.

Для начала я решил запустить примеры, что бы можно было посмотреть возможности Surface Simulator. Примеры можно найти в меню Пуск/Microsoft Surface SDK/Samples. Там находится решение (solution) в котором есть много проектов с примерами. Вам достаточно выбрать нужный проект в качестве стартового проекта. Для знакомства вполне подойдёт пример ControlsBox. Там есть примеры элементов управления оптимизированных для Surface.  

На симуляторе вы можете имитировать множественное касание, последовательно расставляя точки соприкосновения. Для этого достаточно зажав правую клавишу мыши в том месте, где вы хотите закрепиться, кликнуть на левую клавишу, и касание останется в этом месте. Теперь вы можете касаться далее.  Для того что бы убрать скопившиеся касания существуют специальные кнопки в правой части меню:

image

Так же, тем людям, которые плохо знакомы с Surface интересно будет узнать, как же работать с текстовыми полями. Ответ прост, с каждым из них ассоциирована своя виртуальная клавиатура, которую можно вертеть и масштабировать.

image

Так же Surface Simulator позволяет работать с тегами. Теги – это особый механизм Surface, позволяющий идентифицировать объекты. Есть два вида тегов это byte-теги, которые представляют собой 256 различных значений:

image

А так же это Identity-теги, которые позволяют задать >340 282 366 920 938 000 000 000 000 000 000 000 000 уникальных значений:

image

Теги, кроме значений, имеют ещё и направления, что позволяет вам определить, как повернут тегированный объект. В Surface SDK входит специальное приложение для печати тегов Identity Tag Printing Tool.

Но вернёмся к симулятору. У него есть инструменты, что бы симулировать касание любого из этих тегов:

image

Чтобы закрыть запущенное приложение, нажмите на кнопку Surface в любом из углов экрана. Далее нажмите кнопку I’m done  и симулятор перезапустит Surface

image

Попробуем написать своё приложение для Surface. При создании проекта выбираем соответствующий пункт меню:

image

Ну что ж создадим WPF проект ‘MyFirstSurfaceApplication’. К слову сказать, у меня доступно три типа проектов: WPF, XNA, XNA 3.0.

Запустив то, что мне создалось, я увидел большой серый прямоугольник с красивыми эффектами от “касания”

Первое что я решил сделать — это примерчик, подсмотренный мной в одном из видео. Я заменил корневой контейнер (по умолчанию как всегда Grid) на ScatterView и добавил внутрь несколько TextBlock’ов с “Hello World!”(куда же без него J):

   1: 

   2: <s:ScatterView

   3: Background="{StaticResource WindowBackground}" >

   4: <TextBlock>Hello world!</TextBlock>

   5: <TextBlock>Hello world!</TextBlock>

   6: <TextBlock>Hello world!</TextBlock>

   7: <TextBlock>Hello world!</TextBlock>

   8: </s:ScatterView>

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

image

С тем же успехом можно засунуть туда изображения, видео.

Ещё одна интересная вещь, на которую я наткнулся, это LibraryBar. Это такие библиотеки, которые позволяют перемещать элементы из одной такой библиотеки в другую. Вот что я написал:

   1: 

   2: <s:ScatterView

   3: Background="{StaticResource WindowBackground}" >

   4: <s:LibraryBar>

   5: <TextBlock>Hello world!</TextBlock>

   6: <TextBlock>Hello world!</TextBlock>

   7: <TextBlock>Hello world!</TextBlock>

   8: </s:LibraryBar>

   9: <s:LibraryBar>

  10: <TextBlock Foreground="Red">

  11: Hello world!

  12: </TextBlock>

  13: <TextBlock Foreground="Red">

  14: Hello world!

  15: </TextBlock>

  16: </s:LibraryBar>

  17: </s:ScatterView>

Вот результат:

image

Посмотрим на разработку с точки зрения дизайнера. Для этого я открыл проект в Expression Blend.

Для начала я решил сменить задний фон. Добавил нужную картинку, в моем случае MSP.jpg, в ресурсы проекта, и заменил ссылку в  ресурсах окна:

   1: 

   2: <ImageBrush x:Key="WindowBackground"

   3: Stretch="None" Opacity="0.6"

   4: ImageSource="pack://application:,,,/Resources/MSP.jpg"/>

Это тот самый WindowsBackground, который далее используется в корневом контейнере:

   1: 

   2: <s:ScatterView

   3: Background="{StaticResource WindowBackground}" >

Далее я решил разобраться с библиотеками. В Surface SDK есть два соответствующих элемента управления, это LibraryBar и LibraryStack. Что ж давайте добавим их в наш ScatterView:

   1: 

   2: <s:ScatterView

   3: Background="{StaticResource WindowBackground}">

   4: <s:LibraryBar/>

   5: <s:LibraryStack/>

   6: <s:LibraryBar/>

   7: </s:ScatterView>

Рассматривать TextBlock’и уже не интересно, поэтому я решил поработать с изображениями. Для этого в Expression Studio на вкладке Data нажмём кнопку с дисками и добавим SampleDataSource:

image

В Collection удаляем второе поле, а у первого меняем тип на Image и выбираем папку с картинками. Затем, как сказал кто-то из евангелистов, любимым методом Microsoft – Drag-n-Drop перетаскиваем Collection на LibraryStack. Все, мы связали Библиотеку с ресурсом. Посмотрим, что у нас получилось.

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

   1: 

   2: <s:ScatterView

   3: Background="{StaticResource WindowBackground}"

   4: DataContext="{Binding Source={StaticResource SampleDataSource}}" >

   5: <s:LibraryBar/>

   6: <s:LibraryStack

   7: ItemTemplate="{DynamicResource ItemTemplate}"

   8: ItemsSource="{Binding Collection}"/>

   9: <s:LibraryBar/>

  10: </s:ScatterView>

Здесь мы видим свойство ItemTemplate. оно как раз и отвечает за отображение элементов коллекции. Скопируем его в LibraryBar’ы, и они так же смогут отображать изображения:

   1: 

   2: <s:LibraryBar

   3: ItemTemplate="{DynamicResource ItemTemplate}"/>

Но меня не устраивает, что в LibraryBar я вижу не все изображение.

image

Чтоб разобраться в чем дело, давайте посмотрим на описание DataTemplate:

   1: 

   2: <DataTemplate x:Key="ItemTemplate">

   3: <StackPanel>

   4: <Image

   5: Source="{Binding Property1}"

   6: HorizontalAlignment="Left"

   7: Height="64" Width="64"/>

   8: </StackPanel>

   9: </DataTemplate>

Здесь мы видим фиксированный размер изображения. Кроме того оно помещено в StackPanel и вся эта конструкция добавляется в конечном итоге в LibraryBar.Items. Размер элемента LibraryBar по ширине не ограничен (если вы добавите туда картинку шириной 1024 пикселя, то она и займёт 1024 пикселя), но по высоте он ограничен определёнными размерами (примерно 32 пикселя). В итоге наш рисунок не помещается в отображение. Кроме того надо отметить поведение StackPanel, который по ширине принимает размер самого широкого своего элемента, а по высоте занимает столько сколько есть места. Мы можем сейчас убрать ограничение на размер изображения, но тогда оно отобразиться в полный размер. Можно так же задать меньший размер, но тогда уменьшится изображение в LibraryStack (ведь мы используем везде один и тот же шаблон). Но давайте подумаем, зачем нам StackPanel? Если вспомнить, что мы связываемся с XML, у которой может быть несколько свойств, то это становится понятно. Но сейчас в контейнере находиться один элемент. Изменим шаблон следующим образом:

   1: 

   2: <DataTemplate x:Key="ItemTemplate">

   3: <Image Source="{Binding Property1}"/>

   4: </DataTemplate>

Теперь изображение принимает необходимый размер, в LibraryStack оно стало чуть больше, а в LibraryBar помещается полностью, в независимости от размера последнего:

image

Для примера работы с Surface SDK я думаю достаточно. Если вас заинтересовало, приведу несколько ссылок:

Для установки:

1. VS 2008 express

2. XNA 2.0 версия для распространения

3. Surface SDK 1.0 SP1 WE

4. (Необязательно) Microsoft XNA Game Studio 3.1

Блог разработчиков Surface

В блоге анонсирована первая книга по Surface. Доступны несколько небольших лабораторных работ из неё.