时间:2021-05-19
Win8系统的Loading效果还是很不错的,网上也有人用CSS3等技术实现,研究了一下,并打算用WPF自定义一个Loading控件实现类似的效果,并可以让用户对Loading的颗粒(Particle)背景颜色进行自定义,话不多说,直接上代码:
1、用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo,VS自动生成如下结构:
2、删除UserControl1.xaml,并新建一个Loading的CustomControl(不是UserControl),如下图所示:
3、如果报错找不到Loading类型,请编译,下面在Generic.xaml主题文件中对Loading的样式和内容进行定义(注意添加
xmlns:system = "clr-namespace:System;assembly=mscorlib"),代码如下:<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system = "clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:WpfControlLibraryDemo"> <Style TargetType="{x:Type local:Loading}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:Loading}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid Width = "50" Height = "50"> <Grid.Resources> <!-- Value Converters --> <!-- Particle Styling ,must to has RelativeSource --> <SolidColorBrush x:Key = "ParticleColor" Color = "{Binding Path=FillColor,RelativeSource={RelativeSource TemplatedParent}}" /> <SolidColorBrush x:Key = "ParticleBackgroundColor" Color = "Transparent"/> <system:Double x:Key = "ParticleOpacity">1</system:Double> <system:Double x:Key = "ParticleRadius">5</system:Double> <system:Double x:Key = "StartingPointX">0</system:Double> <system:Double x:Key = "StartingPointY">-20</system:Double> <system:Double x:Key = "RotationPointX">0.5</system:Double> <system:Double x:Key = "RotationPointY">0.5</system:Double> <!-- StoryBoard --> <system:TimeSpan x:Key = "StoryBoardBeginTimeP0">00:00:00.000</system:TimeSpan> <system:TimeSpan x:Key = "StoryBoardBeginTimeP1">00:00:00.100</system:TimeSpan> <system:TimeSpan x:Key = "StoryBoardBeginTimeP2">00:00:00.200</system:TimeSpan> <system:TimeSpan x:Key = "StoryBoardBeginTimeP3">00:00:00.300</system:TimeSpan> <system:TimeSpan x:Key = "StoryBoardBeginTimeP4">00:00:00.400</system:TimeSpan> <Duration x:Key = "StoryBoardDuration">00:00:01.800</Duration> <!-- Particle Origin Angles --> <system:Double x:Key = "ParticleOriginAngleP0">0</system:Double> <system:Double x:Key = "ParticleOriginAngleP1">-10</system:Double> <system:Double x:Key = "ParticleOriginAngleP2">-20</system:Double> <system:Double x:Key = "ParticleOriginAngleP3">-30</system:Double> <system:Double x:Key = "ParticleOriginAngleP4">-40</system:Double> <!-- Particle Position & Timing 1 --> <system:Double x:Key = "ParticleBeginAngle1">0</system:Double> <system:Double x:Key = "ParticleEndAngle1">90</system:Double> <system:TimeSpan x:Key = "ParticleBeginTime1">00:00:00.000</system:TimeSpan> <Duration x:Key = "ParticleDuration1">00:00:00.750</Duration> <!-- Particle Position & Timing 2 --> <system:Double x:Key = "ParticleBeginAngle2">90</system:Double> <system:Double x:Key = "ParticleEndAngle2">270</system:Double> <system:TimeSpan x:Key = "ParticleBeginTime2">00:00:00.751</system:TimeSpan> <Duration x:Key = "ParticleDuration2">00:00:00.300</Duration> <!-- Particle Position & Timing 3 --> <system:Double x:Key = "ParticleBeginAngle3">270</system:Double> <system:Double x:Key = "ParticleEndAngle3">360</system:Double> <system:TimeSpan x:Key = "ParticleBeginTime3">00:00:01.052</system:TimeSpan> <Duration x:Key = "ParticleDuration3">00:00:00.750</Duration> <Style x:Key = "EllipseStyle" TargetType = "Ellipse"> <Setter Property = "Width" Value = "{StaticResource ParticleRadius}"/> <Setter Property = "Height" Value = "{StaticResource ParticleRadius}"/> <Setter Property = "Fill" Value = "{StaticResource ParticleColor}"/> <Setter Property = "RenderTransformOrigin" Value = "0.5, 0.5"/> <Setter Property = "Opacity" Value = "{StaticResource ParticleOpacity}"/> </Style> </Grid.Resources> <Canvas Width = "1" Height = "1" Margin="0,0,0,0"> <Canvas.Triggers> <EventTrigger RoutedEvent = "Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard BeginTime = "{StaticResource StoryBoardBeginTimeP0}" Duration = "{StaticResource StoryBoardDuration}" RepeatBehavior = "Forever"> <DoubleAnimation Storyboard.TargetName = "p0" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle1}" To = "{StaticResource ParticleEndAngle1}" BeginTime = "{StaticResource ParticleBeginTime1}" Duration = "{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName = "p0" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle2}" To = "{StaticResource ParticleEndAngle2}" BeginTime = "{StaticResource ParticleBeginTime2}" Duration = "{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName = "p0" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle3}" To = "{StaticResource ParticleEndAngle3}" BeginTime = "{StaticResource ParticleBeginTime3}" Duration = "{StaticResource ParticleDuration3}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime = "{StaticResource StoryBoardBeginTimeP1}" Duration = "{StaticResource StoryBoardDuration}" RepeatBehavior = "Forever"> <DoubleAnimation Storyboard.TargetName = "p1" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle1}" To = "{StaticResource ParticleEndAngle1}" BeginTime = "{StaticResource ParticleBeginTime1}" Duration = "{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName = "p1" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle2}" To = "{StaticResource ParticleEndAngle2}" BeginTime = "{StaticResource ParticleBeginTime2}" Duration = "{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName = "p1" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle3}" To = "{StaticResource ParticleEndAngle3}" BeginTime = "{StaticResource ParticleBeginTime3}" Duration = "{StaticResource ParticleDuration3}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime = "{StaticResource StoryBoardBeginTimeP2}" Duration = "{StaticResource StoryBoardDuration}" RepeatBehavior = "Forever"> <DoubleAnimation Storyboard.TargetName = "p2" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle1}" To = "{StaticResource ParticleEndAngle1}" BeginTime = "{StaticResource ParticleBeginTime1}" Duration = "{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName = "p2" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle2}" To = "{StaticResource ParticleEndAngle2}" BeginTime = "{StaticResource ParticleBeginTime2}" Duration = "{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName = "p2" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle3}" To = "{StaticResource ParticleEndAngle3}" BeginTime = "{StaticResource ParticleBeginTime3}" Duration = "{StaticResource ParticleDuration3}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime = "{StaticResource StoryBoardBeginTimeP3}" Duration = "{StaticResource StoryBoardDuration}" RepeatBehavior = "Forever"> <DoubleAnimation Storyboard.TargetName = "p3" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle1}" To = "{StaticResource ParticleEndAngle1}" BeginTime = "{StaticResource ParticleBeginTime1}" Duration = "{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName = "p3" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle2}" To = "{StaticResource ParticleEndAngle2}" BeginTime = "{StaticResource ParticleBeginTime2}" Duration = "{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName = "p3" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle3}" To = "{StaticResource ParticleEndAngle3}" BeginTime = "{StaticResource ParticleBeginTime3}" Duration = "{StaticResource ParticleDuration3}"/> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard BeginTime = "{StaticResource StoryBoardBeginTimeP4}" Duration = "{StaticResource StoryBoardDuration}" RepeatBehavior = "Forever"> <DoubleAnimation Storyboard.TargetName = "p4" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle1}" To = "{StaticResource ParticleEndAngle1}" BeginTime = "{StaticResource ParticleBeginTime1}" Duration = "{StaticResource ParticleDuration1}"/> <DoubleAnimation Storyboard.TargetName = "p4" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle2}" To = "{StaticResource ParticleEndAngle2}" BeginTime = "{StaticResource ParticleBeginTime2}" Duration = "{StaticResource ParticleDuration2}"/> <DoubleAnimation Storyboard.TargetName = "p4" Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" From = "{StaticResource ParticleBeginAngle3}" To = "{StaticResource ParticleEndAngle3}" BeginTime = "{StaticResource ParticleBeginTime3}" Duration = "{StaticResource ParticleDuration3}"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Border x:Name = "p0" Background = "{StaticResource ParticleBackgroundColor}" Opacity = "{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/> <RotateTransform Angle = "{StaticResource ParticleOriginAngleP0}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name = "p1" Background = "{StaticResource ParticleBackgroundColor}" Opacity = "{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/> <RotateTransform Angle = "{StaticResource ParticleOriginAngleP1}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name = "p2" Background = "{StaticResource ParticleBackgroundColor}" Opacity = "{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/> <RotateTransform Angle = "{StaticResource ParticleOriginAngleP2}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name = "p3" Background = "{StaticResource ParticleBackgroundColor}" Opacity = "{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/> <RotateTransform Angle = "{StaticResource ParticleOriginAngleP3}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> <Border x:Name = "p4" Background = "{StaticResource ParticleBackgroundColor}" Opacity = "{StaticResource ParticleOpacity}"> <Border.RenderTransform> <RotateTransform/> </Border.RenderTransform> <Border.RenderTransformOrigin> <Point X = "{StaticResource RotationPointX}" Y = "{StaticResource RotationPointY}"/> </Border.RenderTransformOrigin> <Ellipse Style = "{StaticResource EllipseStyle}"> <Ellipse.RenderTransform> <TransformGroup> <TranslateTransform X = "{StaticResource StartingPointX}" Y = "{StaticResource StartingPointY}"/> <RotateTransform Angle = "{StaticResource ParticleOriginAngleP4}"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Border> </Canvas> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>在构建中发现,一开始在设定绑定时,写成<SolidColorBrush x:Key = "ParticleColor" Color = "{Binding Path=FillColor}" />一直都无法绑定成功,后来查了资料,改成<SolidColorBrush x:Key = "ParticleColor" Color = "{Binding Path=FillColor,RelativeSource={RelativeSource TemplatedParent}}" /> 后成功。
4、编辑Loading.cs文件,对自定义属性FillColor和逻辑进行编码:
5、编译,如果无误后,可以添加WPF应用程序WpfAppLoadingTest进行测试(添加项目引用)。
打开MainWindow.xaml,将Loading控件拖放到设计界面上,如下图所示:
6、控件颜色修改,选中控件,在属性栏中进行配置即可:
7.总结
可以看到WPF自定义控件还是比较容易的,但是难点在于UI的设计,如果需要做的美观,需要美工的参与,而且需要转换成XAML。
以上就是WPF实现炫酷Loading控件的全部内容,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用•js需要引入jquery只用到了一点点js&
和之前一样首先看一下WPF钟表效果图是不是很炫酷,上面的那个花都是带有动画效果的图片。接下来就是代码了。首先看一下整个场景的布局搭建
在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress我写写使用步骤自定义vi
前言之前的一篇文章:基于RxJava实现酷炫启动页中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能。效果如下图:
本文实例为大家分享了Unity使用摄像机实现望远镜效果的具体代码,供大家参考,具体内容如下听起来挺酷炫,其实超简单,就是控制摄像机的fieldOfView:us