CQ-CSER

计算机爱好者

WPF中自定义漂亮的进度条

Posted on | 一月 25, 2010 | No Comments

wpf中自带的进度条是这个样子德。

 

在2003中这个进度条的样子就会变得非常难看。

在wpf中您可以自己制作任意样式的进度条。如下图：

 

UserControl.xaml

 

用户控件

    <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"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="120" Height="120" >

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="20.1696"
                         Canvas.Top="9.76358"
                         Stretch="Fill" Fill="Orange"
                         Opacity="1.0"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="2.86816"
                         Canvas.Top="29.9581" Stretch="Fill"
                         Fill="Black" Opacity="0.9"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="5.03758e-006"
                         Canvas.Top="57.9341" Stretch="Fill"
                         Fill="Black" Opacity="0.8"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="12.1203"
                         Canvas.Top="83.3163" Stretch="Fill"
                         Fill="Black" Opacity="0.7"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="36.5459"
                         Canvas.Top="98.138" Stretch="Fill"
                         Fill="Black" Opacity="0.6"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="64.6723"
                         Canvas.Top="96.8411" Stretch="Fill"
                         Fill="Black" Opacity="0.5"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="87.6176"
                         Canvas.Top="81.2783" Stretch="Fill"
                         Fill="Black" Opacity="0.4"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="98.165"
                         Canvas.Top="54.414" Stretch="Fill"
                         Fill="Black" Opacity="0.3"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="92.9838"
                         Canvas.Top="26.9938" Stretch="Fill"
                         Fill="Black" Opacity="0.2"/>

            <Ellipse Width="21.835" Height="21.862"
                         Canvas.Left="47.2783"
                         Canvas.Top="0.5" Stretch="Fill"
                         Fill="Black" Opacity="0.1"/>

            <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:01"
                                     RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

        </Canvas>

    </Grid>

 

 

UserControl.xaml.cs

 

后台代码

        public UserControl1()
        {
            InitializeComponent();

            Timeline.DesiredFrameRateProperty.OverrideMetadata(
                       typeof(Timeline),
                           new FrameworkPropertyMetadata { DefaultValue = 20 });
        }

 

 

程序中添加对此用户控件的命名空间

    <Grid>
        <local:UserControl1></local:UserControl1>
    </Grid>

相关文章:

  1. wpf初体验
  2. 跟老外学Silverlight游戏 之一 新建项目
  3. 什么是WPF
  4. 跟老外学Silverlight游戏 之三 消除名单
  5. SLIVERLIGHT播放器控件
Category: Silverlight, WEB
Tags: >

评论|Comments

留言|Leave a Reply





  • Archives

  • SUNSHINE

    • About

    本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

    订阅

    Search

    Admin