首页新闻找找看学习计划

wpf/silverlight如何写出如下弧向的渐变效果?

0
悬赏园豆:20 [已解决问题] 解决于 2017-10-02 16:21

这原本时一个Progressbar,被我改成了这样的模板。

引入了:xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

 1 <Style x:Key="LoopProcessBar" TargetType="{x:Type ProgressBar}">
 2             <Setter Property="Background" Value="#E2E2E2"/>
 3             <Setter Property="Width" Value="300"/>
 4             <Setter Property="Height" Value="300"/>
 5             <Setter Property="BorderBrush">
 6                 <Setter.Value>
 7                     <LinearGradientBrush>
 8                         <GradientStop Offset="1" Color="#3185BF"/>
 9                         <GradientStop Offset="0" Color="Transparent"/>
10                     </LinearGradientBrush>
11                 </Setter.Value>
12             </Setter>
13             <Setter Property="BorderThickness" Value="60"/>
14             <Setter Property="Foreground" Value="#3185BF"/>
15             <Setter Property="Maximum" Value="100"/>
16             <Setter Property="Minimum" Value="0"/>
17             <Setter Property="IsTabStop" Value="False"/>
18             <Setter Property="IsHitTestVisible" Value="False"/>
19             <Setter Property="Template">
20                 <Setter.Value>
21                     <ControlTemplate TargetType="{x:Type ProgressBar}">
22                         <Viewbox Stretch="Uniform"  VerticalAlignment="Center" HorizontalAlignment="Center">
23                             <Grid   SnapsToDevicePixels="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
24                                 <!--背景环-->
25                                 <ed:Arc 
26                                     ArcThickness="12"
27                                     StartAngle="0" Fill="{TemplateBinding Background}" EndAngle="360" Stretch="None" x:Name="arcOuter" />
28                                 <!--值-环-->
29                                 <ed:Arc  x:Name="arcValue" 
30                                     ArcThickness="12"
31                                     StartAngle="0" Fill="{TemplateBinding BorderBrush}"
32                                          EndAngle="{Binding Value,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent},
33                                     Converter={StaticResource ProgressBarValueToAngleConverter}}"
34                                 Stretch="None"  Panel.ZIndex="2" >
35                                     
36 
37                                 </ed:Arc>
38                                 
39                                 <!--数值-->
40                                 <TextBlock FontSize="34" 
41                                        Text="{Binding Value,Mode=OneWay,RelativeSource={RelativeSource TemplatedParent},StringFormat={}{0}%}" 
42                                        VerticalAlignment="Center" HorizontalAlignment="Center"/>
43                             </Grid>
44                         </Viewbox>
45                         <ControlTemplate.Triggers>
46                             <Trigger Property="Value" Value="100">
47                                 <Setter TargetName="arcValue" Property="Fill" Value="#3185BF"/>
48                             </Trigger>
49                         </ControlTemplate.Triggers>
50                     </ControlTemplate>
51                 </Setter.Value>
52             </Setter>
53         </Style>

由于标记部分使用的是固定的线性画刷,所以只有在progressbar的value为某些值是才能达到我想要的效果。

 

.NetDomainer的主页 .NetDomainer | 初学一级 | 园豆:136
提问于:2016-10-01 23:37
< >
分享
最佳答案
1

有些时候,你可以换一个角度去思考问题,不一定非要用progressbar才可以达成这个效果的呀。

我一般会用两个同心圆,一大一小就可以造出这个进度条了。再用一个正方形做渐变,把正方形切成四分之一弧形,正方形的一个角对准圆心做旋转就OK了。

 

收获园豆:20
中文代码 | 小虾三级 |园豆:951 | 2016-10-02 15:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册