首页 > 其他分享 >WPF 制作三个点从左到右过渡隐藏显示

WPF 制作三个点从左到右过渡隐藏显示

时间:2023-12-10 21:00:13浏览次数:42  
标签:Forever Storyboard 从左到右 RepeatBehavior TargetProperty BeginTime WPF TargetName 

 

Code:

<Window x:Class="WpfApp1.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:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Storyboard x:Key="storyboard1">
<!--这个效果是从左到中间快,从中间到右边快.-->
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0"
Storyboard.TargetName="t1"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0"
Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1"/>
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.4"
Storyboard.TargetName="t2"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.4"
Storyboard.TargetName="ellipse2"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.6"
Storyboard.TargetName="t3"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.6"
Storyboard.TargetName="ellipse3"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid Width="200" Height="200">
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource storyboard1}"/>
</EventTrigger>
</Grid.Triggers>
<Border>
<Ellipse x:Name="ellipse1" Opacity="0" Fill="Red" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="t1"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Border>
<Ellipse x:Name="ellipse2" Opacity="0" Fill="Green" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="t2"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Border>
<Ellipse x:Name="ellipse3" Opacity="0" Fill="Blue" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="t3"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</Grid>
</Window>

 

 

标签:Forever,Storyboard,从左到右,RepeatBehavior,TargetProperty,BeginTime,WPF,TargetName,
From: https://www.cnblogs.com/yuxiangblog/p/17893214.html

相关文章

  • 一个适用于定制个性化界面的WPF UI组件库
    前言今天给大家推荐一个能让你用最少的代码来实现期望的UI效果,适用于定制个性化界面的WPFUI组件库:Panuon.WPF.UI。组件库官方介绍Panuon.WPF.UI是一个适用于定制个性化UI界面的组件库。它能帮助你快速完成样式和控件的UI设计,而不必深入了解WPF的ControlTemplate、Storyboa......
  • wpf data binding
     publicpartialclassWindow2:Window{publicPersonvmPerosn=newPerson();publicWindow2(){InitializeComponent();vmPerosn.Name="JackZhao";vmPerosn.Phone=&qu......
  • js 默认展示两行多余隐藏滑动及添加滑动条
    <divclass="nav-box"@scroll="scroll"><divfor="list"class="nav"><divclass="item-box">item</div></div></div><divclass="scroll-box"v-show=&q......
  • 浅谈WPF之控件拖拽与拖动
    使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,简述如何在WPF中实现控件的拖拽和拖......
  • WPF 绑定binding都有哪些事件
    在WPF中,源属性(SourceProperty)指的是提供数据的属性,通常是数据模型或者其他控件的属性,而目标属性(TargetProperty)则是数据绑定的目标,通常是绑定到控件的属性,例如TextBlock的Text属性。数据绑定将源属性的值自动更新到目标属性中。 主要包含以下几个事件:1. UpdateSourceTrigg......
  • 隐藏组件,但保留 ref
    需求背景已知:二次封装el-upload为Import导入组件,点击A或B,都弹出文件选择框。显示如下图所示:父组件:模板代码<el-col:span="1.5"class="import-btn"><importref="importRef":file-lab......
  • wpf 颜色转换常用方法
    设置颜色:Colorcolor=Color.FromArgb(透明度,red数字,green数字,blue数字);//这四个数字范围都是(0-255)Colorcolor=Color.FromRgb(red数字,green数字,blue数字);//默认透明度为255;button.BackGround=newSolidColorBrush(Colors.AliceBlue);String转换成Color:Color......
  • 记录——Qt Qcreator 顶部菜单栏的隐藏与恢复
    问题我有一个朋友,手残点击了QCreator中视图下的这个玩意儿:当人的眼神不好时,可能不会看到这些快捷键以及无视这些弹窗。解决方案快捷键ctrl+alt+M可恢复或者隐藏顶部工具菜单栏......
  • WPF控件—DataGrid(1)
    DataGrid:表示用于在可自定义的网格中显示数据的控件。命名空间:System.Windows.Controls属性:SelectionMode:值为“Extended”和“Single”,分别表示可选取多行和单行。SelectionUnit:值为:“FullRow”、"Cell"、"CellOrRowHeader",该值分别指示是否可以在 DataGrid 中选择行、单元......
  • 基于WPF的 自动化设备数字看板
    技术要点:XAML的UI编程;数据绑定(事件驱动→数据驱动);自定义组件;MVVM分层架构;liveChart等第三方组件;Meter.xaml<UserControlx:Class="DashBoard.Components.Meter"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x=&q......