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

<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileDeviceView"
             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:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:visualization="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance {x:Type visualization:ProfileDeviceViewModel}}"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <converters:NullToImageConverter x:Key="NullToImageConverter" />
        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
    </UserControl.Resources>

    <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="Stretch"
               HorizontalAlignment="Stretch"
               Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />

        <Rectangle Fill="{DynamicResource MaterialDesignCardBackground}"
                   Stroke="{DynamicResource MaterialDesignTextBoxBorder}"
                   Margin="-5"
                   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 Width="{Binding Width}" Height="{Binding Height}" s:View.Model="{Binding}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>