Несколько дней назад Рич Данбар (Rich Dunbar) написал пост о том, как начать работу с Windows Phone Development, и этот пост стал ужасно вирусным. Теперь причина в том, что Рич в свое свободное время спонсирует и организует мероприятия для Nokia с целью продвижения разработки для Windows Phone и в качестве награды получит для вас устройство Nokia Device и App Hub Token. Довольно приятный приз за обучение написанию приложений для Windows Phone.
Этот пост является довольно хорошим ресурсом о том, где взять то, что вам нужно, чтобы начать и как получить приз. Вот выдержка …
Каждый раз, когда я пишу в Твиттере о том, что новые разработчики Windows Phone могут получить бесплатный регистрационный токен Microsoft App Hub (стоимостью 99 долларов) и замечательное устройство Nokia Lumia dev (в настоящее время у меня Lumia 800), я получаю много «Я действительно хочу, чтобы я может сделать приложение «ответы. Поэтому я пишу этот пост, чтобы вы знали, с чего начать и какие инструменты доступны, чтобы помочь вам добиться успеха в спешке
Шаг 1. Загрузите и установите необходимый SDK, обновление SDK и набор инструментов Silverlight для разработки под Windows Phone.
WP7 SDK 7.1: http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570
WP7 SDK 7.1.1 Обновление: http://www.microsoft.com/en-us/ download / details.aspx? id = 29233 Набор инструментов
Silverlight для Windows Phone: http://silverlight.codeplex.com/releases/view/75888
Шаг 2. Добавьте в закладки или добавьте в избранное следующие сайты, содержащие ресурсы, примеры кода, учебные пособия, шаблоны, значки и многое другое, чтобы помочь вам начать работу и продолжить разработку.
В Орландо 10 августа он проводит мероприятие, которое охватывает многое, если не все посты, шаг за шагом. Зарегистрируйтесь здесь, если вы находитесь в этой области: Nokia Meetup — Orlando, FL | 10 августа 2012 г. — встреча http://bit.ly/NHchzF .
Что я хотел сделать с этим постом, так это дать вам то, что, как мне кажется, нужно знать при разработке приложений для Windows Phone, и это шаблон проектирования MVVM с использованием MVVM Light от Laurent Bugnion . Итак, здесь идет.
Есть несколько других доступных MVVM-фреймворков, но это, безусловно, мой любимый, и фактически он также использовался Amazon в своем приложении Kindle для Windows Phone.
Начните с перехода сюда и установка последней версии, это установит шаблоны в Visual Studio и то, что вам нужно для выполнения шагов этого пошагового руководства, а также будущие приложения, которые я с нетерпением жду.
Создание приложения
Откройте Visual Studio (я использую 2010 для этого), выберите «Новый проект» и в установленных шаблонах вы увидите MVVMLight (WP71).
 |
| Вы заметите, что MVVM Light поддерживает WP7 и WP7.1, а также Windows 8! |
Я оставил название проекта MVVMLight1 только для примера. Идем дальше и нажимаем ОК и создаем проект. Прежде чем написать дополнительный код, давайте просто нажмем F5 и убедимся, что проект компилируется и запускается «тестовая» начальная страница. Это обеспечивает работоспособность шаблона / каркаса и всех компонентов MVVM Light. Если это так, вы должны увидеть следующее:
Соединение View и View-Model
Сначала давайте посмотрим на вид. Откройте MainPage.xaml и посмотрите на строку 17. Самым важным элементом MVVM является установка DataContext для представления. Это позволяет представлению знать, где искать его данные или привязки.
<phone:PhoneApplicationPage x:Class="MvvmLight1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Main, Source={StaticResource Locator}}">
You’ll notice that instead of binding to an object directly, the DataContext is set to a StaticResource Property called Main within Locator. We’ll put that aside for now until we cover the rest of the information here in the view.
Next, if you move down to line 32, you’ll see where the view is binding to properties in the View-Model.
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle"
Text="{Binding ApplicationTitle}"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="{Binding PageName}"
Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<Grid x:Name="ContentGrid"
Grid.Row="1">
<TextBlock Text="{Binding Welcome}"
Style="{StaticResource PhoneTextNormalStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="40" />
</Grid>
By setting the Text property equal to {Binding Welcome} for example it is telling the view to get the value from the View-Model which is subsequently set in the DataContext of the View as stated above. So in looking at ViewModel/MainViewModel.cs in the solution explorer you’ll see that that value is set to «Welcome to MVVM Light».
public string Welcome
{
get
{
return "Welcome to MVVM Light";
}
}
ViewModelLocator
One thing that I’ll state is that other than adding additional views, I almost never touch the ViewModelLocator code, it’s thoughtless when it comes to the core app development.
<Application.Resources>
<vm:ViewModelLocator x:Key="Locator"
d:IsDataSource="True" />
</Application.Resources>
Adding a Second Page
MvvmView (WP7) and name it SecondPageView.xaml and click ok. You’ll notice that the structure, DataContext, etc is exactly the same of MainPage.xaml, essentially it’s a template and easy to change.
MvvmViewModel (WP7), n
ame the View-Model «SecondPageViewModel.cs» and click Add.
mvvmlocatorproperty
private static ViewModelType _viewModelPropertyName;
/// <summary>
/// Gets the ViewModelPropertyName property.
/// </summary>
public static ViewModelType ViewModelPropertyNameStatic
{
get
{
if (_viewModelPropertyName == null)
{
CreateViewModelPropertyName();
}
return _viewModelPropertyName;
}
}
Now the snippet will highlight the ViewModelType identifier first and you will want to change this to SecondPageViewModel, then hit tab. Second, change the _viewModelPropetyName to _viewModelSecondPage and hit tab. Finally, you will be navigated to the comment portion for the ViewModelPropertyName and change this to SecondPageViewModel. When you are done it should look like this…
private static SecondPageViewModel _viewModelSecondPage;
/// <summary>
/// Gets the ViewModelSecondPage property.
/// </summary>
public static SecondPageViewModel ViewModelSecondPageStatic
{
get
{
if (_viewModelSecondPage == null)
{
CreateViewModelSecondPage();
}
return _viewModelSecondPage;
}
}
Ok, now a little work to do to make this addition complete. Need to add » CreateViewModelSecondPage();» to the constructor just under «CreateMain();». This ensures that the instance of the new View-Model is created.
Next, one draw back is that the snippet creates a duplicate of «Cleanup()», so if you get the following error:
Type ‘MvvmLight1.ViewModel.ViewModelLocator’ already defines a member called ‘Cleanup’ with the same parameter types
DataContext="{Binding ViewModelName, Source={StaticResource Locator}}">
DataContext="{Binding SecondPageViewModel, Source={StaticResource Locator}}">
Part 2 we’ll see how to add a button on the first page to navigate to the second page which will cover navigation and messaging.
Download code for Part 1 here