Artemis/src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.xaml

<UserControl
    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:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
    xmlns:local="clr-namespace:Artemis.UI.Screens.SurfaceEditor"
    x:Class="Artemis.UI.Screens.SurfaceEditor.SurfaceEditorView"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="600"
    d:DataContext="{d:DesignInstance {x:Type local:SurfaceEditorViewModel}}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary
                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
                <ResourceDictionary
                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Margin="16">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="100" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="{Binding SurfaceListWidth.Value, Mode=TwoWay}" MinWidth="100" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <materialDesign:PackIcon Grid.Column="0" Grid.RowSpan="2" Kind="AboutOutline" />
                <TextBlock Grid.Row="0" Grid.Column="1">
                    The surface is a digital representation of your LED setup. Set this up accurately and effects will seamlessly move from one
                    device to the other.
                </TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="1">
                    Are devices showing up as gray blocks and/or are LEDs in wrong place and not sure why?
                    <Run Text="Check out the" FontWeight="Bold" />
                    <Hyperlink Style="{StaticResource ArtemisHyperlink}"
                               RequestNavigate="{s:Action OpenHyperlink}"
                               FontWeight="Bold"
                               NavigateUri="https://wiki.artemis-rgb.com/faq#q-my-device-is-missing-an-image-and-the-leds-are-in-the-wrong-place-whats-wrong">
                        FAQ
                    </Hyperlink>
                    <Run Text="more info." FontWeight="Bold" />
                </TextBlock>
            </Grid>
            <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 10" />
        </StackPanel>

        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="0"
                             VerticalAlignment="Stretch" Margin="0,0,5,0">
            <Grid ClipToBounds="True"
                  Focusable="True"
                  FocusVisualStyle="{StaticResource FocusVisual}"
                  KeyUp="{s:Action EditorGridKeyUp}"
                  KeyDown="{s:Action EditorGridKeyDown}"
                  MouseWheel="{s:Action EditorGridMouseWheel}"
                  MouseUp="{s:Action EditorGridMouseClick}"
                  MouseDown="{s:Action EditorGridMouseClick}"
                  MouseMove="{s:Action EditorGridMouseMove}"
                  Cursor="{Binding Cursor}">
                <Grid.Background>
                    <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
                        <VisualBrush.Visual>
                            <Grid Width="25" Height="25">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Rectangle Grid.Row="0" Grid.Column="0" Fill="Black" Opacity="0.15" />
                                <Rectangle Grid.Row="0" Grid.Column="1" />
                                <Rectangle Grid.Row="1" Grid.Column="0" />
                                <Rectangle Grid.Row="1" Grid.Column="1" Fill="Black" Opacity="0.15" />
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Grid.Background>

                <Grid.Triggers>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
                                <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
                        <BeginStoryboard>
                            <Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
                                <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>

                <Grid x:Name="EditorDisplayGrid"
                      shared:SizeObserver.Observe="True"
                      shared:SizeObserver.ObservedHeight="{Binding PanZoomViewModel.CanvasHeight, Mode=TwoWay}"
                      shared:SizeObserver.ObservedWidth="{Binding PanZoomViewModel.CanvasWidth, Mode=TwoWay}">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" ScaleY="{Binding PanZoomViewModel.Zoom}" />
                            <TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" />
                        </TransformGroup>
                    </Grid.RenderTransform>
                    <ItemsControl ItemsSource="{Binding SurfaceDeviceViewModels}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Canvas />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemContainerStyle>
                            <Style TargetType="{x:Type ContentPresenter}">
                                <Setter Property="Canvas.Left" Value="{Binding Device.X}" />
                                <Setter Property="Canvas.Top" Value="{Binding Device.Y}" />
                            </Style>
                        </ItemsControl.ItemContainerStyle>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <ContentControl s:View.Model="{Binding}">
                                    <ContentControl.ContextMenu>
                                        <ContextMenu>
                                            <MenuItem Header="Identify" Command="{s:Action IdentifyDevice}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="AlarmLight" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <Separator />
                                            <MenuItem Header="Bring to Front" Command="{s:Action BringToFront}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="ArrangeBringToFront" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <MenuItem Header="Bring Forward" Command="{s:Action BringForward}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="ArrangeBringForward" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <MenuItem Header="Send to Back" Command="{s:Action SendToBack}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="ArrangeSendToBack" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <MenuItem Header="Send Backward" Command="{s:Action SendBackward}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="ArrangeSendBackward" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <Separator />
                                            <!-- Stylet can't disable it for us here, do it ourselves -->
                                            <MenuItem Header="Identify input"
                                                      Command="{s:Action DetectInput}"
                                                      CommandParameter="{Binding Device}"
                                                      IsEnabled="{Binding CanDetectInput}"
                                                      ToolTip="Teach Artemis which keypresses and/or button presses belong to this device">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="GestureDoubleTap" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                            <MenuItem Header="View properties" Command="{s:Action ViewProperties}" CommandParameter="{Binding Device}">
                                                <MenuItem.Icon>
                                                    <materialDesign:PackIcon Kind="Gear" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                        </ContextMenu>
                                    </ContentControl.ContextMenu>
                                </ContentControl>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Grid>

                <!-- Multi-selection rectangle -->
                <Path Data="{Binding SelectionRectangle}" Opacity="0"
                      Stroke="{DynamicResource PrimaryHueLightBrush}"
                      StrokeThickness="1"
                      x:Name="MultiSelectionPath"
                      IsHitTestVisible="False">
                    <Path.Fill>
                        <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
                    </Path.Fill>
                </Path>

                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0, 0, 15, 15">
                    <Button Command="{s:Action AutoArrange}"
                            Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
                            HorizontalAlignment="Right"
                            ToolTip="Apply auto-arrange"
                            VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Wand" Height="24" Width="24" />
                    </Button>
                    <StackPanel Orientation="Vertical">
                        <Slider Margin="0,0,14,0"
                                Orientation="Vertical"
                                Minimum="10"
                                Maximum="400"
                                Height="100"
                                FocusVisualStyle="{x:Null}"
                                Value="{Binding PanZoomViewModel.ZoomPercentage}"
                                Style="{StaticResource MaterialDesignDiscreteSlider}" />
                        <Button Command="{s:Action ResetZoomAndPan}"
                                Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
                                HorizontalAlignment="Right"
                                ToolTip="Reset zoom &amp; position">
                            <materialDesign:PackIcon Kind="ImageFilterCenterFocus" Height="24" Width="24" />
                        </Button>
                    </StackPanel>
                </StackPanel>

            </Grid>
        </materialDesign:Card>

        <GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Stretch" Cursor="SizeWE" />

        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="2" VerticalAlignment="Stretch" Margin="5,0,0,0">
            <materialDesign:DialogHost Identifier="SurfaceListDialogHost" DialogTheme="Inherit" CloseOnClickAway="True">

                <ListBox Grid.Row="0" HorizontalContentAlignment="Stretch" ItemsSource="{Binding ListDeviceViewModels}" SelectionMode="Multiple">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                        </Style>

                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <ContentControl s:View.Model="{Binding}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" IsTabStop="False">
                                <ContentControl.ContextMenu>
                                    <ContextMenu>
                                        <MenuItem Header="Identify" Command="{s:Action IdentifyDevice}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="AlarmLight" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <Separator />
                                        <MenuItem Header="Bring to Front" Command="{s:Action BringToFront}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="ArrangeBringToFront" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <MenuItem Header="Bring Forward" Command="{s:Action BringForward}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="ArrangeBringForward" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <MenuItem Header="Send to Back" Command="{s:Action SendToBack}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="ArrangeSendToBack" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <MenuItem Header="Send Backward" Command="{s:Action SendBackward}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="ArrangeSendBackward" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <Separator />
                                        <!-- Stylet can't disable it for us here, do it ourselves -->
                                        <MenuItem Header="Identify input"
                                                  Command="{s:Action DetectInput}"
                                                  CommandParameter="{Binding Device}"
                                                  IsEnabled="{Binding CanDetectInput}"
                                                  ToolTip="Teach Artemis which keypresses and/or button presses belong to this device">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="GestureDoubleTap" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <MenuItem Header="View properties" Command="{s:Action ViewProperties}" CommandParameter="{Binding Device}">
                                            <MenuItem.Icon>
                                                <materialDesign:PackIcon Kind="Gear" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                    </ContextMenu>
                                </ContentControl.ContextMenu>
                            </ContentControl>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </materialDesign:DialogHost>
        </materialDesign:Card>

        <TextBlock Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignCaptionTextBlock}" Margin="0,5,0,0">
            <InlineUIContainer>
                <materialDesign:PackIcon Kind="Keyboard" Margin="0 0 0 -3" />
            </InlineUIContainer>
            <Run Text="Hold " /><Run FontWeight="Bold" Text="shift" />
            <Run Text="or click and drag to select multiple devices at once. To move around the surface hold down" />
            <Run FontWeight="Bold" Text="ctrl" />
            <Run Text="and drag." />
        </TextBlock>
    </Grid>
</UserControl>