Artemis/Artemis/Artemis/Views/ProfileEditorView.xaml

<UserControl x:Class="Artemis.Views.ProfileEditorView"
             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:cal="http://www.caliburnproject.org"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:itemBehaviours="clr-namespace:Artemis.ItemBehaviours"
             xmlns:utilities="clr-namespace:Artemis.Utilities"
             mc:Ignorable="d"
             d:DesignHeight="473" Width="1055">
    <UserControl.Resources>
        <utilities:LayerOrderConverter x:Key="LayerOrderConverter" />
    </UserControl.Resources>
    <Grid Width="Auto" Height="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Preview -->
        <Label Grid.Column="0" Grid.Row="0" FontSize="20" HorizontalAlignment="Left" Content="Preview" />
        <Border Grid.Column="0" Grid.Row="1" Background="#FF232323" BorderBrush="{DynamicResource HighlightBrush}"
                BorderThickness="3" Width="750" Height="400">
            <Border>
                <Border.Effect>
                    <!-- TODO: Pulse 10-20 -->
                    <DropShadowEffect ShadowDepth="0" Color="{DynamicResource HighlightColor}" Opacity="1"
                                      BlurRadius="20" />
                </Border.Effect>
                <Grid>
                    <Image Grid.Column="0" Grid.Row="0" Source="{Binding Path=KeyboardImage}" Margin="50" />
                    <Image Grid.Column="0" Grid.Row="0" Source="{Binding Path=KeyboardPreview}" Opacity="0.8"
                           Width="{Binding Path=PreviewSettings.Width}"
                           Height="{Binding Path=PreviewSettings.Height}"
                           Margin="{Binding Path=PreviewSettings.Margin}"
                           Stretch="Fill" Cursor="{Binding Path=KeyboardPreviewCursor}"
                           cal:Message.Attach="[Event MouseMove] = [Action MouseMoveKeyboardPreview($eventArgs)];
                           [Event MouseDown] = [Action MouseDownKeyboardPreview($eventArgs)];
                           [Event MouseUp] = [Action MouseUpKeyboardPreview($eventArgs)]" />
                </Grid>
            </Border>
        </Border>
        <!-- Profile management -->
        <StackPanel Grid.Column="0" Grid.Row="2" Orientation="Horizontal" Margin="0,5,0,0">
            <Label Content="Active profile" />
            <ComboBox Width="110" VerticalAlignment="Top" x:Name="Profiles" DisplayMemberPath="Name"
                      Margin="5,0,0,0" />
            <Button x:Name="AddProfile" Content="Add profile" VerticalAlignment="Top"
                    Style="{DynamicResource SquareButtonStyle}" Width="95" HorizontalAlignment="Left" Margin="10,0,0,0" />
            <Button x:Name="RemoveProfile" Content="Remove profile" VerticalAlignment="Top"
                    Style="{DynamicResource SquareButtonStyle}" Width="95" HorizontalAlignment="Right"
                    Margin="10,0,0,0" />
        </StackPanel>

        <!-- Layer list -->
        <Label Grid.Column="1" Grid.Row="0" FontSize="20" HorizontalAlignment="Left" Content="Layers" Margin="10,0,0,0" />
        <Border Grid.Column="1" Grid.Row="1" Background="#FF232323" BorderBrush="{DynamicResource HighlightBrush}"
                BorderThickness="3" Margin="10,0,0,0" Height="400" Width="233">
            <TreeView x:Name="ProfileTree" ItemsSource="{Binding Path=Layers, Converter={StaticResource LayerOrderConverter}, ConverterParameter=Order}">
                <i:Interaction.Behaviors>
                    <itemBehaviours:BindableSelectedItemBehavior SelectedItem="{Binding SelectedLayer, Mode=TwoWay}" />
                </i:Interaction.Behaviors>
                <TreeView.Resources>
                    <ResourceDictionary
                        Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
                </TreeView.Resources>
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children, Converter={StaticResource LayerOrderConverter}, ConverterParameter=Order}">
                        <StackPanel Orientation="Horizontal" Tag="{Binding DataContext, ElementName=ProfileTree}">
                            <StackPanel.ContextMenu>
                                <ContextMenu
                                    cal:Action.TargetWithoutContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                                    <MenuItem Header="Rename" />
                                    <MenuItem Header="Delete" />
                                    <MenuItem Header="Properties" cal:Message.Attach="LayerEditor($datacontext)" />
                                </ContextMenu>
                            </StackPanel.ContextMenu>
                            <CheckBox VerticalAlignment="Center" ToolTip="Layer enabled" IsChecked="{Binding Enabled}"
                                      cal:Message.Attach="ToggleEnabled($datacontext)" />
                            <Image Height="18" Width="18" Source="{Binding LayerImage}" />
                            <TextBlock Margin="5,0,0,0" Text="{Binding Name}" VerticalAlignment="Center" />
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </Border>
        <Grid Grid.Column="1" Grid.Row="2" Margin="10,5,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" x:Name="AddLayer" Content="Add layer" VerticalAlignment="Top"
                    Style="{DynamicResource SquareButtonStyle}" Width="95" />
            <Button Grid.Column="3" x:Name="RemoveLayer" Content="Remove layer" VerticalAlignment="Top"
                    Style="{DynamicResource SquareButtonStyle}" Width="95" />
        </Grid>

        <!-- Layer movement -->
        <StackPanel Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0,0,0">
            <Button x:Name="LayerUp" Width="40" Height="40" Style="{DynamicResource MetroCircleButtonStyle}">
                <Button.Content>
                    <Rectangle
                        Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"
                        Width="16" Height="16">
                        <Rectangle.OpacityMask>
                            <VisualBrush Visual="{StaticResource appbar_arrow_up}" Stretch="Fill" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Button.Content>
            </Button>
            <Button x:Name="LayerDown" Width="40" Height="40" Style="{DynamicResource MetroCircleButtonStyle}">
                <Button.Content>
                    <Rectangle
                        Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"
                        Width="16" Height="16">
                        <Rectangle.OpacityMask>
                            <VisualBrush Visual="{StaticResource appbar_arrow_down}" Stretch="Fill" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Button.Content>
            </Button>
        </StackPanel>
    </Grid>
</UserControl>