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)
{
}
}
程序效果如下.
下载 点击打开链接