Criando uma interface do usuário interativa
Nas lições anteriores, você criou uma interface do usuário de formulário simples, solicitando que o usuário insira um nome e, com um botão, exibiu uma saudação. Nesta lição, você torna o formulário um pouco mais fácil de usar, desativando ou ocultando o botão Enviar até que pelo menos três caracteres tenham sido inseridos.
Primeiro, vamos examinar exatamente quando o MainPageLogic.UserName valor é definido através da ligação.
1. Coloque um ponto de interrupção
Abra MainPageLogic.cs o arquivo e localize a linha que contém a UserName propriedade.
public string UserName { get; set; }
Defina um ponto de interrupção no setter movendo o cursor dentro do set texto e pressionando F9. Isso também pode ser feito clicando set com o botão direito do mouse e selecionando Ponto de interrupção / Inserir ponto de interrupção.
2. Execute o aplicativo no modo de depuração
Em seguida, execute o aplicativo no modo de depuração (F5 ou Depurar / Iniciar Depuração). Digite algo no TextBox e observe que o ponto de interrupção não foi atingido. Se você pressionar a tecla Tab , ela move o foco de entrada para o próximo controle (no nosso caso, o botão). Perder o foco nas atualizações da vinculação, para que o TextBox ponto de interrupção seja atingido.
3. Altere a vinculação para que ela seja atualizada a cada pressionamento de tecla
Pare a depuração pressionando Shift+F5 ou selecionando Depurar / Parar Depuração.
Para fornecer comentários precisos sobre quando o botão Enviar está ativado, não podemos esperar até que o foco seja perdido no TextBox. Felizmente, há uma maneira de mudar o comportamento da vinculação. Você pode forçá-lo a atualizar a propriedade (que é a fonte, pois estamos falando de uma TwoWay ligação) sempre que a UserName propriedade text for alterada. Precisamos de alterar a UpdateSourceTrigger vinculação, que é definida LostFocus por defeito. UpdateSourceTrigger define a circunstância que faz com que a fonte seja atualizada.
Abra MainPage.xaml e localize o TextBoxarquivo . Em seguida, altere a associação adicionando UpdateSourceTrigger=PropertyChanged. A tag inteira TextBox agora deve ter esta aparência:
<TextBox Name="tbUserName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{x:Bind Logic.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Se você depurar o aplicativo agora, poderá ver que o ponto de interrupção é atingido a cada pressionamento de tecla e alteração de texto. Excelente!
Você deve se lembrar que, quando usamos a associação UI-to-UI para exibir a saudação, cada pressionamento de tecla disparava a ligação. Nesse caso, a ligação foi definida no TextBlock, e, portanto, a fonte era a propriedade, que muda a TextBox.Text cada pressionamento de tecla. UpdateSourceTrigger afeta o fluxo de dados na outra direção. Ele flui da fonte de ligação para o controle no qual a ligação é definida (o destino de vinculação).
5. Adicione a IsSubmitAllowed propriedade
Em seguida, você adiciona uma propriedade Boolean que indica se o envio do formulário é permitido. Abra MainPageLogic.cs e adicione uma nova propriedade à MainPageLogic classe.
public bool IsSubmitAllowed => UserName?.Trim().Length > 2;
Esta é uma validação muito simples: se o texto inserido, cortado de caracteres de espaço em branco à esquerda e à direita, contiver mais de dois caracteres, aceitamo-lo como nome de utilizador.
6. Reavalie IsSubmitAllowed após cada alteração para UserName
Temos que dizer à estrutura da interface do usuário quando reavaliar essa propriedade e refleti-la na interface do usuário. A melhor maneira de desencadear essa reavaliação é chamando RaisePropertyChanged o UserName setter do imóvel. Para poder adicionar código ao setter, ele precisa ser convertido em uma propriedade completa. Substitua a UserName propriedade pelo seguinte código:
private string _userName;
public string UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Nós não usamos INotifyPropertyChanged para esta propriedade porque ainda não temos uma situação em que a propriedade é alterada a UserName partir do código. No entanto, toda vez que o texto é alterado no TextBox, temos que dizer à interface do usuário que a IsSubmitAllowed propriedade pode ter sido alterada e deve ser reavaliada.
7. Vincular a IsSubmitAllowed propriedade à propriedade do IsEnabled botão
Agora você terminou com o código. Volte para MainPage.xaml e localize o botão Enviar . Adicione o atributo para que o IsEnabled XAML do botão agora tenha esta aparência:
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
8. Execute o aplicativo
Se você executar o aplicativo agora, verá que o botão Enviar está desativado por padrão. Ele permanece desativado se você digitar alguns espaços e só será habilitado quando houver pelo menos três caracteres sem espaço em branco inseridos.
Embora este exemplo execute alguma validação, a UWP tem um conjunto avançado de recursos de validação que serão mostrados em um módulo posterior.
9. Oculte o botão Enviar
Você ou seu designer podem decidir ir um passo além e realmente ocultar o botão Enviar até que ele possa ser pressionado. Esta é uma mudança fácil de fazer, então vamos fazê-lo agora. Basta editar o XAML e mudar IsEnabled para Visibility.
No entanto, se você digitar alguns caracteres, verá que toda a interface do usuário salta. Isso ocorre porque o entorno StackPanel é centralizado horizontalmente (HorizontalAlignment="Center"), e a largura do StackPanel é menor quando o Button é recolhido. Para resolver esse problema, você pode colocar o Button em uma unidade de 100 de largura Border, como este.
<Border Width="100">
<Button Margin="10"
VerticalAlignment="Center"
Click="{x:Bind Logic.Submit}"
Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
</Border>
Com isso, a largura do não muda quando o Button interior do StackPanelBorder reaparece.
Resumo
Nesta lição, você viu como a vinculação pode ser depurada. Você aprendeu sobre a UpdateSourceTrigger opção de vinculação e viu outros exemplos de vinculação de dados. Você também viu um exemplo de como a aparência e o comportamento da interface do usuário podem ser alterados sem tocar no código C#, se você estiver usando a vinculação de dados corretamente.
Na próxima lição, examinaremos como você pode usar a vinculação de dados para exibir vários itens em uma lista.
Nas lições anteriores, você criou uma interface do usuário de formulário simples, solicitando que o usuário inserisse um nome e, com um botão, exibiu uma saudação. Nesta lição, você torna o formulário um pouco mais fácil de usar, desativando ou ocultando o botão Enviar até que pelo menos três caracteres tenham sido inseridos.
Primeiro, vamos examinar exatamente quando o MainWindowDataContext.UserName valor é definido através da ligação.
1. Coloque um ponto de interrupção
Abra o MainWindowDataContext.cs arquivo e localize a linha que contém a UserName propriedade.
public string UserName { get; set; }
Defina um ponto de interrupção no setter movendo o cursor dentro do set texto e pressionando F9. Isso também pode ser feito clicando com o botão direito do mouse e setselecionando Ponto de interrupção / Inserir ponto de interrupção.
2. Execute o aplicativo no modo de depuração
Em seguida, execute o aplicativo no modo de depuração (F5 ou Depurar / Iniciar Depuração). Digite algo no TextBox e observe que o ponto de interrupção não é atingido. Se você pressionar a tecla Tab, ela move o foco de entrada para o próximo controle (no nosso caso, o botão). Perder o foco nas atualizações da vinculação, para que o TextBox ponto de interrupção seja atingido.
3. Altere a vinculação para que ela seja atualizada a cada pressionamento de tecla
Pare a depuração pressionando Shift+F5 ou selecionando Depurar / Parar Depuração.
Para fornecer comentários precisos sobre quando o botão Enviar está ativado, não podemos esperar até que o foco seja perdido no TextBox. Felizmente, há uma maneira de mudar o comportamento da vinculação. Você pode forçá-lo a atualizar a propriedade (que é a fonte, pois estamos falando de uma TwoWay ligação) sempre que a UserName propriedade text for alterada. Precisamos de alterar a UpdateSourceTrigger vinculação, que é definida LostFocus por defeito. UpdateSourceTrigger define a circunstância que faz com que a fonte seja atualizada.
Abra MainWindow.xamlo arquivo TextBox. Em seguida, altere a associação adicionando UpdateSourceTrigger=PropertyChanged. A tag inteira TextBox agora deve ter esta aparência:
<TextBox Name="tbName"
Margin="10"
Width="150"
VerticalAlignment="Center"
Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
Se você depurar o aplicativo agora, poderá ver que o ponto de interrupção é atingido a cada pressionamento de tecla e alteração de texto. Excelente!
Você deve se lembrar que, quando usamos a associação UI-to-UI para exibir a saudação, cada pressionamento de tecla disparava a ligação. Nesse caso, a ligação foi definida no TextBlock, e, portanto, a fonte era a propriedade, que muda a TextBox.Text cada pressionamento de tecla. UpdateSourceTrigger afeta o fluxo de dados na outra direção. Ele flui da fonte de ligação para o controle no qual a ligação é definida (o destino de vinculação).
5. Adicione a IsSubmitAllowed propriedade
Em seguida, você adiciona uma propriedade Boolean que indica se o envio do formulário é permitido. Abra MainWindowDataContext.cs e adicione uma nova propriedade à MainWindowDataContext classe.
public bool IsSubmitAllowed => !string.IsNullOrWhiteSpace(UserName);
Esta propriedade está fazendo uma validação simples. Se o texto inserido não for nulo, vazio ou apenas caracteres de espaço em branco, nós o aceitamos como um nome de usuário.
6. Reavalie IsSubmitAllowed após cada alteração para UserName
Temos que aconselhar a estrutura da interface do usuário quando reavaliar essa propriedade e refleti-la na interface do usuário. A melhor maneira de desencadear essa reavaliação é chamando RaisePropertyChanged o UserName setter do imóvel. Para poder adicionar código ao setter, ele precisa ser convertido em uma propriedade completa. Substitua a UserName propriedade pelo seguinte código:
private string? _userName;
public string? UserName
{
get { return _userName; }
set
{
_userName = value;
RaisePropertyChanged(nameof(IsSubmitAllowed));
}
}
Não usamos INotifyPropertyChanged para esta propriedade porque não temos uma situação em que a propriedade seja alterada a UserName partir do código. No entanto, toda vez que o texto é alterado no TextBox, temos que dizer à interface do usuário que a IsSubmitAllowed propriedade pode ter sido alterada e deve ser reavaliada.
7. Vincular a IsSubmitAllowed propriedade à propriedade do IsEnabled botão
Agora você terminou com o código. Volte e MainWindow.xaml encontre o botão Enviar . Adicione o atributo para que o IsEnabled XAML do botão agora tenha esta aparência:
<Button Margin="10"
VerticalAlignment="Center"
Click="OnSubmitClicked"
IsEnabled="{Binding IsSubmitAllowed}">Submit</Button>
8. Execute o aplicativo
Se você executar o aplicativo agora, verá que o botão Enviar está desativado por padrão. Ele é ativado assim que você digita algo nele.
Embora este exemplo execute algumas validações básicas, o WPF tem um rico conjunto de recursos de validação que serão demonstrados em um módulo subsequente.
Resumo
Nesta lição, você viu como as ligações podem ser depuradas. Você aprendeu sobre a UpdateSourceTrigger opção de vinculação e viu outros exemplos de vinculação de dados. Você também viu um exemplo de como, se estiver usando a vinculação de dados corretamente, a aparência e o comportamento da interface do usuário podem ser alterados sem tocar no código C#.
Na próxima lição, examinaremos como você pode usar a vinculação de dados para exibir vários itens em uma lista.