silverlighter下MVVM模式中利用Behavior和TargetedTriggerAction实现文本框的一些特效

时间：2022-12-25 10:55:49

　　在silverlight一般开发模式中，给文本框添加一些事件是轻而易举的，然而MVVM开发模式中，想要给文本框添加一些事件并非那么容易，因为MVVM模式中，只有ICommand接口，而且也只有Button中才有Command属性，通过ViewModel可以将方法绑定到Button上面，却无法绑定到文本框和其他一些控件。、

　　Behavior的出现解决了这一难题，下面就来说一下具体的实现方法：

　　实例一：在用户登录窗口，用户点击Reset按钮后，让用户名输入框自动获取焦点。

　　首先要先将ViewModel绑定到我们的控件上面，我们一步一步来做，第一步先写Model，下面是Model的代码：

　　

using System;

using System.Net;

using System.Runtime.Serialization;

using System.ComponentModel;

namespace BookModel

{

   [DataContract]

   public class UserModel : INotifyPropertyChanged

   {

      public event PropertyChangedEventHandler PropertyChanged;

      private string userName = String.Empty;

      private string passWord = String.Empty;

      [DataMember]

      public string UserName

      {

         get { return userName; }

         set { userName = value; OnPropertyChanged("UserName"); }

      }

      [DataMember]

      public string PassWord

      {

         get { return passWord; }

         set { passWord = value; OnPropertyChanged("PassWord"); }

      }

      /// <summary>

      /// Call the event PropertyChanged.

      /// </summary>

      /// <param name="PropertyName"></param>

      public void OnPropertyChanged(string PropertyName)

      {

         if (PropertyChanged != null)

         {

            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));

         }

      }

   }

}

　　写完了Model，下一步就是写ViewModel了，在ViewModel中引用Model的命名控件，下面是ViewModel的代码，例子比较简单，就不多解释了。

　　

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using BookModel;

using System.Windows.Browser;

namespace BookViewModel

{

   public class VM_User

   {

      /// <summary>

      /// In the Constructors create the instance of User.

      /// </summary>

      public VM_User()

      {

         user = new UserModel();

         user.UserName = "Jack";

      }

      public UserModel user { get; set; }

      public LoginCommand Login

      {

         get { return new LoginCommand(); }

      }

      public ResteCommand Reset

      {

         get { return new ResteCommand(); }

      }

   }

   /// <summary>

   /// Login Button's method

   /// </summary>

   public class LoginCommand:ICommand

   {

      public bool CanExecute(object parameter)

      {

         return true;

      }

      public void Execute(object parameter)

      {

         VM_User VMUser = parameter as VM_User;

         if (VMUser.user.UserName.Equals("admin") && VMUser.user.PassWord.Equals(""))

         {

            MessageBox.Show("Login success!", "System Info", MessageBoxButton.OK);

         }

         else

         {

            MessageBox.Show("Login failed!", "System Info", MessageBoxButton.OK);

         }

      }

      public event EventHandler CanExecuteChanged;

   }

   /// <summary>

   /// Reset buttom's method

   /// </summary>

   public class ResteCommand : ICommand

   {

      public bool CanExecute(object parameter)

      {

         return true;

      }

      public void Execute(object parameter)

      {

         VM_User VMUser = parameter as VM_User;

         VMUser.user.UserName = "";

         VMUser.user.PassWord = "";

      }

      public event EventHandler CanExecuteChanged;

   }

}

　　这里就不连接数据库了，那样代码量太大，也不方便大家查看。这里只做一个简单的验证，至此MVVM中的M和VM就都建好了，下面写前端的显示层，添加两个TextBlock和两个TextBox，两个按钮。用作登录用，分别为用户名，密码，登录和重置。

　　下面是绑定代码：

　　

<UserControl x:Class="BookLibrary.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:local="clr-namespace:BookViewModel;assembly=BookViewModel"

    mc:Ignorable="d"

    d:DesignHeight="" d:DesignWidth=""

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

   <UserControl.Resources>

      <local:VM_User x:Key="User" />

   </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource User}}" Loaded="LayoutRoot_Loaded">

      <telerik:RadBusyIndicator Name="BusyIndicator">

         <Border>

            <Border.Background>

               <LinearGradientBrush EndPoint="0.5 1" StartPoint="0.5 0">

                  <GradientStop Color="#0369a9" Offset="" />

                  <GradientStop Color="#046daf" Offset="0.5" />

                  <GradientStop Color="#2fa2e5" Offset="" />

               </LinearGradientBrush>

            </Border.Background>

            <Border VerticalAlignment="Center" HorizontalAlignment="Center">

               <Border.Effect>

                  <DropShadowEffect BlurRadius="" Opacity="0.4"/>

               </Border.Effect>

               <Border.Background>

                  <RadialGradientBrush>

                     <GradientStop Color="#0B7AC1" Offset="" />

                     <GradientStop Color="#1182c7" Offset="" />

                  </RadialGradientBrush>

               </Border.Background>

               <Grid>

                  <Grid.RowDefinitions>

                     <RowDefinition Height=""/>

                     <RowDefinition Height=""/>

                     <RowDefinition Height=""/>

                     <RowDefinition Height=""/>

                     <RowDefinition Height=""/>

                  </Grid.RowDefinitions>

                  <Grid.ColumnDefinitions>

                     <ColumnDefinition Width=""/>

                     <ColumnDefinition Width=""/>

                     <ColumnDefinition Width=""/>

                     <ColumnDefinition Width=""/>

                  </Grid.ColumnDefinitions>

                  <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left"

                             Grid.Row="" Grid.Column="" Margin="20,0,0,0" FontWeight="Bold"

                             Text="School System |" FontSize="" Foreground="White"/>

                  <TextBlock Grid.Row="" Grid.Column="" HorizontalAlignment="Left"

                             VerticalAlignment="Center" Text="User Login" FontSize=""

                             Foreground="#b4e6ec"/>

                  <Image Source="Images/LoginPicture.png" Grid.Row="" Grid.Column="" Grid.RowSpan="" />

                  <TextBlock FontSize="" Grid.Row="" Grid.Column="" Text="UserName:"

                             Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />

                  <TextBlock FontSize="" Grid.Row="" Grid.Column="" Text="PassWord:"

                             Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />

                  <TextBox Name="txtName"  Text="{Binding user.UserName,Mode=TwoWay}" HorizontalAlignment="Left" FontSize="" Grid.Row="" Grid.Column="" Width="" Height="" />

                  <PasswordBox Password="{Binding user.PassWord,Mode=TwoWay}" HorizontalAlignment="Left" Grid.Row="" Grid.Column="" Width="" Height="" />

                  <Button Command="{Binding Login}" CommandParameter="{Binding}" HorizontalAlignment="Left" Width="" Height="" Grid.Row="" Grid.Column="" Content="Login" Click="Button_Click_1" />

                  <Button Command="{Binding Reset}" CommandParameter="{Binding}" HorizontalAlignment="Left" Width="" Height="" Grid.Row="" Grid.Column="" Content="Reset" Click="Button_Click" />

                  <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Grid.Row="" Grid.Column="" Content="Save State" Foreground="White" />

               </Grid>

            </Border>

         </Border>

      </telerik:RadBusyIndicator>

   </Grid>

</UserControl>

　　这个时候，就实现登录和重置功能了，但是重置的时候用户名文本框并不会获得焦点，下面我们来讲实现方法：

　　第一种方法：TargetedTriggerAction绑定

　　先写一个类，叫做TextBoxGetFocusBahavior，代码如下：

　　

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

namespace BookLibrary

{

   public class TextBoxGetFocusBahavior:TargetedTriggerAction<TextBox>

   {

      public void GotFocusAction()

      {

      }

      protected override void Invoke(object parameter)

      {

         TextBox targetTextBox = Target;

         targetTextBox.SelectAll();

      }

   }

}

　　然后在前台绑定，绑定方法如下：

　　

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
<TextBox Height="" Name="textBox" HorizontalAlignment="Left" Margin="36,28,0,0" VerticalAlignment="Top" Width="">

         <i:Interaction.Triggers>

            <i:EventTrigger EventName="GotFocus">

               <local:TextBoxGetFocusBahavior TargetName="textBox" />

            </i:EventTrigger>

         </i:Interaction.Triggers>

 </TextBox>

　　注意我标红的地方，就是要引入命名空间。

　　第二种方法Behavior方法，和上面基本一样，不过我感觉这种方法比较灵活，推荐使用这种方法。新加一个类，AutoSetFocusBehavior，代码如下：

　　

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

namespace BookLibrary

{

   public class AutoSetFocusBehavior:Behavior<TextBox>

   {

      protected override void OnAttached()

      {

         base.OnAttached();

         AssociatedObject.TextChanged += OnTextChanged;

      }

      public void OnTextChanged(object sender, EventArgs e)

      {

         if(AssociatedObject.Text.Equals(""))

            AssociatedObject.Focus();

      }

   }

}

　　这里前端绑定方法为：

　　

 <TextBox Text="{Binding user.UserName}" x:Name="txtName" Height="" HorizontalAlignment="Left" Margin="36,76,0,0" VerticalAlignment="Top" Width="">

         <i:Interaction.Behaviors>

            <local:AutoSetFocusBehavior />

         </i:Interaction.Behaviors>

      </TextBox>

　　注意，同样要引入上面的命名空间。

　　其实，说了这么多，就是给TextBox加了个OnTextChanged事件，当内容被清空时，判断内容是否为空，为空则设置焦点。

　　希望这篇文章能给大家一点帮助。不足之处，还请赐教。

相关文章