ShrlAlgoToolkit/Melskin/Controls/Spin.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:converters="clr-namespace:Melskin.Converters"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type controls:Spin}">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Foreground" Value="{DynamicResource PrimaryNormalBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:Spin}">
                    <Grid>
                        <!--  Content  -->
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            x:Name="Content">
                            <ContentPresenter
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <!--  IndicatorPanel  -->
                        <Grid
                            VerticalAlignment="Center"
                            Visibility="{Binding Spinning, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static converters:BooleanToVisibilityConverter.CollapsedInstance}}"
                            x:Name="IndicatorPanel">
                            <Grid.RowDefinitions>
                                <!--  Icon  -->
                                <RowDefinition />
                                <!--  Text  -->
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!--  Indicator  -->
                            <ContentPresenter
                                Content="{TemplateBinding Indicator}"
                                Grid.RowSpan="2"
                                Visibility="Hidden"
                                x:Name="Indicator" />
                            <!--  Dot  -->
                            <Grid
                                Grid.RowSpan="2"
                                Height="{Binding Width, Mode=OneWay, RelativeSource={RelativeSource Self}}"
                                RenderTransformOrigin="0.5,0.5"
                                Width="20"
                                x:Name="Dot">
                                <Grid.RenderTransform>
                                    <RotateTransform />
                                </Grid.RenderTransform>
                                <Grid.Resources>
                                    <Style TargetType="{x:Type Ellipse}">
                                        <Setter Property="Opacity" Value="0.3" />
                                        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
                                        <Setter Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
                                        <Setter Property="Height" Value="{Binding Width, Mode=OneWay, RelativeSource={RelativeSource Self}}" />
                                        <Setter Property="RenderTransform">
                                            <Setter.Value>
                                                <ScaleTransform ScaleX="0.75" ScaleY="0.75" />
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <Ellipse
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top"
                                    Width="9"
                                    x:Name="Dot1" />
                                <Ellipse
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Width="{Binding Width, Mode=OneWay, ElementName=Dot1}"
                                    x:Name="Dot2" />
                                <Ellipse
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Bottom"
                                    Width="{Binding Width, Mode=OneWay, ElementName=Dot1}"
                                    x:Name="Dot3" />
                                <Ellipse
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Bottom"
                                    Width="{Binding Width, Mode=OneWay, ElementName=Dot1}"
                                    x:Name="Dot4" />
                            </Grid>
                            <ContentPresenter
                                Content="{TemplateBinding Tip}"
                                Grid.Row="1"
                                x:Name="LoadingText" />
                        </Grid>
                        <!--  Mask  -->
                        <Rectangle
                            Fill="Transparent"
                            Visibility="Collapsed"
                            x:Name="Mask" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SpinStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Spun" GeneratedDuration="0:0:0.2">
                                        <Storyboard>
                                            <!--  Content  -->
                                            <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" />
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Spun">
                                    <Storyboard>
                                        <!--  Content  -->
                                        <DoubleAnimation
                                            Duration="0:0:0.2"
                                            Storyboard.TargetName="Content"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0.5" />
                                        <!--  Dot  -->
                                        <DoubleAnimation
                                            Duration="0:0:1.2"
                                            From="45"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Dot"
                                            Storyboard.TargetProperty="RenderTransform.Angle"
                                            To="405" />
                                        <DoubleAnimation
                                            AutoReverse="True"
                                            Duration="0:0:1"
                                            From="0.3"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Dot1"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                                        <DoubleAnimation
                                            AutoReverse="True"
                                            BeginTime="0:0:0.4"
                                            Duration="0:0:1"
                                            From="0.3"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Dot2"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                                        <DoubleAnimation
                                            AutoReverse="True"
                                            BeginTime="0:0:0.8"
                                            Duration="0:0:1"
                                            From="0.3"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Dot3"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                                        <DoubleAnimation
                                            AutoReverse="True"
                                            BeginTime="0:0:1.2"
                                            Duration="0:0:1"
                                            From="0.3"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="Dot4"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unspun" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <!--<Trigger Property="Size" Value="Small">
                            <Setter Property="Width" TargetName="Dot1" Value="6" />
                            <Setter Property="Width" TargetName="Dot" Value="{DynamicResource SpinDotSizeSmall}" />
                        </Trigger>
                        <Trigger Property="Size" Value="Large">
                            <Setter Property="Width" TargetName="Dot1" Value="14" />
                            <Setter Property="Width" TargetName="Dot" Value="{DynamicResource SpinDotSizeLarge}" />
                        </Trigger>-->
                        <!--  Spun State  -->
                        <Trigger Property="Spinning" Value="True">
                            <Setter Property="Visibility" TargetName="Mask" Value="Visible" />
                            <Setter Property="Effect" TargetName="Content">
                                <Setter.Value>
                                    <BlurEffect Radius="2" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <!--  With Loading Text  -->
                        <DataTrigger Binding="{Binding Tip, Mode=OneWay, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="False">
                            <Setter Property="Grid.RowSpan" TargetName="Dot" Value="1" />
                            <Setter Property="Grid.RowSpan" TargetName="Indicator" Value="1" />
                            <Setter Property="Margin" TargetName="LoadingText" Value="0,8,0,0" />
                        </DataTrigger>
                        <!--  Nested Loading  -->
                        <DataTrigger Binding="{Binding Content, Mode=OneWay, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="False">
                            <Setter Property="HorizontalAlignment" TargetName="IndicatorPanel" Value="Center" />
                        </DataTrigger>
                        <!--  With Indicator  -->
                        <DataTrigger Binding="{Binding Indicator, Mode=OneWay, RelativeSource={RelativeSource Self}, Converter={x:Static converters:NullOrEmptyConverter.Instance}}" Value="False">
                            <Setter Property="Visibility" TargetName="Dot" Value="Collapsed" />
                            <Setter Property="Visibility" TargetName="Indicator" Value="Visible" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <!--  Spun State  -->
            <Trigger Property="Spinning" Value="True">
                <Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
                <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="None" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>