Skip to content

Commit 8423b58

Browse files
ButchersBoyButchersBoy
committed
circular progress bar loveliness
1 parent e99c638 commit 8423b58

14 files changed

+547
-312
lines changed

‎MainDemo.Wpf/App.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Application x:Class="MaterialDesignColors.WpfExample.App"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
StartupUri="ProvingGround.xaml">
4+
StartupUri="MainWindow.xaml">
55
<Application.Resources>
66
<ResourceDictionary>
77
<ResourceDictionary.MergedDictionaries>

‎MainDemo.Wpf/MainDemo.Wpf.csproj

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@
106106
<Compile Include="ProvingGround.xaml.cs">
107107
<DependentUpon>ProvingGround.xaml</DependentUpon>
108108
</Compile>
109-
<Compile Include="ProvingGroundStuff\Converters.cs" />
110109
<Compile Include="TextFields.xaml.cs">
111110
<DependentUpon>TextFields.xaml</DependentUpon>
112111
</Compile>
@@ -236,6 +235,9 @@
236235
<ItemGroup>
237236
<Resource Include="favicon.ico" />
238237
</ItemGroup>
238+
<ItemGroup>
239+
<Folder Include="ProvingGroundStuff\" />
240+
</ItemGroup>
239241
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
240242
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
241243
Other similar extension points exist, see Microsoft.Common.targets.

‎MainDemo.Wpf/Progress.xaml

Lines changed: 204 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,222 @@
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
67
mc:Ignorable="d"
78
d:DesignHeight="300" d:DesignWidth="300">
9+
10+
<UserControl.Resources>
11+
<ResourceDictionary>
12+
<ResourceDictionary.MergedDictionaries>
13+
<!-- you only need bring this resource in if you want to specify the circular style statically -->
14+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ProgressBar.xaml" />
15+
</ResourceDictionary.MergedDictionaries>
16+
</ResourceDictionary>
17+
</UserControl.Resources>
18+
819
<Grid>
920
<Grid.ColumnDefinitions>
1021
<ColumnDefinition Width="Auto" />
1122
<ColumnDefinition Width="Auto" />
1223
<ColumnDefinition Width="*" />
1324
</Grid.ColumnDefinitions>
14-
<ProgressBar Orientation="Vertical" Value="25" Margin="24" />
15-
<ProgressBar Orientation="Vertical" IsIndeterminate="True" Grid.Column="1" Margin="24" />
16-
<StackPanel Grid.Column="2" HorizontalAlignment="Stretch">
25+
<Grid.RowDefinitions>
26+
<RowDefinition Height="Auto" />
27+
<RowDefinition Height="*" />
28+
</Grid.RowDefinitions>
29+
<!-- linear progress bars (the default style -->
30+
<ProgressBar Orientation="Vertical" Value="25" Margin="24" Grid.RowSpan="2" />
31+
<ProgressBar Orientation="Vertical" IsIndeterminate="True" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="24" />
32+
<StackPanel Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch">
1733
<ProgressBar Value="25" Margin="24" />
1834
<ProgressBar Value="50" Margin="24" />
1935
<ProgressBar Value="75" Margin="24" />
2036
<ProgressBar IsIndeterminate="True" Margin="24" />
2137
</StackPanel>
38+
39+
<!-- circular progress bars.. specify the MaterialDesignCicularProgressBar resource -->
40+
<Grid VerticalAlignment="Top" Grid.Column="2" Grid.Row="1">
41+
<Grid.RowDefinitions>
42+
<RowDefinition Height="Auto" />
43+
<RowDefinition Height="Auto" />
44+
<RowDefinition Height="Auto" />
45+
<RowDefinition Height="Auto" />
46+
<RowDefinition Height="Auto" />
47+
<RowDefinition Height="Auto" />
48+
<RowDefinition Height="Auto" />
49+
</Grid.RowDefinitions>
50+
<Grid.ColumnDefinitions>
51+
<ColumnDefinition Width="Auto" />
52+
<ColumnDefinition Width="*" />
53+
</Grid.ColumnDefinitions>
54+
55+
<TextBlock Grid.ColumnSpan="2" FontSize="16" TextWrapping="Wrap" TextAlignment="Center" HorizontalAlignment="Stretch"
56+
Margin="0 0 0 16">
57+
No extra control is required for the circular style, it is purely a standard ProgressBar, with the MaterialDesignCicularProgressBar style applied.
58+
</TextBlock>
59+
60+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
61+
x:Name="DeterminateCircularProgress"
62+
Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12" />
63+
<TextBlock Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" TextWrapping="Wrap">Standard deterministic progress bar, running from 0 to 100%. &#160;For the purpose of the demo, a storyboard is used to animate the .Value property.</TextBlock>
64+
65+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
66+
Value="35"
67+
IsIndeterminate="True"
68+
Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12"/>
69+
<TextBlock Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" TextWrapping="Wrap">Indeterminate progress bar, at 35%.</TextBlock>
70+
71+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
72+
Value="0"
73+
IsIndeterminate="True"
74+
Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12"/>
75+
<TextBlock Grid.Column="1" Grid.Row="3" VerticalAlignment="Center" TextWrapping="Wrap">Fully indeterminate progress bar, using .Value=0 to inform the theme.</TextBlock>
76+
77+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
78+
Value="20"
79+
IsIndeterminate="True"
80+
x:Name="IndeterminateToDeterminateCircularProgress"
81+
Grid.Row="4" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12" />
82+
<TextBlock Grid.Column="1" Grid.Row="4" VerticalAlignment="Center" TextWrapping="Wrap">An indeterminate job transitioning to a determinate job, completing to 100%. &#160;For the purpose of the demo, a storyboard is used to animate the .Value and .IsIndeterminate properties.</TextBlock>
83+
84+
<wpf:Card UniformCornerRadius="14" Padding="4"
85+
Grid.Row="5" Grid.Column="0"
86+
VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12">
87+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
88+
Value="50"
89+
IsIndeterminate="True"
90+
/>
91+
</wpf:Card>
92+
<TextBlock Grid.Row="5" Grid.Column="1" VerticalAlignment="Center" TextWrapping="Wrap">Wrap in a Card control to raise the material.</TextBlock>
93+
94+
<wpf:Card UniformCornerRadius="14"
95+
RenderTransformOrigin=".5,.5"
96+
Padding="4"
97+
Grid.Row="6" Grid.Column="0"
98+
VerticalAlignment="Center" HorizontalAlignment="Center" Margin="12 12 12 12">
99+
<ProgressBar Style="{StaticResource MaterialDesignCicularProgressBar}"
100+
x:Name="AnimatedProgressInCard"
101+
/>
102+
<wpf:Card.RenderTransform>
103+
<TransformGroup>
104+
<ScaleTransform x:Name="ScaleTransform" ScaleX="0" ScaleY="0" />
105+
</TransformGroup>
106+
</wpf:Card.RenderTransform>
107+
<wpf:Card.Style>
108+
<Style TargetType="wpf:Card" BasedOn="{StaticResource {x:Type wpf:Card}}">
109+
<Style.Resources>
110+
<Storyboard x:Key="FadeIn" FillBehavior="HoldEnd">
111+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
112+
<EasingDoubleKeyFrame Value="0" />
113+
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.8">
114+
<EasingDoubleKeyFrame.EasingFunction>
115+
<CircleEase EasingMode="EaseOut" />
116+
</EasingDoubleKeyFrame.EasingFunction>
117+
</EasingDoubleKeyFrame>
118+
</DoubleAnimationUsingKeyFrames>
119+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
120+
<EasingDoubleKeyFrame Value="0" />
121+
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.8">
122+
<EasingDoubleKeyFrame.EasingFunction>
123+
<CircleEase EasingMode="EaseOut" />
124+
</EasingDoubleKeyFrame.EasingFunction>
125+
</EasingDoubleKeyFrame>
126+
</DoubleAnimationUsingKeyFrames>
127+
</Storyboard>
128+
<Storyboard x:Key="FadeOut">
129+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
130+
<EasingDoubleKeyFrame Value="1" />
131+
<EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.8">
132+
<EasingDoubleKeyFrame.EasingFunction>
133+
<CircleEase EasingMode="EaseOut" />
134+
</EasingDoubleKeyFrame.EasingFunction>
135+
</EasingDoubleKeyFrame>
136+
</DoubleAnimationUsingKeyFrames>
137+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
138+
<EasingDoubleKeyFrame Value="1" />
139+
<EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.8">
140+
<EasingDoubleKeyFrame.EasingFunction>
141+
<CircleEase EasingMode="EaseOut" />
142+
</EasingDoubleKeyFrame.EasingFunction>
143+
</EasingDoubleKeyFrame>
144+
</DoubleAnimationUsingKeyFrames>
145+
</Storyboard>
146+
</Style.Resources>
147+
<Style.Triggers>
148+
<DataTrigger Binding="{Binding ElementName=AnimatedProgressInCard, Path=Value}" Value="20">
149+
<DataTrigger.EnterActions>
150+
<RemoveStoryboard BeginStoryboardName="FadeOut" />
151+
<BeginStoryboard Storyboard="{StaticResource FadeIn}" Name="FadeIn" />
152+
</DataTrigger.EnterActions>
153+
</DataTrigger>
154+
<DataTrigger Binding="{Binding ElementName=AnimatedProgressInCard, Path=Value}" Value="100">
155+
<DataTrigger.EnterActions>
156+
<RemoveStoryboard BeginStoryboardName="FadeIn" />
157+
<BeginStoryboard Storyboard="{StaticResource FadeOut}" Name="FadeOut" />
158+
</DataTrigger.EnterActions>
159+
</DataTrigger>
160+
</Style.Triggers>
161+
</Style>
162+
</wpf:Card.Style>
163+
164+
</wpf:Card>
165+
<TextBlock Grid.Row="6" Grid.Column="1" VerticalAlignment="Center" TextWrapping="Wrap">Apply some animations to the card to get funky!</TextBlock>
166+
167+
</Grid>
22168
</Grid>
169+
170+
<!-- these animations are used to control the circular progress bars' values, so we don't need
171+
code-behind or a view model to illustrate them in action
172+
-->
173+
<UserControl.Triggers>
174+
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
175+
<EventTrigger.Actions>
176+
<BeginStoryboard>
177+
<Storyboard TargetName="DeterminateCircularProgress" TargetProperty="Value" RepeatBehavior="Forever" Duration="0:0:3">
178+
<DoubleAnimation From="0" To="100" Duration="0:0:2.5" FillBehavior="Stop">
179+
<DoubleAnimation.EasingFunction>
180+
<CircleEase EasingMode="EaseOut" />
181+
</DoubleAnimation.EasingFunction>
182+
</DoubleAnimation>
183+
</Storyboard>
184+
</BeginStoryboard>
185+
<BeginStoryboard>
186+
<Storyboard TargetName="IndeterminateToDeterminateCircularProgress" RepeatBehavior="Forever" Duration="0:0:9">
187+
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsIndeterminate">
188+
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:4" />
189+
</BooleanAnimationUsingKeyFrames>
190+
<DoubleAnimation From="20" To="100" Duration="0:0:2.5" BeginTime="0:0:4"
191+
Storyboard.TargetProperty="Value"
192+
FillBehavior="HoldEnd">
193+
<DoubleAnimation.EasingFunction>
194+
<CircleEase EasingMode="EaseOut" />
195+
</DoubleAnimation.EasingFunction>
196+
</DoubleAnimation>
197+
</Storyboard>
198+
</BeginStoryboard>
199+
<BeginStoryboard>
200+
<Storyboard TargetName="AnimatedProgressInCard" RepeatBehavior="Forever">
201+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Value">
202+
<DiscreteDoubleKeyFrame Value="0" KeyTime="0"/>
203+
<DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0.1"/>
204+
<!-- we have used a 20% startup to fade in on the actual control -->
205+
<DiscreteDoubleKeyFrame Value="20" KeyTime="0:0:1"/>
206+
<!-- pretend we are indeterminate for 4 seconds -->
207+
<DiscreteDoubleKeyFrame Value="20" KeyTime="0:0:4"/>
208+
<!-- now we become determinate and complete to 100% -->
209+
<SplineDoubleKeyFrame Value="100" KeyTime="0:0:8"/>
210+
<SplineDoubleKeyFrame Value="100" KeyTime="0:0:9"/>
211+
</DoubleAnimationUsingKeyFrames>
212+
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsIndeterminate" Duration="0:0:10">
213+
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0.1" />
214+
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3.9" />
215+
<!-- now we become determinate and complete to 100% -->
216+
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:4" />
217+
</BooleanAnimationUsingKeyFrames>
218+
</Storyboard>
219+
</BeginStoryboard>
220+
</EventTrigger.Actions>
221+
</EventTrigger>
222+
</UserControl.Triggers>
23223
</UserControl>

0 commit comments

Comments
 (0)