使用Telerik的登陆模板实现DoubanFm的登陆(WP7)

Telerik的控件很强大。我们直接使用其登陆模板。

在装过Telerik WP版后，就可以在VS里非常方便的添加页面了。

我们选择 Sign In Form

其XAML不是很长，直接贴出来

 <telerikInput:RadDataForm Grid.Row="1" Margin="12,48,12,0" x:Name="DataForm">
                     <telerikInput:RadDataForm.CurrentItem>
                         <models:SignInDataModel/>
                     </telerikInput:RadDataForm.CurrentItem>
                     <Grid>
                         <telerikInput:DataField Header="" TargetProperty="UserName">
                             <telerikInput:DataField.EditorStyles>
                                 <Style TargetType="telerikPrimitives:RadTextBox">
                                     <Setter Property="Watermark" Value="username or email"/>
                                 </Style>
                             </telerikInput:DataField.EditorStyles>
                             <telerikInput:DataField.Validators>
                                 <telerikInput:NonEmptyStringValidator/>
                             </telerikInput:DataField.Validators>
                         </telerikInput:DataField>
                         <telerikInput:DataField Header="" TargetProperty="Password" telerikDataForm:PasswordField.IsPasswordField="True">
                             <telerikInput:DataField.EditorStyles>
                                 <Style TargetType="telerikPrimitives:RadPasswordBox">
                                     <Setter Property="Watermark" Value="password"/>
                                 </Style>
                             </telerikInput:DataField.EditorStyles>
                             <telerikInput:DataField.Validators>
                                 <telerikInput:NonEmptyStringValidator/>
                             </telerikInput:DataField.Validators>
                         </telerikInput:DataField>
                     </Grid>
27 </telerikInput:RadDataForm>

XAML非常简单简洁，一看就懂，要想加验证也非常容易。

下面的登陆按钮直接将DataForm传至后台

   <Button Grid.Row="2" Content="sign in" Margin="12" CommandParameter="{Binding ElementName=DataForm}"
                         Command="{StaticResource DataFormCommitCommand}" />

下面用这个控件来做我们的DoubanFm的登陆。

还是使用MVVMlight，为登陆页面建立一个VM，别忘了在Locator中注册VM。

在VM中暴露一个UserModel属性给View

       public const string UserModelPropertyName = "UserModel";
         private User usermodel = new User();
         public User UserModel
         {
             get
             {
                 return usermodel;
             }

             set
             {
                 if (usermodel == value)
                 {
                     return;
                 }

                 RaisePropertyChanging(UserModelPropertyName);
                 usermodel = value;
                 RaisePropertyChanged(UserModelPropertyName);
             }
         }

再为登陆按钮设置一个Command，如下：

     private RelayCommand<RadDataForm> logincommand;
         /// <summary>
         /// Gets the LoginCommand.
         /// </summary>
         public RelayCommand<RadDataForm> LoginCommand
         {
             get
             {
                 return logincommand
                     ?? (logincommand = new RelayCommand<RadDataForm>(
                                           (dataform) =>
                                           {
                                               dataform.Commit();//这样值就到UserModel了
                                               User user=dataform.CurrentItem as User;
                                               Debug.WriteLine(user.Username);
                                               Debug.WriteLine(user.PassWord);

                                           }));
             }
         }

再结合上一篇Rx，我们可以实现DoubanFm的登陆了。

实现起来为了不破坏原先代码的结构，我们把负责Post的Rx利用SimpleIoc注入到早就写好的HttpRequestService类中。

    MyRxPostMethodService RxService;
         public HttpRequestService(MyRxPostMethodService rx)
         {
             RxService = rx;

         }

MyRxPostMethodService 就是上篇的HTTPREQUEST类

再对Post包装一下

    public IObservable<string> Post(string URL, string PostData)
         {
          return   RxService.PostMethod(URL, PostData);

         }

最后再把HttpRequestService注入到LoginVm中

    private IHttpRequest _httprequest;
         public LoginViewModel(IHttpRequest http)
         {
             _httprequest = http;
         }

再将Command改为

  public RelayCommand<RadDataForm> LoginCommand
         {
             get
             {
                 return logincommand
                     ?? (logincommand = new RelayCommand<RadDataForm>(
                                           (dataform) =>
                                           {
                                               dataform.Commit();//这样值就到UserModel了
                                               User user=dataform.CurrentItem as User;
                                               string username = user.Username;
                                               string password = user.PassWord;
                                               _httprequest.Post("http://www.douban.com/j/app/login", "app_name=radio_desktop_win&version=100&email=" + username + "&password=" + password).Subscribe(this.OnLoginStatusChanged);

                                           }));
             }
         }

到这里基本大功告成。