A spinner and progress for xaml, wpf.

I wanted a spinner control, and a nice one. Google searches did not help, although heaps of recommendations and a few free controls could be found, non of them was satisfying enough for what I wanted to do. And of-course I didn’t want some C# code-behind. So I opened XamlPadX and started building one for myself.

Result is something like this and I am happy with it:

It is nothing more than a template for ProgressBar. By the way, setting the IsInditerminate  to True makes the number in the middle to disappear, resulting a generic wait spinner.

Below is the xaml to achieve the spinner progress bar, you can put it some where in your resources and use it:

 <Style TargetType="ProgressBar" x:Key="SpinnerProgress">
 <Setter Property="Template">
 <ControlTemplate TargetType="ProgressBar">
 <ProgressBar x:Name="pgBar" Value="{TemplateBinding Value}" Visibility="Collapsed" IsIndeterminate="{TemplateBinding IsIndeterminate}"/>
 <TextBox Background="Red" Text="{Binding ElementName=pgBar, Path=Value}">
 <Style TargetType="{x:Type TextBox}">
 <Setter Property="Template">
 <ControlTemplate TargetType="TextBox">
 <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
 <TextBlock Text="{TemplateBinding Text}">
 <Style TargetType="TextBlock">
 <DataTrigger Binding="{Binding ElementName=pgBar, Path=IsIndeterminate}" Value="True">
 <Setter Property="Visibility" Value="Collapsed"/>
 <TextBlock Text="%"/>
 <Grid Width="50" Height="50" x:Name="mainGrid">
 <RotateTransform Angle="0" CenterX="25" CenterY="25" />
 <EventTrigger RoutedEvent="Grid.Loaded">
 <Storyboard RepeatBehavior="Forever">
 <DoubleAnimation From="0" To="360" Duration="00:00:00.750" Storyboard.TargetName="mainGrid" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" />

<Border x:Name="spinnerMask" BorderThickness="6" CornerRadius="25" BorderBrush="White"/>
 <VisualBrush Visual="{Binding ElementName=spinnerMask}"/>
 <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
 <GradientStop Color="#FF068206" Offset="0" />
 <GradientStop Color="#FF72CE72" Offset="0.198" />
 <GradientStop Color="#FFC2FFC2" Offset="0.48" />
 <GradientStop Color="#FFC2FFC2" Offset="0.52" />
 <GradientStop Color="#FF72CE72" Offset="0.891" />
 <GradientStop Color="#FF068206" Offset="1" />
 <Rectangle Fill="#FF068206">
 <VisualBrush Visual="{Binding ElementName=spinnerMask}"/>
 <RectangleGeometry Rect="0,0,50,25"/>

And here is how to use it:

<ProgressBar Style="{StaticResource ResourceKey=SpinnerProgress}" IsIndeterminate="False" Value="12"/>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: