Telerik的控件很强大。我们直接使用其登陆模板。
在装过Telerik WP版后，就可以在VS里非常方便的添加页面了。
我们选择 Sign In Form
其XAML不是很长，直接贴出来
1 <telerikInput:RadDataForm Grid.Row="1" Margin="12,48,12,0" x:Name="DataForm"> 2 <telerikInput:RadDataForm.CurrentItem> 3 <models:SignInDataModel/> 4 </telerikInput:RadDataForm.CurrentItem> 5 <Grid> 6 <telerikInput:DataField Header="" TargetProperty="UserName"> 7 <telerikInput:DataField.EditorStyles> 8 <Style TargetType="telerikPrimitives:RadTextBox"> 9 <Setter Property="Watermark" Value="username or email"/> 10 </Style> 11 </telerikInput:DataField.EditorStyles> 12 <telerikInput:DataField.Validators> 13 <telerikInput:NonEmptyStringValidator/> 14 </telerikInput:DataField.Validators> 15 </telerikInput:DataField> 16 <telerikInput:DataField Header="" TargetProperty="Password" telerikDataForm:PasswordField.IsPasswordField="True"> 17 <telerikInput:DataField.EditorStyles> 18 <Style TargetType="telerikPrimitives:RadPasswordBox"> 19 <Setter Property="Watermark" Value="password"/> 20 </Style> 21 </telerikInput:DataField.EditorStyles> 22 <telerikInput:DataField.Validators> 23 <telerikInput:NonEmptyStringValidator/> 24 </telerikInput:DataField.Validators> 25 </telerikInput:DataField> 26 </Grid> 27 </telerikInput:RadDataForm>
XAML非常简单简洁，一看就懂，要想加验证也非常容易。
下面的登陆按钮直接将DataForm传至后台
1 <Button Grid.Row="2" Content="sign in" Margin="12" CommandParameter="{Binding ElementName=DataForm}" 2 Command="{StaticResource DataFormCommitCommand}" />
下面用这个控件来做我们的DoubanFm的登陆。
还是使用MVVMlight，为登陆页面建立一个VM，别忘了在Locator中注册VM。
在VM中暴露一个UserModel属性给View
1 public const string UserModelPropertyName = "UserModel"; 2 private User usermodel = new User(); 3 public User UserModel 4 { 5 get 6 { 7 return usermodel; 8 } 9 10 set 11 { 12 if (usermodel == value) 13 { 14 return; 15 } 16 17 RaisePropertyChanging(UserModelPropertyName); 18 usermodel = value; 19 RaisePropertyChanged(UserModelPropertyName); 20 } 21 }
再为登陆按钮设置一个Command，如下：
1 private RelayCommand<RadDataForm> logincommand; 2 /// <summary> 3 /// Gets the LoginCommand. 4 /// </summary> 5 public RelayCommand<RadDataForm> LoginCommand 6 { 7 get 8 { 9 return logincommand 10 ?? (logincommand = new RelayCommand<RadDataForm>( 11 (dataform) => 12 { 13 dataform.Commit();//这样值就到UserModel了 14 User user=dataform.CurrentItem as User; 15 Debug.WriteLine(user.Username); 16 Debug.WriteLine(user.PassWord); 17 18 })); 19 } 20 }
再结合上一篇Rx，我们可以实现DoubanFm的登陆了。
实现起来为了不破坏原先代码的结构，我们把负责Post的Rx利用SimpleIoc注入到早就写好的HttpRequestService类中。
1 MyRxPostMethodService RxService; 2 public HttpRequestService(MyRxPostMethodService rx) 3 { 4 RxService = rx; 5 6 }
MyRxPostMethodService 就是上篇的HTTPREQUEST类
再对Post包装一下
1 public IObservable<string> Post(string URL, string PostData) 2 { 3 return RxService.PostMethod(URL, PostData); 4 5 }
最后再把HttpRequestService注入到LoginVm中
1 private IHttpRequest _httprequest; 2 public LoginViewModel(IHttpRequest http) 3 { 4 _httprequest = http; 5 }
再将Command改为
1 public RelayCommand<RadDataForm> LoginCommand 2 { 3 get 4 { 5 return logincommand 6 ?? (logincommand = new RelayCommand<RadDataForm>( 7 (dataform) => 8 { 9 dataform.Commit();//这样值就到UserModel了 10 User user=dataform.CurrentItem as User; 11 string username = user.Username; 12 string password = user.PassWord; 13 _httprequest.Post("http://www.douban.com/j/app/login", "app_name=radio_desktop_win&version=100&email=" + username + "&password=" + password).Subscribe(this.OnLoginStatusChanged); 14 15 16 })); 17 } 18 }
到这里基本大功告成。