-
Notifications
You must be signed in to change notification settings - Fork 0
/
SegmentedCircularProgressBar.xaml
88 lines (83 loc) · 5.66 KB
/
SegmentedCircularProgressBar.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<UserControl x:Class="CircularProgressBar.Controls.SegmentedCircularProgressBar"
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:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:local="clr-namespace:CircularProgressBar.Controls"
d:DesignHeight="450" d:DesignWidth="800">
<Grid DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:SegmentedCircularProgressBar}}">
<dxga:CircularGaugeControl >
<dxga:CircularGaugeControl.Scales>
<dxga:ArcScale StartAngle="90" EndAngle="450"
x:Name="arc"
StartValue="{Binding MinValue}"
EndValue="{Binding MaxValue}"
ShowMajorTickmarks="False"
ShowMinorTickmarks="False"
ShowLabels="false"
LayoutMode="Circle" Margin="15">
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions Offset="-50"/>
</dxga:ArcScale.LabelOptions>
<!--Text shown in the center-->
<dxga:ArcScale.CustomElements>
<dxga:ScaleCustomElement >
<Viewbox>
<TextBlock Margin="28" FontWeight="Medium"
FontFamily="Segoe UI"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="{Binding Value, StringFormat='{}{0:n0}%'}"
Foreground="{Binding TextBrush}">
</TextBlock>
</Viewbox>
</dxga:ScaleCustomElement>
</dxga:ArcScale.CustomElements>
<dxga:ArcScale.RangeBars>
<!--A gray progress circle in the background-->
<dxga:ArcScaleRangeBar AnchorValue="{Binding ElementName=arc, Path=StartValue}"
Value="{Binding ElementName=arc, Path=EndValue}">
<dxga:ArcScaleRangeBar.Options>
<dxga:ArcScaleRangeBarOptions Offset="-20" Thickness="{Binding Thickness}"/>
</dxga:ArcScaleRangeBar.Options>
<dxga:ArcScaleRangeBar.Presentation>
<dxga:DefaultArcScaleRangeBarPresentation Fill="#E6E6E6"/>
</dxga:ArcScaleRangeBar.Presentation>
</dxga:ArcScaleRangeBar>
<!--A colored progress bar circle-->
<dxga:ArcScaleRangeBar AnchorValue="0" Value="{Binding Value}">
<dxga:ArcScaleRangeBar.Options>
<dxga:ArcScaleRangeBarOptions Offset="-20"
Thickness="{Binding ProgressThickness}"/>
</dxga:ArcScaleRangeBar.Options>
<dxga:ArcScaleRangeBar.Presentation>
<dxga:CustomArcScaleRangeBarPresentation >
<dxga:CustomArcScaleRangeBarPresentation.RangeBarTemplate>
<ControlTemplate >
<Grid RenderTransformOrigin="0.5,0.5"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:SegmentedCircularProgressBar}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="1" Grid.Column="0" Fill="{Binding Segment1Brush}"/>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="{Binding Segment2Brush}"/>
<Rectangle Grid.Row="0" Grid.Column="1" Fill="{Binding Segment3Brush}"/>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="{Binding Segment4Brush}"/>
</Grid>
</ControlTemplate>
</dxga:CustomArcScaleRangeBarPresentation.RangeBarTemplate>
</dxga:CustomArcScaleRangeBarPresentation>
</dxga:ArcScaleRangeBar.Presentation>
</dxga:ArcScaleRangeBar>
</dxga:ArcScale.RangeBars>
</dxga:ArcScale>
</dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>
</Grid>
</UserControl>