Personalizar a interface do usuário de um aplicativo de lista do SharePoint para Windows Phone
Personalize a interface do usuário do Windows Phone gerada pelo modelo de Aplicativo de Lista do SharePoint para Windows Phone.
Aplicativos de lista do SharePoint criados usando o modelo de aplicativo para Windows Phone SharePoint lista baseiam-se na estrutura do Silverlight para Windows Phone. Todos os recursos fornecidos pela plataforma Silverlight em um telefone Windows estão disponíveis para os desenvolvedores para personalizar a interface do usuário (UI) de um aplicativo projetado para um Windows Phone da lista do SharePoint.
Importante
Se você estiver desenvolvendo um aplicativo para Windows Phone 8, deverá usar Visual Studio Express 2012 em vez do Visual Studio 2010 Express. Com exceção do ambiente de desenvolvimento, todas as informações neste artigo se aplicam à criação de aplicativos para Windows Phone 8 e Windows Phone 7. > Para obter mais informações, consulte Como configurar um ambiente para desenvolver aplicativos móveis para o SharePoint.
Criar um aplicativo de lista do SharePoint para personalizações de interface do usuário
Para os procedimentos a seguir, suponha que um servidor que executa o SharePoint Server tenha uma lista de Pedidos de Produto criada a partir do modelo de Lista Personalizada, semelhante à lista de pedidos de produto de exemplo usada em Como: Implementar lógica de negócios e validação de dados em um aplicativo Windows Phone para SharePoint. Para o aplicativo do Windows Phone amostra usado neste tópico, lista de ordens de produto em que baseia-se o aplicativo foi modificada para incluir campos adicionais. A lista de ordens de produto modificada usada para fins dos exemplos neste tópico foi criado com as colunas e os tipos de campo mostrados na tabela 1.
Tabela 1. Lista de pedidos de produtos modificados
| Coluna | Tipo | Obrigatório |
|---|---|---|
| Produto (ou seja, título) | Linha única de texto (texto) | Sim |
| Descrição | Linha única de texto (texto) | Não |
| Categoria de produto | Opção | Não |
| Quantidade | Número | Sim |
| Data da ordem | Data e hora (DateTime) | Não |
| Data de adequação | Data e hora (DateTime) | Não |
| Urgente | Booliano | Não |
| Número de contato | Linha única de texto (texto) | Não |
Siga os procedimentos em Como: criar uma Windows Phone aplicativo de lista do SharePoint para usar o modelo Windows Phone Aplicativo de Lista do SharePoint para gerar um aplicativo de lista do SharePoint como ponto de partida para as seguintes personalizações de interface do usuário. Especifique como a lista do SharePoint de destino para o aplicativo de uma lista que possua um esquema semelhante ao que está representado na tabela 1.
Substituir controles TextBox com controles de selecionador de data
Com base no projeto conforme gerados pelo modelo, os campos na lista designados como campos de data/hora (como, por exemplo, o campo Data do pedido na lista de ordens de produto de amostra) são vinculados por padrão a TextBox controles no formulário Editar (EditForm.xaml) e o novo formulário (NewForm.xaml) no aplicativo. A primeira melhora que você fará para a interface do usuário é facilitar inserindo valores de data para esses campos, substituindo seus controles associado TextBox por controles de DatePicker a partir do Silverlight para Windows Phone Toolkit. Você pode instalar o Silverlight para Windows Phone Toolkit no Site do CodePlex, um site de hospedagem para projetos de software de código aberto.
Para substituir os controles TextBox com controles de selecionador de data
No Microsoft Visual Studio 2010, se o projeto já não estiver aberto, abra o projeto é criado na seção anterior, baseado no modelo de aplicativo para Windows Phone SharePoint lista e o uso de uma lista do SharePoint como a lista de ordens de produto representada na tabela 1.
No menu projeto no Visual Studio, clique em Adicionar referência. Será exibida a caixa de diálogo Adicionar referência.
Na guia Procurar, navegue até o assembly Microsoft.Phone.Controls.Toolkit.dll instalado pelo Silverlight para Windows Phone Toolkit.
Observação
O assembly Microsoft.Phone.Controls.Toolkit.dll pode ser encontrado em %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\<MonthYear>\Bin em uma instalação padrão do Kit de Ferramentas, em que <MonthYear> pode ser algo como "Oct11", dependendo da versão do Kit de Ferramentas instalado. (Ou você pode encontrar os assemblies instalados pelo Kit de ferramentas no seu sistema clicando no botão Iniciar, apontando para Todos os programas, expandindo o item Microsoft Silverlight para Windows Phone Toolkit no menu Programas e, em seguida, clicando em binários.)
No Solution Explorer, selecione o arquivo de EditForm.xaml sob o nó exibições.
Pressione SHIFT + F7 (ou clique duas vezes no arquivo) para abrir o arquivo no designer.
No painel XAML do designer, adicione uma declaração de namespace para distinguir os controles no assembly toolkit à
<phone:PhoneApplicationPage>marca.<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">A única alteração à marcação padrão gerada pelo modelo é a adição da designação de namespace "xmlns:toolkit". Observe também que o valor do atributo Class aqui é baseado no nome do seu projeto. "ContosoSPListApp" é o nome desse projeto de exemplo. O valor desse atributo em seu projeto será diferente do valor aqui dependendo do nome do seu projeto.
No arquivo EditForm.xaml, localize o controle de StackPanel na marcação que contém os controles associados com o campo Data do pedido (designado como "Order_x0020_Date" no esquema XML para o campo). Por padrão, o modelo gera um controle TextBox e dois controles de TextBlock para campos de data/hora. A marcação para o controle de StackPanel e os controles que ele contém deve se parecer com a seguinte marcação.
<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>Substitua a seguinte marcação que controlam StackPanel e os controles que ele contém.
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <toolkit:DatePicker Header="Order Date" Value="{Binding [Order_x0020_Date], Mode=TwoWay}"> </toolkit:DatePicker> </StackPanel>Em seguida, localize (também em EditForm.xaml) o controle StackPanel na marcação que contém os controles associados ao campo de data de adequação (designado como "Fulfillment_x0020_Date" no esquema para o campo). A marcação para o StackPanel e os controles que ele contém deve se parecer com a seguinte marcação.
<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>Substitua a seguinte marcação que controlam StackPanel e os controles que ele contém.
<StackPanel Orientation="Vertical" Margin="0,5,0,5"> <toolkit:DatePicker Header="Fulfillment Date" Value="{Binding [Fulfillment_x0020_Date], Mode=TwoWay}"></toolkit:DatePicker> </StackPanel>Finalmente, você pode adicionar imagens de ícone de interface de usuário do Silverlight para Windows Phone Kit de ferramentas ao seu projeto. No Solution Explorer, selecione o nó que representa o projeto (chamado, por exemplo, "ContosoSPListApp").
No menu projeto no Visual Studio, clique em Nova pasta. Uma nova pasta é adicionada no nó do projeto. Nomeie a pasta "Toolkit.Content".
No Solution Explorer, selecione a pasta que você criou na etapa anterior.
No menu projeto, clique em Adicionar Item existente. Uma janela do Navegador de arquivo é aberto.
Navegue até a pasta onde as imagens de ícone suporte, ApplicationBar.Cancel.png e ApplicationBar.Check.png, foram instaladas pelo Silverlight para Windows Phone Toolkit.
Observação
As imagens estão em %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\<MonthYear>\Bin\Icons em uma instalação padrão do Kit de Ferramentas, em que <MonthYear> pode ser algo como "Oct11", dependendo da versão do Kit de Ferramentas instalado.
Selecione as duas imagens e clique em Adicionar. Os arquivos de imagem são adicionados ao projeto sob o nó da pasta Toolkit.Content.
Importante
[!IMPORTANTE] Para os componentes do Silverlight para Windows Phone Toolkit para poder usar as imagens de ícone, eles devem ser colocados no local no seu projetados conforme especificado nas etapas anteriores.
No Solution Explorer, selecione os dois arquivos de imagem sob a pasta Toolkit.Content.
Na Janela Propriedades, defina a propriedade Build Action para as imagens para "Content" e defina a propriedade de cópia para o diretório de saída para "Copiar se mais recente".
Observação
[!OBSERVAçãO] Se a Janela Propriedades não estiver visível, pressioneCTRL + We, em seguidaMPara exibir a janela em Visual Studio.
Se você iniciar o projeto (pressionandoF5) para implantá-lo no emulador do Windows Phone, você pode navegar para o formulário Editar para um item (por clicando em um item na página principal do modo de exibição de lista e clicando no botão Editar na Barra de aplicativos no aplicativo). Os campos de data/hora no formato estão agora associados com o controle de DatePicker, conforme mostrado na Figura 1.
Figura 1. Edit form with DatePicker control
O controle de DatePicker (realçado para o campo Data do pedido na Figura 1) parece muito com um controle TextBox com um associado TextBlock como um rótulo, exceto que, quando você clicar no controle DatePicker (ou toque em-lo em um dispositivo Windows Phone), o controle exibe uma página separada com controles para selecionar datas usando gestos, conforme mostrado na Figura 2.
Figura 2. Date chooser page
Clicar nas transferências de botão feito a data escolhida ao controle DatePicker no formulário Editar. Se você clicar no botão Salvar nesse formulário, os valores dos campos de data/hora associados aos controles DatePicker são atualizados na lista do SharePoint no servidor, como as propriedades de Value dos controles foram vinculadas a campos apropriados no arquivo EditForm.xaml no procedimento acima. Se você quisesse substitua TextBox controles DatePicker controles no novo formulário, basta repetir as etapas 4 a 10 do procedimento para o arquivo NewForm.xaml no projeto.
Adicione controles para suportar opções personalizadas Fill-in para campos de opção
Campos designados com o tipo de campo opção em uma lista do SharePoint podem ser configurados em um SharePoint Server para permitir que usuários especifiquem valores de opção personalizado (ou "Fill-in") para um campo, além de quaisquer valores de opção declarados que podem ser atribuídos a um campo opção quando ela é definida no servidor. Em projetos criados usando o modelo de aplicativo para Windows Phone SharePoint lista, os campos de opção não são renderizados por padrão para incluir o suporte de interface do usuário para inserir as opções de "Fill-in". Os procedimentos nesta seção, você irá adicionar controles de interface do usuário e código para seu aplicativo para oferecer suporte a inserção de valores de opção personalizado para o campo da categoria de produto.
Nos procedimentos a seguir, você irá:
- Adicione uma classe ( ContosoConverter) com lógica de conversão para processar dados a serem salvos o campo de escolha de categoria de produto.
- Adicione um membro de propriedade ( OtherCategoryValue) para a classe EditItemViewModel que fornece acesso a um valor string representando o valor de "preenchimento" para o campo de escolha. Este membro da propriedade servirá como a fonte em uma declaração de associação para um controle adicionado TextBox no formulário de edição.
- Adicione um controle RadioButton e um controle TextBox ao formulário de edição para que os usuários são capazes de especificar um valor de opção "Fill-in" para o campo da categoria de produto.
- Modifica o arquivo de code-behind, EditForm.xaml.cs, associado ao formulário Editar para registrar uma Editar campo valor conversor Definir função para campos de opção e implementar manipuladores de eventos para os controles adicionados ao formulário de edição.
Observação
Para obter mais informações sobre conversores de valor de campo, consulte Como dar suporte e converter tipos de campo do SharePoint para aplicativos Windows Phone.
Para adicionar uma classe para oferecer suporte à conversão de dados para campos de opção
No Solution Explorer, selecione o nó que representa o projeto (chamado, por exemplo, ContosoSPListApp).
No menu projeto em Visual Studio (ou Visual Studio Express para o Windows Phone), clique em Adicionar classe. A caixa de diálogo Adicionar Novo Item é aberto com o modelo de c# classe que já está selecionado.
Especifique um nome para o arquivo de classe (como, por exemplo, ContosoConverter.cs) e clique em Adicionar. O arquivo de classe é adicionado ao projeto e aberto para edição.
Substitua o conteúdo do arquivo com o código a seguir.
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; } } }Salve o arquivo.
A função de SetConvertedChoiceEditFieldValue aqui é usada para a implementação do Editar campo valor conversor Definir função delegado registrado para campos de opção no aplicativo. A função itera através da coleção de objetos ChoiceFieldViewModel passado como o argumento fieldValue. objetos de ChoiceFieldViewModel são usados para representar valores individuais de campos de opção em projetos com base no modelo de aplicativo para Windows Phone SharePoint lista. Cada objeto tem uma propriedade Name que representa uma determinada opção e uma propriedade Boolean que indica se um valor de opção determinado (of esses valores disponíveis para um campo como foi definido) é o valor especificado para o campo ( IsChecked). A função SetConvertedChoiceEditFieldValue determina se um objeto da coleção ChoiceFieldViewModel estiver marcado ou se a propriedade Name de um objeto corresponde a um valor personalizado especificado para o campo da categoria de produto. Nesse caso, a propriedade Name desse objeto ChoiceFieldViewModel é usada para definir o valor do campo. Caso contrário, um valor personalizado especificado (a partir do argumento customCategory ) é definido como o valor do campo.
Em seguida, você adicionará um membro de propriedade para a classe EditItemViewModel que fornece acesso ao valor "Fill-in" para um campo opção (ou uma cadeia de caracteres vazia se o valor especificado do campo opção é uma das opções disponíveis definidas para o campo no servidor).
Para adicionar um membro de propriedade para a classe EditItemViewModel
No Solution Explorer, sob o nó de pasta ViewModels, selecione o arquivo de EditItemViewModel.cs.
PressioneF7(ou duas vezes no arquivo) para abrir o arquivo para edição.
Após as diretivas de using padrão no arquivo, adicione a seguinte diretiva.
using System.Collections.ObjectModel;Adicione a implementação de um membro de propriedade (chamado OtherCategoryValue) a seguir ao arquivo, dentro do bloco de código (delimitado abrindo e fechando chaves) que implementa a classe 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; } }Salve o arquivo.
Em seguida, você irá adicionar controles ao formulário Editar e configurar esses controles para suportar inserindo valores personalizados para o campo da categoria de produto.
Para adicionar e configurar os controles de interface do usuário para inserir valores de campo personalizado de opção
No Solution Explorer, selecione o arquivo de EditForm.xaml sob o nó da pasta de modos de exibição.
PressioneSHIFT + F7(ou duas vezes no arquivo) para abrir o arquivo no designer.
Localize o controle de StackPanel que contém os controles (um controle TextBlock e um controle ListBox ) para o campo da Categoria de produto da lista do SharePoint de pedidos de produto de renderização. Adicionar e configurar um controle RadioButton e outro controle TextBox no contêiner StackPanel, conforme mostrado no código a seguir.
<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>Com o arquivo de EditForm.xaml selecionado no Solution Explorer, pressioneF7Para abrir o seu arquivo code-behind associado, EditForm.xaml.cs, para edição.
Modifica o construtor no arquivo para adicionar um manipulador, EditForm_Loaded, para o evento Loaded. O construtor modificado deve corresponder o construtor no código a seguir.
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); }Adicione implementação EditForm_Loaded manipulador de eventos a seguir para o arquivo, dentro do bloco de código (delimitado abrindo e fechando chaves) que implementa a classe de EditForm parcial.
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); }Neste código, a instrução lambda usada na chamada para o método RegisterEditFieldValueConverter da classe Converter determina se o controle rbOtherCategoryRadioButton (adicionado na Etapa 3) é verificado. Nesse caso, o valor na propriedade Text do controle TextBox txtOtherCategory será passado para a função SetConvertedChoiceEditFieldValue. Se rbOtherCategory não estiver marcada, uma cadeia de caracteres vazia é passada. Se rbOtherCategory estiver marcada, mas nada realmente é especificado pelo usuário na caixa de texto txtOtherCategory, um valor igual a "(não especificado)" é passado.
Por fim, adicione manipuladores para os eventos verificados e desmarcados do rbOtherCategoryRadioButton para mostrar ou ocultar o controle TextBox usado para fornecer valores personalizados de Categoria de Produto. Incluem as seguintes implementações para esses manipuladores no arquivo EditForm.xaml.cs, novamente dentro do bloco de código que implementa a classe de EditForm parcial.
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; }Salve o arquivo.
Se você compile o projeto e implantá-lo em um emulador do Windows Phone (pressionandoF5), você pode ver que, no formato editar um controle de RadioButton é adicionado para cada valor de opção designado na definição de campo da categoria de produto, com base no padrão lógica de renderização de UI para campos de opção. Além disso, outro controle RadioButton (rotulados como "outras:" na interface do usuário) é incluído para os usuários sejam capazes de especificar os valores de opção personalizado. Se o controle adicionais RadioButton estiver marcado, um controle de TextBox é exibido para inserir o valor desejado.
Para itens na lista de ordens de produto que estão já está associada a um valor de categoria de produto personalizado e, em seguida, editado no app, a edição de formulário é processado com o controle adicionais RadioButton já foi verificado e o controle de TextBox exibindo o valor personalizado já está visível.