Behavior<T>和TriggerAction<T>的使用和区别

Express Blend 的行为包含两个部分,一个是触发条件,一个是操作逻辑,Behavior<T>把这两部分都包含了,而TriggerAction<T>只包含操作逻辑.

下面将做一个例子,同时对Behavior和TriggerAction进行使用.

相信大家都对QQ中多用户聊天窗口侧滑进行选择的功能感兴趣吧.这个功能是老驴教我的,我对它的代码使用Behaviro进行了模块处理.希望对大家有帮助.

1.xaml部局

所谓移动效果主要是两个子容器,第一个子容器占据当前窗口全部空间,第二个子容器使用TranslateTransform对象的X属性移动屏幕右侧.

然后分别注册主容器的

ManipulationStarted 
ManipulationDelta 
ManipulationCompleted

事件,对两个子容量的TranslateTranform.X属性进行操作.

耐心看一下,很简单的.

<!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="侧滑Behavior" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" >
            <i:Interaction.Behaviors>
                <local:SliderBehavior MainView="{Binding ElementName=MainView}" SlideView="{Binding ElementName=SlideView}"/>
            </i:Interaction.Behaviors>
            <Grid  Background="Yellow" Name="MainView">
                <Grid.RenderTransform>
                    <TranslateTransform />
                </Grid.RenderTransform>
                <TextBlock Text="主视图" Foreground="Black" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="DengXian"/>
            </Grid>
                    <Grid Background="Red" Width="100" HorizontalAlignment="Left" Name="SlideView">
                <Grid.RenderTransform>
                    <TranslateTransform X="480"/>
                </Grid.RenderTransform>
                <TextBlock Text="侧划条" Foreground="Black" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
        </Grid>
    </Grid>

2 SlideBehavior的实现

public class SliderBehavior : Behavior<UIElement>
    {
       //主视图
       public static readonly DependencyProperty MainViewProperty =
                                       DependencyProperty.Register("MainView", typeof(UIElement), typeof(SliderBehavior), null);

       public UIElement MainView 
       {
           get
           {
               return (UIElement)GetValue(MainViewProperty);
           }
           set
           {
               SetValue(MainViewProperty, value);
           }
       }

       //划动条
       public static readonly DependencyProperty SlideViewProperty =

                                     DependencyProperty.Register("SlideView", typeof(UIElement), typeof(SliderBehavior), null);
       public UIElement SlideView
       {
           get
           {
               return (UIElement)GetValue(SlideViewProperty);
           }
           set
           {
               SetValue(SlideViewProperty, value);
           }
       }
        // 摘要:
        //     在行为附加到 AssociatedObject 后调用。
        //
        // 备注:
        //     替代它以便将功能挂钩到 AssociatedObject。
       protected override void OnAttached()
       {
           base.OnAttached();
           AssociatedObject.ManipulationStarted += OnManipulationStarted;
           AssociatedObject.ManipulationDelta += OnManipulationDelta;
           AssociatedObject.ManipulationCompleted += OnManipulationCompleted;
       }
       // 摘要:
       //     在行为与其 AssociatedObject 分离时（但在它实际发生之前）调用。
       //
       // 备注:
       //     替代它以便将功能从 AssociatedObject 中解除挂钩。
       protected override void OnDetaching()
       {
           base.OnDetaching();

           AssociatedObject.ManipulationStarted -= OnManipulationStarted;
           AssociatedObject.ManipulationDelta -= OnManipulationDelta;
           AssociatedObject.ManipulationCompleted -= OnManipulationCompleted;
       }

       double delt = 0.0;    //每次划动的距离,可以通过这个值来判断用户是向左划还是向右划
       void OnManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
       {
           delt = 0;
       }
       void OnManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
       {
           TranslateTransform MainViewTranslateTransform = MainView.RenderTransform as TranslateTransform;
           TranslateTransform SlidViewTranslateTransform = SlideView.RenderTransform as TranslateTransform;
           //如果向左滑e.DeltaManipulation.Translation.X为负值,如果向右划e.DeltaManipulation.Translation.X为正值
           if(e.DeltaManipulation.Translation.X < 0)
           {
                //判断主视图向左滑动的距离不能超过划动条的宽度.为什么要在(SlideView as FrameworkElement).ActualWidth前加一个负号呢?
               ///因为我们使用的是TranslateTransform对控件进行移位,正常情况下当一个控件被添加了TranslateTransform属性,如果不显示对X和Y值进行设置的,那么它们默认值是0,也就是说我要控件保持在当前位置,不对它进行移位操作.如果我想要控件向左移一点呢?,当然是0的左边,也就是是负值了,如果想控件向右移呢,
               ///当然是正值.想让控件向上向下运行也是这个道理.

               if (MainViewTranslateTransform.X >= -(SlideView as FrameworkElement).ActualWidth)
               {
                   MainViewTranslateTransform.X += e.DeltaManipulation.Translation.X;
                   SlidViewTranslateTransform.X += e.DeltaManipulation.Translation.X;
               }
           }          
           else if (e.DeltaManipulation.Translation.X > 0)
           {
               if (MainViewTranslateTransform.X <=0)
               {
                   MainViewTranslateTransform.X += e.DeltaManipulation.Translation.X;
                   SlidViewTranslateTransform.X += e.DeltaManipulation.Translation.X;
               }
           }
       }
       void OnManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
       {
          
       }
    }

 程序效果如下.

下载 点击打开链接