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"/>
Quality of Data 