×
Namespaces

Variants
Actions

Como implementar uma InputBox numérica em Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

Este artigo mostra como implementar uma inputbox numérica, que consegue trabalhar com números inteiros positivos/negativos, bem como valores float, em aplicações de WP8.

WP Metro Icon UI.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

Testado com
SDK: Windows Phone 8.0 SDK
Aparelho(s): Nokia Lumia

Compatibilidade
Plataforma(s): Windows Phone 8.0
Windows Phone 8
Windows Phone 7.5

Artigo
Tradução:
Por saramgsilva
Última alteração feita por hamishwillee em 01 Nov 2013

Contents

Introdução

Em geral podemos implementar InputBox numéricas para WP8, definindo os InputScope como sendo Number. Isto permite que o teclado apareça apenas com caracteres numéricos e com os sinais de operações numéricos, assim como os separados decimais. Esta implementação da InputBox não oferece outras formas de filtragem.

Este artigo mostra de forma simplificada a forma como filtrar inputs, que a InputBox pode fazer, tanto para valores negativos e positivos inteiros como para os valores "float". Este artigo também ilustra a simples forma de validar um intervalo. Tal InputBox é muito útil em vários cenários - por exemplos enquanto providência a latitude e longitude com input, como podemos ver nas imagens.

Wp8 numberInput.png

O exemplo é um artigo que tem sido implementado em alguns mapas de exemplos, disponíveis em Windows Phone 8 Mapas - Projetos de exemplos(*).

(*) Disponível apenas em inglês.

Geralmente, para obter o esperado, é preciso:

  1. Implementar a class NumberInputBox;
  2. Incluir o namespace da classe no elemento de raíz no xaml;
  3. Usar a NumberInputBox no XAML como se fosse texbox;

Implementar a NumberInputBox class

Para incluir uma nova classe no projeto, devemos clicar no projeto : "Add --> New item" que é visível no menu e selecionar "Class", se possível alterar o nome para NumberInputBox. De forma a que esta classe seja uma InputBox, a class que criamos irá derivar da TextBox como poderemos ver de seguida:

public class NumberInputBox : TextBox {}

Para ativar diferentes tipos de entrada, podemos definir uma enumeração que representa os tipos de entrada disponíveis, como mostrado abaixo.

public enum InputType
{
Integer = 0,
IntegerPositive = 1,
Float = 2,
FloatPositive = 3,
}

É necessário definir uma variável interna para que possamos definir o tipo de entrada para. Além disso, temos variáveis ​​internas para limitar os valores para uma entrada válida, assim como uma variável Boolean que se o input é válido ou não.

public InputType Type { get; set; }
public int MaxValue { get; set; }
public int MinValue { get; set; }
public bool ValueOk { get; set; }

Podemos, então, implementar o construtor para a classe. Dentro do construtor, iremos precisar de definir o scope do input para ter a certeza que iremos ter o teclado correcto. Será necessário definir o callback para o evento TextChanged. Que depois nós simplesmente define valores padrão para as variáveis ​​internas, de modo a certificar-se de que eles estão sempre válido.

public NumberInputBox(): base()
{
TextChanged += TextChangedEvent;
this.InputScope = new InputScope()
{
Names = { new InputScopeName() { NameValue = InputScopeNameValue.Number } }
};
this.Type = NumberInputBox.InputType.Integer;
this.MaxValue = this.MinValue = 0;
ValueOk = false;
}

Então o atual filto de entrada acontece dentro da função TextChangedEvent. Dentro desta função, nós simplesmente obtemos a entrada atual, passando isto pelo nosso próprio "parser" e então atribuímos de volta a visibilidade do texto. Depois de definir o valor, vamos verificar se temos valores max / min definidos, e verificamos a faixa de entrada e utilizando a cor para indicar se o valor está dentro do intervalo definido.

private void TextChangedEvent(object sender, TextChangedEventArgs e)
{
this.Text = ParseDouble(this.Text);
this.SelectionStart = this.Text.Length;
 
if (this.MaxValue != this.MinValue)
{
double d;
if (double.TryParse(this.Text, out d))
{
if (d < this.MinValue || d > this.MaxValue)
{
this.ValueOk = false;
this.Foreground = new SolidColorBrush(Colors.Red);
}
else
{
this.ValueOk = true;
this.Foreground = new SolidColorBrush(Colors.Black);
}
}
}
}

O código de análise é muito simples. Basicamente, leva o buffer de entrada e remove todos os caracteres que não são permitidos. Depois que ele retorna a string que só é permitido ter caracteres de entrada. O buffer é simples ciclo através de ciclo do primeiro caractere até o último.

Em cada ciclo, primeiro em cada validação é primeiro validado se o primeiro caracter é um sinal menos e este caracter é apenas permitido na primeira posição, sendo ignorado em qualquer outra posição. Além disso, se apenas positiva a entrada é permitido, então nenhum sinal negativo é aceite em qualquer posição.


A segunda verificação é de aceitar qualquer dígito-caracteres em qualquer posição do buffer. Se o número de entrada é um float, então a última verificação é permitir que o buffer contenha o separador decimal. Note-se que o separador decimal dependes na gobalização da UI, e tanto pode ser o "." como o ",".

String ParseDouble(string input)
{
if (input.Length > 0)
{
String outBut = "";
bool foundSeparator = false;
 
for (int i = 0; i < input.Length; i++)
{
if ((this.Type == NumberInputBox.InputType.Integer
|| this.Type == NumberInputBox.InputType.Float)
&& ((i == 0) && input[0] == '-'))
{
outBut = outBut + input[i];
}
else if ((input[i] >= '0' && input[i] <= '9'))
{
outBut = outBut + input[i];
}
else if (this.Type == NumberInputBox.InputType.Float
|| this.Type == NumberInputBox.InputType.FloatPositive)
{
if (foundSeparator == false)
{
string Sepa = CultureInfo.CurrentCulture.NumberFormat.CurrencyDecimalSeparator;
if (Sepa.Length > 0)
{
if (Sepa[0] == input[i] || '.' == input[i] || ',' == input[i])
{
outBut = outBut + Sepa[0];
foundSeparator = true;
}
}
}
}
}
return outBut;
}
else
{
return "";
}
}

Adicionar uma NumberInputBox ao nosso XAML

Primeiro é necessário adicionar o namespace ao ficheiro XAML. Por exemplo, se a class está definida sobre AreaSelector namespace, então apenas adicione o seguinte código no elemento de raiz do XAML:

xmlns:myns="clr-namespace:AreaSelector"

Para usar o controlo, instancie dois elementos do myns:NumberInputBox, neste caso iremos ter dois inputs para float type, um para a latitude e outro para longitude, vejamos o seguinte código:

<myns:NumberInputBox x:Name="LatitudeBox" Type="Float" MaxValue="90" MinValue="-90"/>
<myns:NumberInputBox x:Name="LongittudeBox" Type="Float" MaxValue="180" MinValue="-180"/>

Sumário

Vimos neste artigo como implementar InputBox numéricas em aplicações de WP8. Tais InputBox podem ser vantajosas para aceitar valores de input tais como latitude e longitude.

This page was last modified on 1 November 2013, at 08:42.
146 page views in the last 30 days.