Quality of Data

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:

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

<Border x:Name="spinnerMask" BorderThickness="6" CornerRadius="25" BorderBrush="White"/>
 <Rectangle>
 <Rectangle.OpacityMask>
 <VisualBrush Visual="{Binding ElementName=spinnerMask}"/>
 </Rectangle.OpacityMask>
 <Rectangle.Fill>
 <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" />
 </LinearGradientBrush>
 </Rectangle.Fill>
 </Rectangle>
 <Rectangle Fill="#FF068206">
 <Rectangle.OpacityMask>
 <VisualBrush Visual="{Binding ElementName=spinnerMask}"/>
 </Rectangle.OpacityMask>
 <Rectangle.Clip>
 <RectangleGeometry Rect="0,0,50,25"/>
 </Rectangle.Clip>
 </Rectangle>
 </Grid>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
 </TextBox.Style>
 </TextBox>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
 </Grid.Resources>

And here is how to use it:

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