Настройка пользовательского интерфейса для приложения списка SharePoint на устройстве с Windows Phone
Настройте пользовательский интерфейс Windows Phone, созданный с помощью шаблона приложения списка SharePoint для Windows Phone.
Приложения списка SharePoint из шаблона приложения списка SharePoint для Windows Phone основаны на платформе Silverlight для Windows Phone. Все возможности, предоставляемые платформы Silverlight на ОС Windows Phone, доступны для разработчиков по настройке пользовательского интерфейса (UI) приложения списка SharePoint, предназначенной для Windows Phone.
Важно!
При разработке приложения для Windows Phone 8 необходимо использовать Visual Studio Express 2012 вместо Visual Studio 2010 Express. За исключением среды разработки, вся информация в этой статье относится к созданию приложений для Windows Phone 8 и Windows Phone 7. > Дополнительные сведения см. в разделе Практическое руководство. Настройка среды для разработки мобильных приложений для SharePoint.
Создание приложения списка SharePoint для настройки интерфейса пользователя
Для выполнения следующих процедур предположим, что на сервере с SharePoint Server есть список заказов на продукты, созданный на основе шаблона Пользовательского списка, аналогичный примеру списка заказов на продукты, используемого в разделе Практическое руководство. Реализация бизнес-логики и проверки данных в приложении Windows Phone для SharePoint. Для примера приложения Windows Phone, используемых в этом разделе в списке заказов продукта это приложение на основе был изменен дополнительные поля. Измененный список заказов на продукт, используемый для целей примеров, описанных в этом разделе будет создан со столбцами и типы полей, показано в таблице 1.
Таблица 1. Список измененных заказов на продукты
| Столбец | Тип | Обязательный |
|---|---|---|
| Продукт (например, заголовок) | Однострочный текст (Текст) | Да |
| Описание | Однострочный текст (Текст) | Нет |
| Категория продуктов | Варианты | Нет |
| Количество | Число | Да |
| Дата заказа | Дата и время (DateTime) | Нет |
| Дата выполнения | Дата и время (DateTime) | Нет |
| Срочный | Логическое | Нет |
| Номер контакта | Однострочный текст (Текст) | Нет |
Следуйте инструкциям из раздела Практическое руководство. Создание приложения списка SharePoint для Windows Phone , чтобы использовать шаблон приложения списка SharePoint для Windows Phone для создания приложения списка SharePoint в качестве отправной точки для следующих настроек пользовательского интерфейса. Укажите в качестве целевого списка SharePoint для приложения, список, содержащий схемы, аналогичную что представлен в таблице 1.
Замена элемента управления TextBox с элементами управления DatePicker
На основе проекта, созданной с помощью шаблона, полей в списке обозначены как поля даты и времени (как, например поле Дата заказа в списке заказов продукта примера), тем самым соглашаетесь соблюдать по умолчанию для элементов управления TextBox в форме редактирования (EditForm.xaml) и новая форма (NewForm.xaml) в приложении. Для упрощения ввода значения дат для таких полей, заменив их связанных TextBox элементы управления с элементами управления DatePicker с Silverlight для Windows Phone Toolkit первый улучшения, внесенные в пользовательском интерфейсе. Вы можете установить Silverlight для Windows Phone Toolkit с веб-сайта CodePlex, сайта размещения для проектов программного обеспечения с открытым кодом.
Замена элемента управления TextBox с элементами управления DatePicker
В Microsoft Visual Studio 2010 Если проект еще не открыт, откройте проект, созданный в предыдущем разделе, на основе шаблона приложения списка SharePoint для Windows Phone и с помощью списка SharePoint как список заказов на продукт, представленный в таблице 1.
В Visual Studio в меню проект выберите команду Добавить ссылку. Откроется диалоговое окно Добавить ссылку.
На вкладке Обзор перейдите к Microsoft.Phone.Controls.Toolkit.dll сборки, установленные Toolkit Silverlight для Windows Phone.
Примечание.
Сборку Microsoft.Phone.Controls.Toolkit.dll можно найти в папке %PROGRAMFILES%(x86)\Microsoft SDK\Windows Phone\v7.1\Toolkit\<MonthYear>\Bin в стандартной установке набора средств, где <MonthYear> может быть чем-то вроде "Oct11" в зависимости от установленной версии набора средств. (Или можно найти сборки, установленные набор средств на компьютере, нажмите кнопку Пуск, Все программы, развертывание Microsoft Silverlight для Windows Phone Toolkit элемента в меню программы и нажав кнопку двоичные файлы.)
В Обозревателе решений выберите файл EditForm.xaml в разделе узел представления.
Нажмите клавишу SHIFT + F7 (или дважды щелкните файл), чтобы открыть файл в конструкторе.
В области XAML конструктора добавьте объявление пространства имен для различения элементов управления в сборке Toolkit в
<phone:PhoneApplicationPage>тег.<phone:PhoneApplicationPage x:Class="ContosoSPListApp.EditForm" 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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 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" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True" x:Name = "EditPage">Единственное отличие разметка по умолчанию, созданной с помощью шаблона является добавление обозначение пространство имен "xmlns:toolkit". Также Обратите внимание на то, что значение атрибута Class основана на имя проекта. «ContosoSPListApp» это имя проекта этого примера. Значение этого атрибута в вашем проекте отличается от значения в зависимости от имени проекта.
В файле EditForm.xaml найдите элемент управления StackPanel в разметка, которая содержит элементы управления, связанные с полем Дата заказа (обозначены как "Order_x0020_Date" в XML-схему для поля). По умолчанию шаблон создает элемент управления TextBox и два элемента управления TextBlock для поля даты и времени. Разметка для элемента управления StackPanel и элементов управления, которые он содержит должен иметь следующую разметку:
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource PhoneTextNormalStyle}">Order Date</TextBlock> <TextBox Height="Auto" Style="{StaticResource TextValidationTemplate}" FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" HorizontalAlignment="Left" Name="txtOrder_x0020_Date" Text="{Binding [Order_x0020_Date], Mode=TwoWay, ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True}" TextWrapping="Wrap" /> <TextBlock FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding DateTimeFormat}" /> </StackPanel>Замените этот элемент управления StackPanel и элементов управления, которые он содержит следующую разметку.
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <toolkit:DatePicker Header="Order Date" Value="{Binding [Order_x0020_Date], Mode=TwoWay}"> </toolkit:DatePicker> </StackPanel>Затем найдите (а также в EditForm.xaml) элемента управления, StackPanel разметка, которая содержит элементы управления, связанные с полем Дата выполнения (обозначены как "Fulfillment_x0020_Date" в схеме для поля). Разметка для StackPanel и элементов управления, которые он содержит должен иметь следующую разметку:
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource PhoneTextNormalStyle}">Fulfillment Date</TextBlock> <TextBox Height="Auto" Style="{StaticResource TextValidationTemplate}" FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" HorizontalAlignment="Left" Name="txtFulfillment_x0020_Date" Text="{Binding [Fulfillment_x0020_Date], Mode=TwoWay, ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True}" TextWrapping="Wrap" /> <TextBlock FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding DateTimeFormat}" /> </StackPanel>Замените этот элемент управления StackPanel и элементов управления, которые он содержит следующую разметку.
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <toolkit:DatePicker Header="Fulfillment Date" Value="{Binding [Fulfillment_x0020_Date], Mode=TwoWay}"></toolkit:DatePicker> </StackPanel>И, наконец можно добавить изображения значка интерфейс пользователя из набора Silverlight для Windows Phone в проект. В Обозревателе решений выберите узел, представляющий проект (с именем, например, "ContosoSPListApp").
В меню проект в Visual Studio нажмите кнопку Создать папку. Новую папку добавляется в узле проекта. Назовите папку «Toolkit.Content».
В Обозревателе решений выберите папку, созданную на предыдущем шаге.
В меню проект выберите пункт Добавить существующий элемент. Откроется окно Браузера файла.
Перейдите к папке, где ApplicationBar.Cancel.png и ApplicationBar.Check.png, поддерживающей значки, установленных с Toolkit Silverlight для Windows Phone.
Примечание.
Образы находятся в папке %PROGRAMFILES%(x86)\Microsoft SDK\Windows Phone\v7.1\Toolkit\<MonthYear>\Bin\Icons в стандартной установке набора средств, где <MonthYear> может быть чем-то вроде "Oct11" в зависимости от установленной версии набора.
Установите оба изображения и нажмите кнопку Добавить. Файлы изображений добавляются в проект в узле папка Toolkit.Content.
Важно!
[!Важно!] Для компонентов Silverlight для Windows Phone набора инструментов должны иметь возможность использовать изображения значка, они должны быть размещены в расположении в вашей планируемый как указано на предыдущем шаге.
В Обозревателе решений выберите оба файла изображения в папке Toolkit.Content.
Окно "Свойства" установите для свойства Действие при построении изображений "Содержимого" и присвойте свойству Копировать в выходной каталог для "Копировать, если новее".
Примечание.
[!Примечание] Если Окно "Свойства" не отображается, нажмите клавишуCTRL+Wа затемPЧтобы открыть окно в Visual Studio.
При запуске проекта (нажав сочетание клавишF5) для развертывания на эмулятора Windows Phone, можно перейти к форма редактирования элемента (, щелкнув элемент в главной страницы представления списка и нажмите кнопку Изменить в Строке приложения в приложении). Поля даты и времени в формате, теперь связанный с элементом управления DatePicker, как показано на рисунке 1.
Рис. 1. Форма редактирования с элементом управления DatePicker
Элемент управления DatePicker (с выделением для поля Дата заказа на рис. 1) имеет вид, как элемент управления TextBox с помощью связанных TextBlock как метка, за исключением того, что если щелкните элемент управления DatePicker (или коснитесь ее на устройстве Windows Phone), элемент управления отображает отдельная страница с элементами управления для выбора даты с использованием жестов, как показано на рисунке 2.
Рис. 2. Страница выбора даты
Щелчок передачи кнопки Готово выбранной даты в DatePicker элемент управления в форме редактирования. После нажатия кнопки Сохранить в данной форме значения поля даты и времени, связанные с элементами управления DatePicker обновляются в списке SharePoint на сервере, так как свойства Value элементов управления были привязаны к соответствующим полям в файл EditForm.xaml в предыдущей процедуре. Если вы хотите заменить TextBox элементы управления с элементами управления DatePicker в виде новой, будет повторите шаги 4 - 10 процедуры для файла NewForm.xaml в проекте.
Добавление элементов управления для поддержки настраиваемых замещение вариантов для выбора.
Поля, обозначенные с типом поля выбора в списке SharePoint можно настроить на сервере SharePoint, чтобы пользователи могли определить настраиваемые (или «замещение») выбора значения для поля, в дополнение к все объявленные выбора значения, которые можно назначить для поля выбора при определении на сервере. В проектах, созданных на основе шаблона приложения списка SharePoint для Windows Phone по умолчанию для поддержки интерфейса пользователя для ввода «замещение» параметры не отображаются поля Choice. В процедурах этого раздела добавляемого элементы управления пользовательского интерфейса и кода ваше приложение для поддержки ввода значений настраиваемого выбора в поле категории продуктов.
В следующих процедурах выполним следующие задачи:
- Добавьте в класс ( ContosoConverter) с логикой преобразования данных процесса сохраняется в поле выбора категории продукта.
- Добавьте свойство члена ( OtherCategoryValue) класс EditItemViewModel, который предоставляет доступ к string, представляющее значение "замещение" для поля выбора. Этот член свойство будет служить источником в объявлении привязки для элемента управления добавлены TextBox в форме редактирования.
- Добавьте элемент управления RadioButton и управления TextBox форме редактирования для пользователи должны иметь возможность указывать значение "замещение" выбора в поле категории продуктов.
- Измените файл фонового кода EditForm.xaml.cs, связанного с формой редактирования для регистрации изменить поля значение конвертера задать функцию для полей Choice и реализация обработчиков событий для элементов управления в форме редактирования.
Примечание.
Дополнительные сведения о преобразователях значений полей см. в статье Практическое руководство. Поддержка и преобразование типов полей SharePoint для приложений Windows Phone.
Добавление класса для поддержки преобразования данных для выбора.
В Обозревателе решений выберите узел, представляющий проект (с именем, например,ContosoSPListApp).
В Visual Studio (или Visual Studio Express для Windows Phone) в меню проект выберите пункт Добавление класса. Откроется диалоговое окно Добавление нового элемента с помощью C# класс шаблона уже выбраны.
Укажите имя для файла класса (как, например, ContosoConverter.cs) и нажмите кнопку Добавить. Файл класса будет добавлен в проект и открыт для редактирования.
Замените содержимое файла следующим кодом.
using System; using System.Net; using System.Windows; using System.Collections.ObjectModel; using Microsoft.SharePoint.Phone.Application; using Microsoft.SharePoint.Client; namespace SPListAppUICustomization { public class ContosoConverter { // Edit Field Value Converter SET function for Choice fields. public static void SetConvertedChoiceEditFieldValue(string fieldName, object fieldValue, ListItem item, ConversionContext context, string customCategory) { ObservableCollection<ChoiceFieldViewModel> choices = fieldValue as ObservableCollection<ChoiceFieldViewModel>; bool isCustomValue = true; string specifiedChoice = string.Empty; if (choices != null) { foreach (ChoiceFieldViewModel choiceItem in choices) { if ((choiceItem.IsChecked == true) || (choiceItem.Name.Equals(customCategory, StringComparison.CurrentCultureIgnoreCase))) { specifiedChoice = choiceItem.Name; isCustomValue = false; break; } } if (isCustomValue == true) { specifiedChoice = customCategory; } } else { specifiedChoice = customCategory; } item[fieldName] = specifiedChoice; } } }Сохраните файл.
Функция SetConvertedChoiceEditFieldValue используется для реализации изменить поля значение конвертера задать делегат функции, зарегистрированные для выбора полей в приложении. Функция итерацию по коллекции объектов ChoiceFieldViewModel, переданное как аргумент fieldValue. объекты ChoiceFieldViewModel используются для представления отдельных значений для полей выбора проектов на основе шаблона приложения списка SharePoint для Windows Phone. Каждый объект имеет свойство Name, представляющее данного выбора и логическое свойство ( IsChecked), указывающее, является ли данный вариант значение (эти значения для поля, которое было определено) значение, указанное в поле. Функция SetConvertedChoiceEditFieldValue определяет, установлен ли объект ChoiceFieldViewModel в коллекции или совпадает ли свойство Name объекта указанного пользовательское значение для поля Категория продуктов. Если это так, свойство Name этого объекта ChoiceFieldViewModel используется для установки значения поля. В противном случае значение указанного настраиваемого (из аргумента customCategory ) имеет значение как значение поля.
Далее вы добавите участником свойство EditItemViewModel класс, который предоставляет доступ к значению "замещение" для поля выбора (или пустая строка, если указанное значение поля выбора это один из доступных вариантов, определенные для поля на сервере).
Добавление элемента свойства в класс EditItemViewModel
В Обозревателе решений в узле папка ViewModels выберите файл EditItemViewModel.cs.
КлавишиF7(или дважды щелкните файл) откройте файл для редактирования.
После директив using по умолчанию в файле добавьте следующую директиву.
using System.Collections.ObjectModel;Добавьте следующие реализации члена свойства (с именем OtherCategoryValue) в файл в блоке кода (обозначенного открывающих и закрывающих скобок), который реализует класс EditItemViewModel.
public string OtherCategoryValue { get { string specifiedCategory = string.Empty; // See if specified Choice field value is one of the available values // from the List ViewModel. If it is, return an empty string. ObservableCollection<ChoiceFieldViewModel> choicesCollection = this["Product_x0020_Category"] as ObservableCollection<ChoiceFieldViewModel>; if (choicesCollection != null && choicesCollection.Any(choice => choice.IsChecked)) { return specifiedCategory; } // If Choice field value is not one of the values from the List ViewModel, // get the value from the underlying list item and return value as string. specifiedCategory = SharePointListItem.FieldValuesAsText["Product_x0020_Category"]; return specifiedCategory; } }Сохраните файл.
Затем будет добавление элементов управления на форме редактирования и настроить эти элементы управления для поддержки ввода пользовательские значения для поля Категория продуктов.
Чтобы добавить и настроить элементы управления пользовательского интерфейса для ввода значений настраиваемого поля выбора
В Обозревателе решений выберите файл EditForm.xaml в узле папка представлений.
КлавишиSHIFT + F7(или дважды щелкните файл) для открытия файла в конструкторе.
Найдите элемент управления StackPanel, который содержит элементы управления (элемент управления TextBlock и элемент управления ListBox ) для отрисовки поля Категория продуктов из списка SharePoint заказы продукта. Добавление и настройка элемента управления RadioButton и другим элементом управления TextBox в контейнер StackPanel, как показано в следующем коде.
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Style="{StaticResource PhoneTextNormalStyle}"> Product Category</TextBlock> <ListBox MaxHeight="400" Width="Auto" x:Name="lstBoxProduct_x0020_Category" ItemsSource="{Binding [Product_x0020_Category]}"> <ListBox.ItemTemplate> <DataTemplate> <RadioButton FontSize="{StaticResource PhoneFontSizeNormal}" HorizontalAlignment="Left" GroupName="Product_x0020_Category" Content="{Binding Name}" IsChecked="{Binding IsChecked, Mode=TwoWay}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <!-- The following two controls added to support UI Customization for Choice field. --> <RadioButton x:Name="rbOtherCategory" FontSize="{StaticResource PhoneFontSizeNormal}" HorizontalAlignment="Left" GroupName="Product_x0020_Category" Content="Other:" IsChecked ="True" /><TextBox x:Name="txtOtherCategory" Text="{Binding OtherCategoryValue}" FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" HorizontalAlignment="Left" TextWrapping="Wrap" Visibility="Visible" /> </StackPanel>С помощью файла EditForm.xaml, выбранного в Обозревателе решений нажмите клавишуF7Чтобы открыть файл его выделенным кодом EditForm.xaml.cs, для редактирования.
Измените конструктор в файл, чтобы добавить обработчик EditForm_Loaded, для события Loaded. Измененные конструктор должна соответствовать конструктор в следующем коде.
public EditForm() { InitializeComponent(); viewModel = App.MainViewModel.SelectedItemEditViewModelInstance; if (!viewModel.IsInitialized) { viewModel.InitializationCompleted += new EventHandler<InitializationCompletedEventArgs>(OnViewModelInitialization); viewModel.Initialize(); } else { this.DataContext = viewModel; } // Adding handler for Loaded event. this.Loaded += new RoutedEventHandler(EditForm_Loaded); }Добавьте следующие реализации обработчика событий EditForm_Loaded файл с именем в блоке кода (обозначенного открывающих и закрывающих скобок), который реализует разделяемый класс EditForm.
private void EditForm_Loaded(object sender, RoutedEventArgs e) { // Register EditFieldValueConverter SET function on Choice fields. Converter.RegisterEditFieldValueConverter(FieldType.Choice, (string fieldName, object fieldValue, ListItem item, ConversionContext context) => { string otherCategoryValue = string.Empty; if (this.rbOtherCategory.IsChecked == true) { otherCategoryValue = this.txtOtherCategory.Text.Trim(); if (string.IsNullOrWhiteSpace(OtherCategoryValue)) { otherCategoryValue = "(Unspecified)"; } } ContosoConverter.SetConvertedChoiceEditFieldValue(fieldName, fieldValue, item, context, otherCategoryValue); }); // Adding RadioButton event handlers here because the // txtOtherCategory TextBox will be loaded and available at this point. this.rbOtherCategory.Checked += new RoutedEventHandler(rbOtherCategory_Checked); this.rbOtherCategory.Unchecked += new RoutedEventHandler(rbOtherCategory_Unchecked); }В этом коде лямбда-оператор, используемый в вызове метода RegisterEditFieldValueConverter класса Converter , определяет, установлен ли флажок элемента управления rbOtherCategoryRadioButton (добавленного на шаге 3). В этом случае значение в свойстве Text элемента управления textBox txtOtherCategory передается функции SetConvertedChoiceEditFieldValue. Если rbOtherCategory не установлен, передается пустая строка. Если установлен флажок rbOtherCategory, но ничего не фактически не указан пользователем в текстовом поле txtOtherCategory, передается значение "(не определено)".
Наконец, добавьте обработчики для событий Checked и Unchecked в rbOtherCategoryRadioButton , чтобы отобразить или скрыть элемент управления TextBox , используемый для предоставления пользовательских значений категории продукта. Включают следующие реализации для этих обработчиков в файле EditForm.xaml.cs еще раз в блоке кода, который реализует разделяемый класс EditForm.
private void rbOtherCategory_Checked(object sender, RoutedEventArgs e) { this.txtOtherCategory.Visibility = System.Windows.Visibility.Visible; this.txtOtherCategory.Focus(); } private void rbOtherCategory_Unchecked(object sender, RoutedEventArgs e) { this.txtOtherCategory.Visibility = System.Windows.Visibility.Collapsed; }Сохраните файл.
Если вы выполните построение проекта и его развертывание на эмулятора телефона Windows (нажав сочетание клавишF5), можно увидеть, что в форме редактирования RadioButton добавления элемента управления для каждого choice значение, определенное в определении поля Категория продуктов на основе по умолчанию логики обработки пользовательского интерфейса для полей Choice. Кроме того, другой элемент управления RadioButton (помечены как "другие:" в пользовательском Интерфейсе) включены пользователи должны иметь возможность указать значения для настраиваемого выбора. Если установлен элемент управления дополнительные RadioButton, элемент управления TextBox отображается для ввода значение.
Для элементов в списке заказов на продукт, который уже связаны с пользовательское значение Категория продукта и нажмите Редактировать в приложении редактирования, форма отображается с RadioButton дополнительные элементы управления установлен и TextBox отображение пользовательское значение уже видимой.