That's just for a demonstration purpose of what's possible to done easily with Microsoft Blend.

SkillIconControl.xaml

<UserControl
    x:Class="AtomicTorch.SpaceRPG.Client.Unity.UI.Game.Skills.Primitives.SkillIconControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="UserControl"
    Width="68"
    Height="68" mc:Ignorable="d"
    d:DesignWidth="50" d:DesignHeight="50">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Style x:Key="SkillIconLevelBorderStyle" TargetType="Border">
                <Setter Property="Height" Value="12" />
                <Setter Property="MinWidth" Value="24" />
                <Setter Property="Margin" Value="0,0,7,7" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalAlignment" Value="Right" />
                <Setter Property="VerticalAlignment" Value="Bottom" />
                <Setter Property="BorderBrush" Value="#FFD9D9D9" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Background" Value="{StaticResource ColorNormalBrush}" />
            </Style>
        </Grid.Resources>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Ordinary">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Default" />
                <VisualState x:Name="NotTaken">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="nottaken">
                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            Storyboard.TargetName="ImportantBorder">
                            <EasingColorKeyFrame Value="#FF595959" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                            Storyboard.TargetName="Icon">
                            <EasingColorKeyFrame Value="#FFBFBFBF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                            Storyboard.TargetName="NumbersBorder">
                            <EasingColorKeyFrame Value="Gray" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)"
                                                       Storyboard.TargetName="NumbersBorder">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="#FF383838" />
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
                            Storyboard.TargetName="LblCount">
                            <EasingColorKeyFrame Value="Gray" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="Blur">
                            <EasingColorKeyFrame Value="#5900204D" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                            Storyboard.TargetName="Blur">
                            <EasingColorKeyFrame Value="#0000204D" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingColorKeyFrame Value="#59001F4D" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingColorKeyFrame Value="#0000204D" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                            Storyboard.TargetName="Blur">
                            <EasingDoubleKeyFrame Value="0.8" KeyTime="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingDoubleKeyFrame Value="0.807" KeyTime="0" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Taken">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            Storyboard.TargetName="ImportantBorder">
                            <EasingColorKeyFrame Value="#FF008CC2" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                            Storyboard.TargetName="Icon">
                            <EasingColorKeyFrame Value="#FF008CC2" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                            Storyboard.TargetName="NumbersBorder">
                            <EasingColorKeyFrame Value="#FF008CC2" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)"
                                                       Storyboard.TargetName="NumbersBorder">
                            <DiscreteObjectKeyFrame Value="{StaticResource ColorLittleDarkBrush}" KeyTime="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingColorKeyFrame Value="#590068FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="Blur">
                            <EasingColorKeyFrame Value="#590068FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Completed">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            Storyboard.TargetName="ImportantBorder">
                            <EasingColorKeyFrame Value="#FF00B3F5" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                            Storyboard.TargetName="Icon">
                            <EasingColorKeyFrame Value="#FF00B3F5" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)"
                                                       Storyboard.TargetName="NumbersBorder">
                            <DiscreteObjectKeyFrame Value="{StaticResource ColorLittleDarkBrush}" KeyTime="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                            Storyboard.TargetName="NumbersBorder">
                            <EasingColorKeyFrame Value="#FF00B3F5" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                            Storyboard.TargetName="Blur">
                            <EasingDoubleKeyFrame Value="0.8" KeyTime="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                            Storyboard.TargetName="Blur">
                            <EasingColorKeyFrame Value="#003385FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="Blur">
                            <EasingColorKeyFrame Value="#593386FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingDoubleKeyFrame Value="0.8" KeyTime="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingColorKeyFrame Value="#003385FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                            Storyboard.TargetName="ImportantBlur">
                            <EasingColorKeyFrame Value="#593386FF" KeyTime="0" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

            </VisualStateGroup>
            <VisualStateGroup x:Name="Highlight">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.1" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="NotHighlighted" />
                <VisualState x:Name="Highlighted">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="highlighter">
                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="0" />
                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0.0001" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Rectangle x:Name="Blur"
                   Width="60"
                   Height="60" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Visibility="{Binding ImportantBorderVisibilityReverse}" d:IsHidden="True">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Offset="1" Color="#000068FF" />
                    <GradientStop Offset="0.65" Color="#7F0068FF" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle x:Name="ImportantBlur"
                   Width="68"
                   Height="68" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Visibility="{Binding ImportantBorderVisibility}" d:IsLocked="True">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Offset="1" Color="#000068FF" />
                    <GradientStop Offset="0.65" Color="#7F0068FF" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Path x:Name="ImportantBorder"
              Width="55" Height="55" HorizontalAlignment="Center" VerticalAlignment="Center"
              Visibility="{Binding ImportantBorderVisibility}"
              Data="M-14.152288,-14.152288L33.463156,-14.152288 69,15 245,15 280.53684,-14.152288 328.15229,-14.152288 328.15229,33.463156 299,59 299,103 320.08123,117.343 320.08123,196.589 299,210 299,255 328.15229,280.53684 328.15229,328.15229 280.53684,328.15229 245,299 69,299 33.463156,328.15229 -14.152288,328.15229 -14.152288,280.53684 15,255 15,210 -7.0812205,196.589 -7.0812205,117.343 15,103 15,59 -14.152288,33.463156z"
              Stretch="Uniform">
            <Path.Fill>
                <SolidColorBrush Color="#FF8B9CA7" />
            </Path.Fill>
        </Path>


        <Rectangle x:Name="Icon"
                   Width="46"
                   Height="46"
                   Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True"
                   Stretch="Fill"
                   Fill="{Binding Icon}" StrokeThickness="1.5">
            <Rectangle.Stroke>
                <SolidColorBrush Color="#FF8B9CA7" />
            </Rectangle.Stroke>
        </Rectangle>

        <Rectangle x:Name="nottaken"
                   Width="46"
                   Height="46" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Fill="#88000000"
                   Visibility="Collapsed" />

        <Rectangle x:Name="highlighter"
                   Width="46"
                   Height="46" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Fill="#30ECECEC"
                   Visibility="Collapsed" />

        <Border x:Name="NumbersBorder" Style="{StaticResource SkillIconLevelBorderStyle}">
            <TextBlock
                x:Name="LblCount"
                Style="{StaticResource TextBlockSkillLevelStyle}"
                Text="{Binding StrLevel}" />
        </Border>

    </Grid>
</UserControl>