Artemis/src/Artemis.UI/Screens/SurfaceEditor/Visualization/SurfaceDeviceView.xaml

<UserControl x:Class="Artemis.UI.Screens.SurfaceEditor.Visualization.SurfaceDeviceView"
             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:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:surfaceEditor="clr-namespace:Artemis.UI.Screens.SurfaceEditor.Visualization"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance {x:Type surfaceEditor:SurfaceDeviceViewModel}}"
             d:DesignHeight="450" d:DesignWidth="800"
             Cursor="{Binding Cursor}"
             MouseEnter="{s:Action MouseEnter}"
             MouseLeave="{s:Action MouseLeave}"
             ToolTip="{Binding Device.RgbDevice.DeviceInfo.DeviceName}">
    <UserControl.Resources>
        <converters:NullToImageConverter x:Key="NullToImageConverter" />
        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
    </UserControl.Resources>
    <Grid>
        <!-- Content -->
        <Grid Width="{Binding Device.RgbDevice.ActualSize.Width}" Height="{Binding Device.RgbDevice.ActualSize.Height}">
            <Grid.LayoutTransform>
                <RotateTransform Angle="{Binding Device.Rotation}" />
            </Grid.LayoutTransform>

            <!-- Device image with fallback -->
            <Image VerticalAlignment="Top"
                   HorizontalAlignment="Left"
                   Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />

            <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
                       Stroke="{DynamicResource ControlBorderBrush}"
                       StrokeThickness="1"
                       Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}" />
            <TextBlock Text="{Binding Device.RgbDevice.DeviceInfo.DeviceName}"
                       Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       TextWrapping="Wrap"
                       TextAlignment="Center" />

            <!-- LEDs -->
            <ItemsControl ItemsSource="{Binding Leds}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="{x:Type ContentPresenter}">
                        <Setter Property="Canvas.Left" Value="{Binding X}" />
                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl s:View.Model="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>

        <!-- Selection rectangle -->
        <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
            <Rectangle.Stroke>
                <SolidColorBrush Color="{StaticResource Accent700}" />
            </Rectangle.Stroke>
            <Rectangle.Fill>
                <SolidColorBrush Color="{StaticResource Accent700}" Opacity="0.25" />
            </Rectangle.Fill>
            <Rectangle.Style>
                <Style TargetType="{x:Type Rectangle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.Hover}">
                            <DataTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="ToSelected" />
                                <BeginStoryboard x:Name="ToHover">
                                    <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 Accent700}" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.Selected}">
                            <DataTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="ToHover" />
                                <BeginStoryboard x:Name="ToSelected">
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                            To="{StaticResource Primary400}" Duration="0:0:0.25" />
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
                                            To="{StaticResource Primary400}" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.None}">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
        </Rectangle>
    </Grid>
</UserControl>