Intro to Metro (Захаров) (546771), страница 2

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 2)

The BlankPage.xaml view is for all intents and purposes (ours anyway) a regular XAML view and should be very familiar to anyone that has worked with XAML in the past. In fact, I’m going to whip together a quick example using skills that should not be new to you.

In the interest of not being cliché, I’m not going to do a “Hello World”, but instead a “Hello-x”, where x is a name you type in. How’s that for original and exciting?

Metro App’s Code

The App.xaml file, like in a WPF app, lets me contain resources that will be application-wide. One such resource is already included in this file, StandardStyles.xaml. This XAML file is included automatically in the Common folder and includes visual styles that will come in handy when adhering to Metro design guidelines and specifications. The first such guideline is the screen background. The brush that is set up to give me the correct background is included in a static resource called ApplicationPage-BackgroundBrush. I’ll use this resource as the background for the view’s primary panel, the Grid.

My simple example will allow you to enter text into a TextBox, let you press a button, and display that text in a TextBlock.

If the code in Listing 1 looks familiar to you, it should; especially if you’re a XAML developer already. It’s identical to what you would write to accomplish the same results in WPF or Silverlight. Let’s run this application and go over the results.

App Execution

First of all, in Visual Studio 11 you might have noticed that the green run-button is gone (yes, I miss it too). In fact, all trace of color is gone, isn’t it? Instead, we’ve been given a new “run” button whose action is changeable through its accompanying drop-down. The three options are Local Machine, Simulator and Remote Machine. I’m not going to connect to a remote machine in my execution so I’ll concentrate on the other two options.

Changing the “run” button to Simulator will launch a complete tablet emulator with your windows instance running in it. You’ll be able to do just about anything you can do from a real tablet including change orientation and access other apps from the start-screen. The default option for the “run” button is Local Machine and it’s the one that is most like what you are accustomed to in Visual Studio 2010. If I execute my app in this mode, my entire screen will display the execution as shown in Figure 4.

Figure4: Simple app execution.

I want to bring a few things to your attention here. First that controls have a flat appearance. I can, however, attach any type of styling I want to these elements. Metro controls have characteristics that appeal specifically to a touch environment, and you can see one of them here. The second I start to type into the textbox, an X appears in the TextBox over to the right. Tapping the X will clear the current text. When you’re using a Metro app from a touch device, it’s much more convenient to simply tap on this X to clear the TextBox than it is to touch the end of your text and use the virtual keyboard to backspace over all the text. Except for the black & white, flat appearance, the screen is nothing exciting and the behavior is what I programmed. If I enter text into the box and press the Say Hello button, I’ll see the text below the button. Now I need to stop the execution.

This is not so trivial. Metro apps are not really designed to “stop” in the sense of the word. Instead they suspend when you access another application or the Start page. I’ll discuss this in depth later. When you run an application from Visual Studio, you need to get back to Visual Studio to stop its execution. If I hover just below the upper-left corner on the screen against the left edge, a thumbnail of Visual Studio will appear. I can click (or tap, if I’m using a real tablet) now and VS will come back up. Of course, I can also simply ALT-TAB to return to VS where I can then press the Stop button. Let’s get back to the code now.

Views

What may look different in the XAML code is the top-level tag, which in this case is Page. Though available in WPF, most views you create are Window or UserControl-based in WPF. In a Metro app, it will be page.

The idea is that your application displays information by either switching between user controls displayed on a view (just like in WPF or Silverlight) or by navigating to another page, where you’d be given an easy ability to come back. Think about tablet or phone devices you’ve used to date and you’ll recognize this navigation style.

Overlapping windows are not possible in a Metro application and, in fact, would be undesired in the kind of environment Metro aims to target. When adding new views to an application, Visual Studio gives you two choices: Page and UserControl, not Window. Including UserControls in a page is no different than placing them in the XAML of a WPF window. Now I’ll show you how easy it is to navigate among views in a Metro application.

Перевод.

«Введение в Metro » , Мигель Кастро

Журнал «CoDe » (Июль/Август 2012)

Введение в Metro

Спустя десять лет после выхода .NET Framework Microsoft в очередной раз удивляет своей новой платформой для разработки, которая направит Ваши таланты на мобильные устройства, за которыми стоит будущее, а именно – на планшеты. Windows Runtime или WinRT является основой для разработки приложений, предназначенных для сенсорных устройств на базе Windows 8, но что же это означает для .NET разработчиков и имеющихся у них навыков?

Переход от VB6, на котором многие из нас выросли, к .NET имел большое значение. Впервые Microsoft-ориентированные не C++ разработчики увидели настоящую ориентированность объектов, а также многие другие новые концепции и функции. Даже характеристики, связанные с IDE, претерпели серьёзные изменения: код файлов больше не зависит от классов, появилось множество новых шаблонов проектов и независимость от языка (конечно, от того, который начал новую войну). Переход к WinRT и Metro приложениям не будет таким уж стремительным. Ваши навыки .NET разработчиков, будь то VB или C#, пригодятся Вам гораздо сильнее, чем десять лет назад.

Что такое Metro и WinRT?

WinRT – сокращение от Windows Runtime и новая модель программирования, которая придёт на смену Win32. Metro – это новый UX стиль приложений от компании Microsoft. По большей части, Metro создавалась для сенсорных устройств, таких как планшет или телефон. Но не исключена возможность разработки настольных приложений с применением концепции Metro. Metro программы делают ставку на контент. Это означает, что они завораживают своей простотой. Лучшее определение, которое я однажды прочитал для «захватывающего приложение», было приложение, которое полностью захватывает внимание пользователя. Это означает, что такое приложение интуитивно понятно, привлекательно и требует очень мало или вообще не требует какой-либо подготовки, чтобы быстро начать его использовать. Metro UI добивается этого, делая ставку на контент и удобную навигацию с помощью плиток. Простота, по сути, является антитезой приложений всех видов, которые мы разрабатывали на протяжении многих лет.

То есть нельзя сказать, что Metro сделал наши старые приложения плохими или уродливыми. Metro приложения с их отсутствием границ у окна, группировкой страниц, лентами, панелями инструментов, простым меню и пользовательским интерфейсом, который они формируют, прекрасно вписывается в целевое оборудование. Я работал и разрабатывал приложения с лентами, закреплёнными окнами инструментов и MDI вкладками, которые выглядели красивыми и были интуитивно понятны. Стиль, который многие теперь считают устаревшим, служил очень хорошо на протяжении многих лет и, скорее всего, на некоторое время ему ещё найдётся место в будущем. Возьмите, например, любое из офисных приложений не в стиле Metro, и Вы будете чувствовать себя прекрасно, работая в них. На самом деле, честно говоря, я не могу себе представить, как будут выглядеть и вести себя Metro-версии Word или Excel.

Я говорю это, потому что слишком часто вижу, как разработчики принимают что-то новое и автоматически маркируют старые технологии, дизайн или платформу, плохими и неправильными. Это не тот случай, когда приложения Metro и следующая версия .NET Framework (4.5) не будут поддержать и применять технологии, которые мы используем сегодня. И, как Вы скоро узнаете, .NET жив и здоров в приложениях в стиле Metro. Кроме того, следует отметить, что разработка Metro и Visual Studio 11 ещё не закончена, и мы все ещё можем видеть изменения, как в стиле пользовательского интерфейса, так и в среде разработки.

Среда разработки приложений в стиле Metro

Для разработки приложений в стиле Metro потребуется Visual Studio 11 и Windows 8. На момент написания этой статьи Microsoft выпустила демонстрационную версию Windows 8 для пользователей (бету), а также бета-версию Visual Studio 11.

Диалоговое окно «Новый проект» 11-ой Visual Studio разбивается на языки, подобно тому, как это делает Visual Studio 2010; для Visual Basic и Visual C# появился новый тип проекта под названием «Windows приложение в стиле Metro». В этой статье я сосредоточу своё внимание на этом типе проекта. Выбор «Windows приложение в стиле Metro» в любом из этих двух языков позволит Вам создать приложение в стиле Metro с использованием C# или VB в сочетании с .NET API для Metro-приложений. Этот API-интерфейс содержит набор управляемых типов, используемых для построения Metro-приложений на XAML. Так что навыки WPF и Silverlight разработчиков (таких же, как и я) далеко не утратят свою значимость и будут иметь решающее значение в будущем при выборе этого пути разработки. .NET API для приложений в стиле Metro можно рассматривать как подмножество целого .NET Framework, но на самом деле, это разные вещи. .NET API для приложений в стиле Metro также служит уровнем абстракции между Вашим кодом и Windows Runtime (WinRT).

Новым языком в диалоговом окне «Новый проект» Visual Studio 11 является JavaScript. Вы также можете создать приложения в стиле Metro с использованием HTML5/CSS и JavaScript/jQuery. В этом случае Вы будете использовать библиотеку Windows для JavaScript. Это API JavaScript, который служит уровнем абстракции, между языком и WinRT. В этой статье я не буду рассматривать эту платформу.

Выберите «Windows приложение в стиле Metro» во вкладке C# в диалоговом окне «Новый проект». Сейчас в этой категории мне доступно пять новых типов проектов (см. рисунок 1). «Grid» и «Split» приложения предназначены, чтобы помочь Вам начать работу с некоторыми из наиболее часто используемых стилей навигации в Metro приложениях. Это важнее, чем Вы думаете, потому что если Вашей целью, в конечном счёте, является размещение приложения в Windows Marketplace, то оно будет проходить этап проверки, и соблюдение определенных общепринятых стандартов навигации и отображения стилей будет иметь решающее значение. Имейте в виду, на момент написания этой статьи Marketplace ориентирован на Metro-приложения для планшетов, но вскоре он будет расширен, чтобы включить приложения для Windows Phone 8.

Рисунок 1: Metro «Добавление нового проекта».

Характеристики

Список файлов перевода