在数据展示中,经常会用到圆弧和扇形来表示数值大小,不仅美观且空间利用率很高。以下是借助本人开发的Arc和Pie控件实现的数据展示工具:
控件源代码请见我的另一篇博客:
自实现Arc控件
上面三个展示效果的代码也贴出来:
<Grid Margin="0,0,350,0">
<local:Arc x:Name="arc" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="200" Stroke="SkyBlue" StrokeThickness="15" StrokeDashArray="0.2,0.1" HorizontalAlignment="Center" VerticalAlignment="Center">
<local:Arc.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:10" Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</local:Arc.Triggers>
</local:Arc>
<TextBlock MaxWidth="60" Text="{Binding ElementName=arc,Path=EndAngle}" FontSize="25" FontFamily="#DigifaceWide" Foreground="SkyBlue" FontWeight="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Margin="0,0,0,0">
<local:Pie x:Name="pie" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="200" Fill="#FFA2CB15" HorizontalAlignment="Center" VerticalAlignment="Center">
<local:Pie.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:10" Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</local:Pie.Triggers>
</local:Pie>
<TextBlock MaxWidth="60" Text="{Binding ElementName=pie,Path=EndAngle}" FontSize="25" FontFamily="#DigifaceWide" Foreground="Red" FontWeight="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Margin="350,0,0,0">
<local:Arc x:Name="arc1" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="360" Stroke="#8555" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<local:Arc x:Name="arc2" Width="115" Height="115" Rect="7.5,7.5,100,100" StartAngle="0" EndAngle="1" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" HorizontalAlignment="Center" VerticalAlignment="Center">
<local:Arc.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="DimGray" Offset="1"/>
</LinearGradientBrush>
</local:Arc.Stroke>
<local:Arc.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:10" Duration="0:0:2" From="0" To="720" AccelerationRatio="0.2" DecelerationRatio="0.8" RepeatBehavior="Forever" Storyboard.TargetProperty="StartAngle"/>
<DoubleAnimation BeginTime="0:0:10" Duration="0:0:2" From="0" To="721" AccelerationRatio="0" DecelerationRatio="1" RepeatBehavior="Forever" Storyboard.TargetProperty="EndAngle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</local:Arc.Triggers>
</local:Arc>
</Grid>
欢迎有更多想实现的效果与我联系!