Skip to content

Instantly share code, notes, and snippets.

@aienabled

aienabled/SkillIconControl.xaml Secret

Created Jan 25, 2017
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
That's just for a demonstration purpose of what's possible to done easily with Microsoft Blend.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment