Shape流动效果

<Window x:Class="MvvmLight1.MainWindow"
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:localBehavior="clr-namespace:MvvmLight1"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ignore="http://www.ignore.com"
mc:Ignorable="d ignore"
Height="400"
Width="600"
Title="MVVM Light Application"
DataContext="{Binding Main, Source={StaticResource Locator}}"> <Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources> <StackPanel>
<Ellipse StrokeDashArray="2,4" Stroke="Red" StrokeThickness="3" Height="100" Width="100">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
</Ellipse>
<Rectangle StrokeDashArray="1,2" Stroke="Blue" StrokeThickness="3" Height="100" Width="100">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
</Rectangle>
<Path x:Name="MyPath"
StrokeThickness="3"
StrokeDashArray="5,10"
Stroke="Black">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
<Path.Data>
<PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
</Path.Data>
</Path>
<StackPanel>
<CheckBox x:Name="FluidCheckBox" Content="流动效果"/>
<Slider x:Name="FlowRate" Minimum="1" Maximum="10"/>
<TextBlock Text="{Binding ElementName=FlowRate,Path=Value}"/>
</StackPanel>
</StackPanel> </Window>
由Xaml可以看出核心就是一个FluidBehavior,效果,就不过多阐述了
最核心的就是用一个定时器对于Shape的StrokeDashOffset进行改变,其中抽象FlowRate以及WhetherFluid用于控制流动速率以及是否流动
using System;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Shapes;
using System.Windows.Threading; namespace MvvmLight1
{
/// <summary>
/// 流动行为
/// </summary>
public class FluidBehavior : Behavior<Shape>
{
#region 依赖属性 /// <summary>
/// 流动速度
/// </summary>
public int FlowRate
{
get { return (int)GetValue(FlowRateProperty); }
set { SetValue(FlowRateProperty, value); }
} // Using a DependencyProperty as the backing store for FlowRate. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FlowRateProperty =
DependencyProperty.Register("FlowRate", typeof(int), typeof(FluidBehavior), new PropertyMetadata()); /// <summary>
/// 是否流动
/// </summary>
public bool WhetherFluid
{
get { return (bool)GetValue(WhetherFluidProperty); }
set { SetValue(WhetherFluidProperty, value); }
} // Using a DependencyProperty as the backing store for WhetherFluid. This enables animation, styling, binding, etc...
public static readonly DependencyProperty WhetherFluidProperty =
DependencyProperty.Register("WhetherFluid", typeof(bool), typeof(FluidBehavior), new PropertyMetadata(true, OnWhetherFluidChanged)); private static void OnWhetherFluidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var behavior = d as FluidBehavior;
if (Convert.ToBoolean(e.NewValue))
{
behavior._timer.Start();
}
else
{
behavior._timer.Stop();
}
} #endregion protected override void OnAttached()
{
base.OnAttached();
Fluid();
} private readonly DispatcherTimer _timer = new DispatcherTimer(); //流动
private void Fluid()
{
_timer.Tick += (sender, e) =>
{
AssociatedObject.StrokeDashOffset -= FlowRate;
};
_timer.Interval = TimeSpan.FromSeconds(1d / );
if (WhetherFluid)
{
_timer.Start();
}
}
}
}
Shape流动效果的更多相关文章
- 基于HTML5实现3D监控应用流动效果
http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 流动效果在3D领域有着广泛的应用场景,如 ...
- HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
- WPF Path实现虚线流动效果
原文:WPF Path实现虚线流动效果 最近闲来无事,每天上上网,看看博客生活也过得惬意,这下老总看不过去了,给我一个任务,叫我用WPF实现虚线流动效果,我想想,不就是虚线流动嘛,这简单于是就答应下来 ...
- HTML+CSS 实现水流流动效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- android shape图形优化Button效果
android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满 ...
- 详解shape标签
转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- Android中shape属性详解
一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...
- android shape.xml 属性详解
转载源:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- 使用CSS实现多种Noise噪点效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在插画中添加噪点肌理可以营造出一种自然的氛围.噪点肌理可以用于塑造阴影.高 ...
随机推荐
- Red Pen - 快速高效的获取设计项目的反馈
Red Pen 让设计师能够快速,高效的从你的同事和客户获取反馈.只需要简单的拖放图像到 Red Pen 主页,然后把生成的链接分享给你的同事或者客户.他们打开链接就能看到设计稿,并给予实时的反馈,所 ...
- Spring Mvc + Maven + BlazeDS 与 Flex 通讯 (七)
BlazeDS 说明 BlazeDS是由Adobe开源的基于amf协议的,用于解决flex与java通讯的组件; 基于传统的文本协议的XML传输方式,在抽象层方面会有很大的压力,特别在需要序列化与反序 ...
- java Runnable、Callable、FutureTask 和线程池
一:Runnable.Callable.FutureTask简介 (1)Runnable:其中的run()方法没有返回值. ①.Runnable对象可以直接扔给Thread创建线程实例,并且创建的线程 ...
- MongoDB 之 $关键字 及 $修改器 $set $inc $push $pull $pop MongoDB - 4
我们在之前的 MongoDB 之 手把手教你增删改查 MongoDB - 2 中提到过 $set 这个系统关键字,用来修改值的对吧 但是MongoDB中类似这样的关键字有很多, $lt $gt $lt ...
- jquery或者js对html控件的处理汇总
1.下拉列表select的处理 a).后台通过jquery获取的json数据对下拉列表select的赋值操作: html页面:<select name="gameserverlist& ...
- 2017/05/23 java 基础 随笔
1.多态的好处: a.提高了代码的维护性(继承保证) b.提高了代码的扩展性(由多态保证) package com.huawei; public class Demo2 { public static ...
- MySQL灾备恢复在线主从复制变成主主复制及多源复制【转】
生产主主复制(A<--->B),和灾备主从复制(B--->C).当生产出现问题时,数据写入切换到灾备数据库,待生产恢复后,将灾备回写到生产.步骤如下: 1.灾备与生产其中一台建立主主 ...
- linux中Shell标准输出错误 >/dev/null 2>&1 分析【转】
Shell中可能经常能看到:>/dev/null 2>&1 eg:sudo kill -9 `ps -elf |grep -v grep|grep $1|awk '{print ...
- javascript 模拟按键点击提交
上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- centos7系统下安装配置jdk、tomcat教程
JDK安装与配置 1.下载linux版本的jdk,我下的版本是jdk6.0,下载rpm版本的. 可通过百度搜索文件名:jdk-6u45-linux-x64-rpm.bin下载 也可通过oracle官网 ...