Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Como implementar uma InputBox numérica em Windows Phone

From 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 05:42.
197 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×