Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I made my own custom <code>BusyIndicator</code> from Silverlight Toolkit</p> <p>Here is what you need:</p> <ol> <li><p>Set the System namespace in your style file:</p> <p>xmlns:System="clr-namespace:System;assembly=mscorlib"</p></li> <li><p>Put the style/template in your style file:</p> <pre><code>&lt;ControlTemplate x:Key="AjaxBusyIndicatorControlTemplate" TargetType="toolkit:BusyIndicator"&gt; &lt;Grid x:Name="ColorLayer"&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="VisibilityStates"&gt; &lt;VisualState x:Name="Hidden"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Collapsed&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Collapsed&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Visible"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Visible&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Visible&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;VisualStateGroup x:Name="BusyStatusStates"&gt; &lt;VisualState x:Name="Idle"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;System:Boolean&gt;True&lt;/System:Boolean&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Busy"&gt; &lt;Storyboard RepeatBehavior="Forever" AutoReverse="False"&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="loader"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="359.999"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content"&gt; &lt;DiscreteObjectKeyFrame KeyTime="00:00:00"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;System:Boolean&gt;False&lt;/System:Boolean&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;ContentControl x:Name="content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/&gt; &lt;Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/&gt; &lt;ContentPresenter x:Name="busycontent"&gt; &lt;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"&gt; &lt;Path.RenderTransform&gt; &lt;CompositeTransform/&gt; &lt;/Path.RenderTransform&gt; &lt;Path.Fill&gt; &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt; &lt;GradientStop Color="#FF0089FF" Offset="0"/&gt; &lt;GradientStop Color="White" Offset="1"/&gt; &lt;/LinearGradientBrush&gt; &lt;/Path.Fill&gt; &lt;/Path&gt; &lt;/ContentPresenter&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;Style x:Key="AjaxBusyIndicator" TargetType="toolkit:BusyIndicator" &gt; &lt;Setter Property="Template" Value="{StaticResource AjaxBusyIndicatorControlTemplate}"/&gt; &lt;/Style&gt; </code></pre></li> <li><p>Use it in your XAML:</p></li> </ol> <p></p> <pre><code>&lt;Grid x:Name="LayoutRoot" Background="White"&gt; &lt;toolkit:BusyIndicator IsBusy="True" Style="{StaticResource AjaxBusyIndicator}"&gt; &lt;TextBox Text="TEST test test" /&gt; &lt;/toolkit:BusyIndicator&gt; &lt;/Grid&gt; </code></pre> <p></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload