That's just for a demonstration purpose of what's possible to done easily with Microsoft Blend.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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