<!-- Skill Display (2) -->
<ItemsControl x:Name="SkillsControl" Grid.Row="1" Margin="50,0,50,0" ItemsSource="{Binding Skills}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}" />
<Setter Property="Grid.Column" Value="{Binding Column}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Click="OnClickSkill" MouseMove="OnMouseMoveSkill" MouseLeave="OnMouseLeaveSkill" Style="{StaticResource SkillTree_SkillButton}" Content="{Binding Level, Converter={StaticResource IntegerToStringConverter}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!------------------------------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------------------------------->
<Style x:Key="SkillTree_SkillButton" TargetType="{x:Type Button}">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Foreground" Value="{StaticResource MainFontBrush}"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontFamily" Value="{StaticResource MainFont}"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="SkillButtonAnimatedClick">
<DoubleAnimation AutoReverse="True" Duration="0:0:0.4" From="0" To="1" Storyboard.TargetName="Effect" Storyboard.TargetProperty="(Image.Opacity)">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ColorAnimation AutoReverse="True" Duration="0:0:0.4" From="#96867355" To="#64ffffff" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<ColorAnimation.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Canvas>
<Line x:Name="Direction1" X1="26" Y1="26" X2="110" Y2="26" Stroke="#64867355" StrokeThickness="4" Visibility="Hidden" IsHitTestVisible="False" />
<Line x:Name="Direction3" X1="20" Y1="44" X2="20" Y2="82" Stroke="#64867355" StrokeThickness="4" Visibility="Hidden" IsHitTestVisible="False" />
<Line x:Name="Direction4" X1="20" Y1="44" X2="20" Y2="144" Stroke="#64867355" StrokeThickness="4" Visibility="Hidden" IsHitTestVisible="False" />
</Canvas>
<Border x:Name="Border" Margin="4,4,0,0" BorderThickness="2" BorderBrush="#96867355" CornerRadius="2" Width="32" Height="44" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border.Effect>
<DropShadowEffect ShadowDepth="2" />
</Border.Effect>
<Grid>
<Image Stretch="Fill" Source="{Binding Icon}" />
<Image x:Name="Effect" Stretch="Fill" Source="{Binding Icon}" Opacity="0">
<Image.Effect>
<BlurEffect Radius="15.0"/>
</Image.Effect>
</Image>
<Canvas x:Name="Overlay" Background="#96000000" Visibility="Hidden" />
</Grid>
</Border>
<TextBlock x:Name="Label" VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="{TemplateBinding Content}" IsHitTestVisible="False">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="2" ShadowDepth="1" Direction="260" Color="#000000" />
</TextBlock.Effect>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Direction}" Value="1">
<Setter TargetName="Direction1" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Direction}" Value="3">
<Setter TargetName="Direction3" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Direction}" Value="4">
<Setter TargetName="Direction4" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding State}" Value="0">
<!--<Setter Property="IsEnabled" Value="False"/>-->
<Setter TargetName="Overlay" Property="Visibility" Value="Visible"/>
<Setter TargetName="Label" Property="Foreground" Value="#64ffffff"/>
</DataTrigger>
<DataTrigger Binding="{Binding State}" Value="1">
<!--<Setter Property="IsEnabled" Value="True"/>-->
</DataTrigger>
<DataTrigger Binding="{Binding State}" Value="2">
<!--<Setter Property="IsEnabled" Value="False"/>-->
<Setter TargetName="Overlay" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Label" Property="Foreground" Value="#e6ffffff"/>
</DataTrigger>
<!-- Mouse Over -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding State}" Value="1"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter TargetName="Label" Property="Foreground" Value="{StaticResource MainFontHighlightBrush}" />
<Setter TargetName="Overlay" Property="Visibility" Value="Visible" />
<Setter TargetName="Overlay" Property="Background" Value="#32FFFFFF" />
<Setter TargetName="Label" Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="2" ShadowDepth="1" Direction="260" Color="#ffffff" />
</Setter.Value>
</Setter>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<!-- Pressed -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding State}" Value="1" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}" Value="True" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter TargetName="Label" Property="Foreground" Value="{StaticResource MainFontHighlightBrush}" />
<Setter TargetName="Overlay" Property="Visibility" Value="Visible" />
<Setter TargetName="Overlay" Property="Background" Value="#64000000" />
<Setter TargetName="Label" Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="2" ShadowDepth="1" Direction="260" Color="#ffffff" />
</Setter.Value>
</Setter>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<!--
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation AutoReverse="True" Duration="0:0:0.4" From="0" To="1" Storyboard.TargetName="Effect" Storyboard.TargetProperty="(Image.Opacity)">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ColorAnimation AutoReverse="True" Duration="0:0:0.4" From="#96867355" To="#64ffffff" Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<ColorAnimation.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>