Artemis/src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileLedView.xaml

<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileLedView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:visualization="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance {x:Type visualization:ProfileLedViewModel}}"
             d:DesignHeight="25" d:DesignWidth="25">
    <UserControl.Resources>
        <converters:NullToImageConverter x:Key="NullToImageConverter" />
        <Style TargetType="{x:Type Path}" x:Key="DimStyle">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsDimmed}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Shape.Opacity)" To="0.2" Duration="0:0:0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Shape.Opacity)" To="1" Duration="0:0:0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Canvas Width="{Binding Led.RgbLed.ActualSize.Width, Mode=OneWay}" Height="{Binding Led.RgbLed.ActualSize.Height, Mode=OneWay}">
        <Canvas.Background>
            <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="Fill"
                        ImageSource="{Binding Led.RgbLed.Image, Converter={StaticResource NullToImageConverter}, Mode=OneWay}" />
        </Canvas.Background>

        <Path Data="{Binding DisplayGeometry, Mode=OneWay}" ClipToBounds="False" Style="{StaticResource DimStyle}">
            <Path.Fill>
                <SolidColorBrush Color="{Binding DisplayColor, Mode=OneWay}" Opacity="0.333" />
            </Path.Fill>
        </Path>
        <Path Data="{Binding StrokeGeometry, Mode=OneWay}" ClipToBounds="False" Style="{StaticResource DimStyle}">
            <Path.Fill>
                <SolidColorBrush Color="{Binding DisplayColor, Mode=OneWay}" />
            </Path.Fill>
        </Path>

        <!-- Selection -->
        <Path Data="{Binding DisplayGeometry, Mode=OneWay}" ClipToBounds="False" StrokeThickness="1" StrokeLineJoin="Round">
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="ToSelected">
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                            To="{StaticResource Accent700}" Duration="0:0:0.25" />
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                                            To="{StaticResource Accent400}" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                            To="Transparent" Duration="0:0:0.25" />
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                                            To="Transparent" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
            <Path.Fill>
                <SolidColorBrush Opacity="0.25" />
            </Path.Fill>
            <Path.Stroke>
                <SolidColorBrush Opacity="0.5" />
            </Path.Stroke>
        </Path>
    </Canvas>
</UserControl>