WPF进度条系列②旋转小圆圈

 写在之前:

关于WPF的样式,我也是学习了很多朋友的文章才有了下面的东西,因为时间有些久远 & 备份的链接也都不在了。

所以,究竟是看过哪些文章,也是记不清楚了……

请见谅。

--------------------------------我是害羞的分割线-----------------------------------

旋转小圆圈进度条见效果:

xaml:

<UserControl x:Class="AppHost.ProbarRotate"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="EllipseStyle" TargetType="Ellipse">
                <Setter Property="Width" Value="16"/>
                <Setter Property="Height" Value="16"/>
                <Setter Property="Stretch" Value="Fill"/>
                <Setter Property="Fill" Value="#FF2CB6E7"/>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent"
              HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="SpinnerScale"   ScaleX="1.0" ScaleY="1.0" />
        </Grid.RenderTransform>
        <Canvas RenderTransformOrigin="0.5,0.5"  Width="120" Height="120"
                HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Ellipse  Style="{StaticResource EllipseStyle}" Opacity="1.0"
                      Canvas.Left="14.64"  Canvas.Top="14.64" />
            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.8"
                     Canvas.Left="0" Canvas.Top="50"  />
            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.6"
                     Canvas.Left="14.64" Canvas.Top="85.35"  />
            <Ellipse  Style="{StaticResource EllipseStyle}" Opacity="0.4"
                      Canvas.Left="50"  Canvas.Top="100" />
            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.2"
                     Canvas.Left="85.35" Canvas.Top="85.35"  />
            <Ellipse Style="{StaticResource EllipseStyle}" Opacity="0.1"
                     Canvas.Left="100" Canvas.Top="50"  />
            <Canvas.RenderTransform>
                <RotateTransform x:Name="SpinnerRotate"  Angle="0" />
            </Canvas.RenderTransform>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="ContentControl.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                    Storyboard.TargetName  ="SpinnerRotate"
                                    Storyboard.TargetProperty ="(RotateTransform.Angle)"
                                     From="0" To="360"  Duration="0:0:05" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
        </Canvas>
    </Grid>
</UserControl>

使用方法与系列①类似。

时间: 2024-10-17 10:58:45

WPF进度条系列②旋转小圆圈的相关文章

wpf 进度条 下拉

<Window x:Class="WpfApplication1.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height

WPF 进度条ProgressBar

今天研究了一下wpf的进度条ProgressBar 1.传统ProgressBar WPF进度条ProgressBar 这个控件,如果直接写到循环里,会死掉,界面会卡死,不会有进度.需要把进度条放到单独的线程中. 传统的需要建立 Thread 或者使用 Timer,分别写在不同的方法中.但现在,使用 Dispatcher.Invoke 调用可以实现这个目的. for (int i = 0; i <= 10000; i++)            {                double v

WPF 进度条

前台新建一个控件ProgressBar控件,并命名为pbDown            WebRequest request = WebRequest.Create("http://files.cnblogs.com/fornet/404.rar");            WebResponse respone = request.GetResponse();            pbDown.Maximum = respone.ContentLength;           

WPF自定义控件第一 - 进度条控件

本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介绍下实现这个控件的步骤,最后会放出代码.还请高手们给出更好的思路.同时也希望这里的思路能给同道中人一些帮助.话不多说,开始正题. 实现中的一些代码采用了网上现有的方案,代码中通过注释标记了来源,再次对代码作者一并表示感谢. 首先放一张最终效果图. 节点可以被点击 控件会根据绑定的集合数据生成一系列节

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

Photoshop和WPF双剑配合,打造炫酷个性的进度条控件

现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或者AI设计文件(当然不是全部特征支持),最近研究了一下,也废了一番周折,好在最后实现了预期的效果.下面将step by step用示例说明如何先用PS构建一个矢量图形模板,然后用Expression Blend导入PSD文件,并获取PATH的Data值,为打造一款炫酷的个性进度条控件构建美观UI.

Android学习笔记:进度条ProgressBar的使用以及与AsyncTask的配合使用

ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.ProgressBar有如下几种常见样式 1.默认进度条的样式为圆圈(为中等大小的圆圈) <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" />

Android自定义控件:进度条的四种实现方式

前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源码在最后) 最近一直在学习自定义控件,搜了许多大牛们Blog里分享的小教程,也上GitHub找了一些类似的控件进行学习.发现读起来都不太好懂,就想写这么一篇东西作为学习笔记吧. 一.控件介绍: 进度条在App中非常常见,例如下载进度.加载图片.打开文章.打开网页等等--都需要这么一个效果让用户知道我们的App正在读取,以构造良好的

在C++中如何做出进度条

[来信] 尊敬的贺老师,我看了您的C++程序设计课觉得很有启发,对于第九周项目设计我有一个想法.怎么用程序实现安装进度百分比与进度条之间结合小程序.如: 不知道应该怎样实现,还请老师点播一二. [回信] 我不知你看的是哪一级的版本,不过这个无所谓. 参考http://blog.csdn.net/sxhelijian/article/details/8167913,其中给出了一个将数字"可视化"并且能直观比对的效果. 你附图给出的,是在图形用户界面下的效果.在C++的相关的开发环境中可以