2016-10-05 6 views
0

小さなテストプロジェクトをセットアップし、ユーザー名とパスワードを取得するログインページを作成しました。 MVVMアプローチとPrismフレームワークを使用しています。私はこのビデオ(https://www.youtube.com/watch?v=ZfBy2nfykqY)とともにフォローしていました。ここviewmodelでテキストボックスをバインドしようとしましたが、更新が発生していません

はXAMLである:

<Page x:Class="Control_Center.Views.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="using:Control_Center.Views" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d"> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <StackPanel VerticalAlignment="Center" 
        HorizontalAlignment="Center" 
        Grid.Row="0"> 
      <StackPanel Orientation="Horizontal" 
         HorizontalAlignment="Center"> 
       <TextBlock Name="LoginResponse" 
          Text="{Binding LoginStatus}" /> 
      </StackPanel> 
     </StackPanel> 
     <StackPanel VerticalAlignment="Center" 
        HorizontalAlignment="Center" 
        Grid.Row="1"> 
      <StackPanel Orientation="Horizontal" 
         HorizontalAlignment="Center"> 
       <TextBox Name="UsernameBox" 
         Text="{Binding Username, UpdateSourceTrigger=PropertyChanged}" 
         AcceptsReturn="False" 
         PlaceholderText="Username..." 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         FontSize="14" 
         Width="200" 
         Height="25" /> 
      </StackPanel> 
      <StackPanel Orientation="Horizontal" 
         HorizontalAlignment="Center"> 
       <PasswordBox Name="PasswordBox" 
          PasswordRevealMode="Peek" 
          PlaceholderText="Password..." 
          Width="200" 
          Height="25" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Center" 
          FontSize="14" 
          PasswordChanged="PasswordBox_PasswordChanged" /> 
      </StackPanel> 
      <StackPanel Orientation="Horizontal" 
         HorizontalAlignment="Right"> 
       <Button Name="LoginButton" 
         HorizontalAlignment="Right" 
         VerticalAlignment="Bottom" 
         Margin="0,10,0,0" 
         FontSize="12" 
         Content="Login" 
         Command="{Binding LoginCommand}" /> 
       <Button Name="CancelButton" 
         HorizontalAlignment="Right" 
         VerticalAlignment="Bottom" 
         Margin="10,10,0,0" 
         FontSize="12" 
         Content="Cancel" /> 

      </StackPanel> 
     </StackPanel> 
    </Grid> 
</Page> 

とビューモデル(注:BindableBaseプリズムの一部である:https://github.com/PrismLibrary/Prism/blob/master/Source/Prism/Mvvm/BindableBase.cs):

using System; 
using System.Diagnostics; 
using System.Windows.Input; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Prism.Commands; 
using Prism.Mvvm; 

namespace EJD_Control_Center.ViewModels 
{ 
    class ViewLoginViewModel : BindableBase 
    { 
     private string _username; 

     public string Username 
     { 
      get { return _username; } 
      set { SetProperty(ref _username, value); } 
     } 

     private string _password; 

     public string Password 
     { 
      get { return _password; } 
      set { SetProperty(ref _password, value); } 
     } 

     private string _loginStatus; 

     public string LoginStatus 
     { 
      get { return _loginStatus; } 
      set { SetProperty(ref _loginStatus, value); } 
     } 

     public DelegateCommand LoginCommand { get; set; } 

     public ViewLoginViewModel() 
     { 
      LoginCommand = new DelegateCommand(Execute, CanExecute).ObservesProperty(() => Username).ObservesProperty(() => Password); 
     } 

     private bool CanExecute() 
     { 
      Debug.WriteLine($"Username: {Username}, password: {Password}"); 
      Debug.WriteLine("Username is not null or whitespace? " + !string.IsNullOrWhiteSpace(Username) + ", and password: " + !string.IsNullOrWhiteSpace(Password)); 
      return !string.IsNullOrWhiteSpace(Username) && !string.IsNullOrWhiteSpace(Password); 
     } 

     private void Execute() 
     { 
      LoginStatus = $"Login Successful! Username: {Username} Password: {Password}"; 
      //actually return the status of the login request, but we don't have this yet. then switch screens. 
     } 
    } 
} 

、完了のために、分離コード:

using Windows.Foundation; 
using Windows.UI.ViewManagement; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Control_Center.ViewModels; 

namespace Control_Center.Views 
{ 
    /// <summary> 
    /// </summary> 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      InitializeComponent(); 

      ApplicationView.PreferredLaunchViewSize = new Size(500, 320); 
      ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; 

      DataContext = new ViewLoginViewModel(); 
     } 

     private void PasswordBox_PasswordChanged(object sender, RoutedEventArgs e) 
     { 
      var vm = (ViewLoginViewModel) DataContext; 
      vm.Password = PasswordBox.Password; 
     } 
    } 
} 

誰もが起動する前に、これはパスワードの受け渡しを安全に処理する方法ではないことが分かっています。それはこの質問のポイントではありません。

問題は、ユーザー名のテキストボックスをViewModelのユーザー名変数にバインドするときに、その文字列を更新していないように見えることです。 ViewModelのユーザー名を「test」と設定すると、テキストボックスに表示されますが、そのテキストボックスの更新によってViewModelのUsername変数が変更されることはありません。

これら2つのボックスを変更するときに私が得る出力は次のようになります。

Username: , password: d 
Username is not null or whitespace? False, and password: True 

ユーザ名テキストボックスはそれで何かを持っている場合でも。これらのデバッグ行がまったく表示される唯一の理由は、パスワードを処理する方法がcanExecuteを呼び出していることですが、私がユーザー名を処理する方法は、それが理解できる限りではありません。

"{Binding Username, UpdateSourceTrigger=PropertyChanged}"は、ViewModelのusername変数にユーザ名のテキストボックステキストを送信しないのはなぜですか?

+0

BindableBaseについて - SetProperty()の背後にあるどのような種類の魔法がどのようにあなたのコードを実行することができますか? – RTDev

+0

BindableBaseはPrismの一部であるため、私が特に言及したのは、私がタグを使用して入れていることです。 –

+0

OK、プリズムを持っていないので、私はあなたのバインディングにMode = TwoWayを設定することを推奨します。 – RTDev

答えて

2

BindingのデフォルトのMode設定はOneWayなので、コードからレイアウトへの更新はうまくいくが、レイアウトからコードへの更新はうまくいきません。 ModeをTwoWayに設定すると、両方向で動作させることができます。

"{Binding Username, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
+0

x:BindのデフォルトのMode設定は、Bindingとは異なりOneTimeです。 –

+0

Trueですが、x:Bindはこのケースでは使用しません。これはUpdateSourceTriggerをサポートしていないためです。 – RTDev

関連する問題