loading control layout (Poki)

gistfile1.xml

  <Grid x:Name="LayoutRoot" Width="37" Height="42" Visibility="Collapsed" Opacity="0">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup>
        <VisualState x:Name="DefaultState">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility"
              BeginTime="0:0:0.2">
              <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
              BeginTime="0:0:0" Duration="0:0:0.2" To="0" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="LoadingState">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility"
              BeginTime="0:0:0">
              <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
              BeginTime="0:0:0" Duration="0:0:0.2" To="1" />
            <DoubleAnimation Storyboard.TargetName="Border1Scale" Storyboard.TargetProperty="ScaleX"
              BeginTime="0:0:0" Duration="0:0:0.4" To="1" AutoReverse="True" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="Border1Scale" Storyboard.TargetProperty="ScaleY"
              BeginTime="0:0:0" Duration="0:0:0.4" To="1" AutoReverse="True" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="Border2Scale" Storyboard.TargetProperty="ScaleX"
              BeginTime="0:0:0" Duration="0:0:0.4" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="Border2Scale" Storyboard.TargetProperty="ScaleY"
              BeginTime="0:0:0" Duration="0:0:0.4" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="Border1" Storyboard.TargetProperty="Opacity"
              BeginTime="0:0:0" Duration="0:0:0.4" To="1" AutoReverse="True" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="Border2" Storyboard.TargetProperty="Opacity"
              BeginTime="0:0:0" Duration="0:0:0.4" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Border Name="Border1" Width="16" Height="16" CornerRadius="8" VerticalAlignment="Center"
      HorizontalAlignment="Left" Background="{Binding Brush}" Opacity="0.5" RenderTransformOrigin="0.5 0.5">
      <Border.RenderTransform>
        <TransformGroup>
          <ScaleTransform x:Name="Border1Scale" ScaleX="0.5" ScaleY="0.5" />
          <RotateTransform x:Name="Border1Rotate" Angle="0" />
        </TransformGroup>
      </Border.RenderTransform>
    </Border>
    <Border Name="Border2" Width="16" Height="16" CornerRadius="8" VerticalAlignment="Center" Margin="5 0 0 0"
      HorizontalAlignment="Right" Background="{Binding Brush}" RenderTransformOrigin="0.5 0.5">
      <Border.RenderTransform>
        <TransformGroup>
          <ScaleTransform x:Name="Border2Scale" ScaleX="1" ScaleY="1" />
          <RotateTransform x:Name="Border2Rotate" Angle="0" />
        </TransformGroup>
      </Border.RenderTransform>
    </Border>
  </Grid>