silverlightcoding-stylebusyindicator

Ajax-style Style for Silverlight BusyIndicator?


I'm looking for an example Style to change the look of the Silverlight BusyIndicator to more like the "spinning wheel" look of AJAX apps.

A lap around google produces some links to where people are creating new controls to achieve the same thing (I suspect they pre-date the BusyIndicator) but I'd rather skin the BusyIndicator if possible.

Anyone pont me in the right direction?

Thanks

Mark


Solution

  • I made my own custom BusyIndicator from Silverlight Toolkit

    Here is what you need:

    1. Set the System namespace in your style file:

      xmlns:System="clr-namespace:System;assembly=mscorlib"

    2. Put the style/template in your style file:

      <ControlTemplate x:Key="AjaxBusyIndicatorControlTemplate" TargetType="toolkit:BusyIndicator">
          <Grid x:Name="ColorLayer">               
              <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup x:Name="VisibilityStates">
                      <VisualState x:Name="Hidden">
                          <Storyboard>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <Visibility>Collapsed</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <Visibility>Collapsed</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                      <VisualState x:Name="Visible">
                          <Storyboard>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <Visibility>Visible</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <Visibility>Visible</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                  </VisualStateGroup>
                  <VisualStateGroup x:Name="BusyStatusStates">
                      <VisualState x:Name="Idle">
                          <Storyboard>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <System:Boolean>True</System:Boolean>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                      <VisualState x:Name="Busy">
                          <Storyboard RepeatBehavior="Forever" AutoReverse="False">
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="loader">
                                  <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                  <EasingDoubleKeyFrame KeyTime="0:0:1" Value="359.999"/>
                              </DoubleAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
                                  <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                      <DiscreteObjectKeyFrame.Value>
                                          <System:Boolean>False</System:Boolean>
                                      </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                              </ObjectAnimationUsingKeyFrames>
                          </Storyboard>
                      </VisualState>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <ContentControl x:Name="content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
              <Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/>
              <ContentPresenter x:Name="busycontent">
                  <Path x:Name="loader" Height="19" Width="19" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness="0.2" RenderTransformOrigin="0.5,0.5"
                      Data="M9.5,3 C5.9101491,3 3,5.9101491 3,9.5 C3,13.08985 5.9101491,16 9.5,16 C13.08985,16 16,13.08985 16,9.5 C16,5.9101491 13.08985,3 9.5,3 z M9.5,0 C14.746705,0 19,4.2532949 19,9.5 C19,14.746705 14.746705,19 9.5,19 C4.2532949,19 0,14.746705 0,9.5 C0,4.2532949 4.2532949,0 9.5,0 z">
                      <Path.RenderTransform>
                          <CompositeTransform/>
                      </Path.RenderTransform>
                      <Path.Fill>
                          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                              <GradientStop Color="#FF0089FF" Offset="0"/>
                              <GradientStop Color="White" Offset="1"/>
                          </LinearGradientBrush>
                      </Path.Fill>
                  </Path>
              </ContentPresenter>
          </Grid>
      </ControlTemplate>
      
      <Style x:Key="AjaxBusyIndicator" TargetType="toolkit:BusyIndicator"  >
          <Setter Property="Template" Value="{StaticResource AjaxBusyIndicatorControlTemplate}"/>
      </Style>
      
    3. Use it in your XAML:

    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:BusyIndicator IsBusy="True" Style="{StaticResource AjaxBusyIndicator}">
            <TextBox Text="TEST test test" />
        </toolkit:BusyIndicator>
    </Grid>