Style for sliders, improve combobox style

src/PixiEditor/App.xaml

@@ -17,6 +17,7 @@
                 <ResourceDictionary Source="Styles/DarkScrollBarStyle.xaml" />
                 <ResourceDictionary Source="Styles/ImageCheckBoxStyle.xaml" />
                 <ResourceDictionary Source="Styles/DarkCheckboxStyle.xaml" />
+                <ResourceDictionary Source="Styles/DarkSliderStyle.xaml" />
                 <ResourceDictionary Source="Styles/ListSwitchButtonStyle.xaml" />
                 <ResourceDictionary Source="Styles/LabelStyles.xaml" />
                 <ResourceDictionary Source="Styles/PixiListBoxItemStyle.xaml" />

src/PixiEditor/Styles/ComboBoxDarkStyle.xaml

@@ -12,7 +12,7 @@
     <SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Background" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Border" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBox.MouseOver.Background" Color="#333333" />
-    <SolidColorBrush x:Key="ComboBox.MouseOver.Border" Color="#007ACC" />
+    <SolidColorBrush x:Key="ComboBox.MouseOver.Border" Color="#FF0000" />
     <SolidColorBrush x:Key="ComboBox.MouseOver.Glyph" Color="#007ACC" />
     <SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Background" Color="#333333" />
     <SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Border" Color="#007ACC" />
@@ -40,24 +40,18 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ToggleButton}">
-                    <Border x:Name="templateRoot" Background="{StaticResource ComboBox.Static.Background}"
+                    <Border x:Name="templateRoot" Background="{StaticResource AccentColor}"
                             BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="5"
                             BorderBrush="{StaticResource ComboBox.Static.Border}" SnapsToDevicePixels="true">
-                        <Border x:Name="splitBorder" BorderThickness="1" BorderBrush="Transparent"
-                                HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="true"
-                                Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
-                            <Path x:Name="arrow"
-                                  Data="F1 M 0,0 L 2.667,2.66665 L 5.3334,0 L 5.3334,-1.78168 L 2.6667,0.88501 L0,-1.78168 L0,0 Z"
-                                  Fill="{StaticResource ComboBox.Static.Glyph}" HorizontalAlignment="Center" Margin="0"
-                                  VerticalAlignment="Center" />
-                        </Border>
+                        <Path x:Name="arrow"
+                            Data="M 0 3 L 3 6 L 6 3 L 6 0 L 3 3 L 0 0 L 0 3 Z"
+                            Fill="{StaticResource BrighterAccentColor}" HorizontalAlignment="Right" Margin="5"
+                            VerticalAlignment="Center" />
                     </Border>
                     <ControlTemplate.Triggers>
                         <MultiDataTrigger>
                             <MultiDataTrigger.Conditions>
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="true" />
                                 <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                            Value="false" />
                                 <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}"
@@ -66,114 +60,34 @@
                                            Value="true" />
                             </MultiDataTrigger.Conditions>
                             <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Static.Editable.Background}" />
+                                    Value="{StaticResource AccentColor}" />
                             <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Static.Editable.Border}" />
-                            <Setter Property="Background" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Static.Editable.Button.Background}" />
-                            <Setter Property="BorderBrush" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Static.Editable.Button.Border}" />
+                                    Value="{StaticResource BrighterAccentColor}" />
+                            <Setter Property="Fill" TargetName="arrow" 
+                                    Value="{StaticResource BrighterAccentColor}" />
                         </MultiDataTrigger>
-                        <Trigger Property="IsMouseOver" Value="true">
-                            <Setter Property="Fill" TargetName="arrow"
-                                    Value="{StaticResource ComboBox.MouseOver.Glyph}" />
-                        </Trigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
-                                           Value="true" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="false" />
-                            </MultiDataTrigger.Conditions>
-                            <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.MouseOver.Background}" />
-                            <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.MouseOver.Border}" />
-                        </MultiDataTrigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
-                                           Value="true" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="true" />
-                            </MultiDataTrigger.Conditions>
+                        <Trigger Property="IsEnabled" Value="false">
+                            <Setter Property="Fill" TargetName="arrow" Value="{StaticResource AccentColor}" />
                             <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.MouseOver.Editable.Background}" />
+                                    Value="{StaticResource DarkerAccentColor}" />
                             <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.MouseOver.Editable.Border}" />
-                            <Setter Property="Background" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.MouseOver.Editable.Button.Background}" />
-                            <Setter Property="BorderBrush" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.MouseOver.Editable.Button.Border}" />
-                        </MultiDataTrigger>
-                        <Trigger Property="IsPressed" Value="true">
-                            <Setter Property="Fill" TargetName="arrow" Value="{StaticResource ComboBox.Pressed.Glyph}" />
+                                    Value="{StaticResource AccentColor}" />
                         </Trigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}"
-                                           Value="true" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="false" />
-                            </MultiDataTrigger.Conditions>
-                            <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Pressed.Background}" />
-                            <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Pressed.Border}" />
-                        </MultiDataTrigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}"
-                                           Value="true" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="true" />
-                            </MultiDataTrigger.Conditions>
+                        <Trigger Property="IsMouseOver" Value="true">
+                            <Setter Property="Fill" TargetName="arrow"
+                                    Value="{StaticResource AlmostLightModeAccentColor}" />
                             <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Pressed.Editable.Background}" />
+                                    Value="{StaticResource DarkerAccentColor}" />
                             <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Pressed.Editable.Border}" />
-                            <Setter Property="Background" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Pressed.Editable.Button.Background}" />
-                            <Setter Property="BorderBrush" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Pressed.Editable.Button.Border}" />
-                        </MultiDataTrigger>
-                        <Trigger Property="IsEnabled" Value="false">
-                            <Setter Property="Fill" TargetName="arrow" Value="{StaticResource ComboBox.Disabled.Glyph}" />
+                                    Value="{StaticResource AlmostLightModeAccentColor}" />
                         </Trigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"
-                                           Value="false" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="false" />
-                            </MultiDataTrigger.Conditions>
-                            <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Disabled.Background}" />
-                            <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Disabled.Border}" />
-                        </MultiDataTrigger>
-                        <MultiDataTrigger>
-                            <MultiDataTrigger.Conditions>
-                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"
-                                           Value="false" />
-                                <Condition
-                                    Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
-                                    Value="true" />
-                            </MultiDataTrigger.Conditions>
+                        <Trigger Property="IsPressed" Value="true">
+                            <Setter Property="Fill" TargetName="arrow" Value="{StaticResource AlmostLightModeAccentColor}" />
                             <Setter Property="Background" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Disabled.Editable.Background}" />
+                                    Value="{StaticResource DarkerAccentColor}" />
                             <Setter Property="BorderBrush" TargetName="templateRoot"
-                                    Value="{StaticResource ComboBox.Disabled.Editable.Border}" />
-                            <Setter Property="Background" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Disabled.Editable.Button.Background}" />
-                            <Setter Property="BorderBrush" TargetName="splitBorder"
-                                    Value="{StaticResource ComboBox.Disabled.Editable.Button.Border}" />
-                        </MultiDataTrigger>
+                                    Value="{StaticResource AlmostLightModeAccentColor}" />
+                        </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
@@ -183,7 +97,7 @@
         <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" />
-                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
+                <ColumnDefinition MinWidth="13"
                                   Width="0" />
             </Grid.ColumnDefinitions>
             <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2"
@@ -192,10 +106,10 @@
                 <theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent" CornerRadius="5"
                                               MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                               MaxHeight="{TemplateBinding MaxDropDownHeight}">
-                    <Border x:Name="dropDownBorder"
-                            Background="{StaticResource DarkerAccentColor}" BorderThickness="0"
-                            BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
-                        <ScrollViewer x:Name="DropDownScrollViewer">
+                    <Border x:Name="dropDownBorder" CornerRadius="5"
+                            Background="{StaticResource DarkerAccentColor}" BorderThickness="1"
+                            BorderBrush="{StaticResource BrighterAccentColor}">
+                        <ScrollViewer x:Name="DropDownScrollViewer" Margin="1">
                             <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                 <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top"
                                         Width="0">
@@ -259,7 +173,7 @@
         <Setter Property="Foreground" Value="White" />
         <Setter Property="Template" Value="{DynamicResource DarkComboBox}" />
     </Style>
-    
+
     <Style TargetType="ComboBoxItem">
         <Setter Property="Background" Value="{StaticResource DarkerAccentColor}" />
         <Setter Property="Foreground" Value="White" />
@@ -270,7 +184,7 @@
                 <ControlTemplate TargetType="ComboBoxItem">
                     <Border Name="Bd" Background="{TemplateBinding Background}" BorderThickness="0">
                         <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch"
-                                          VerticalAlignment="Center" Margin="3,2"/>
+                                          VerticalAlignment="Center" Margin="4,2"/>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsHighlighted" Value="True">
@@ -288,8 +202,6 @@
     <Style TargetType="Separator">
         <Setter Property="Height"
                 Value="1" />
-        <Setter Property="Margin"
-                Value="0,4,0,4" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Separator">

src/PixiEditor/Styles/DarkSliderStyle.xaml

@@ -0,0 +1,54 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    
+    <Style TargetType="RepeatButton" x:Key="SliderRepeatButton">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border Background="Transparent"></Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+    <Style TargetType="Slider">
+        <Setter Property="Background" Value="Transparent"></Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Slider">
+                    <Grid>
+                        <Border CornerRadius="4" Background="{StaticResource DarkerAccentColor}" Height="6" VerticalAlignment="Center" Margin="1,0"></Border>
+                        <Canvas Margin="-6,-1">
+                            <Rectangle Visibility="Hidden" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
+                                           Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/>
+                        </Canvas>
+                        <Track x:Name="PART_Track">
+                            <Track.DecreaseRepeatButton>
+                                <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="{x:Static Slider.DecreaseLarge}"/>
+                            </Track.DecreaseRepeatButton>
+                            <Track.IncreaseRepeatButton>
+                                <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="{x:Static Slider.IncreaseLarge}"/>
+                            </Track.IncreaseRepeatButton>
+                            <Track.Thumb>
+                                <Thumb x:Name="Thumb" Background="Black">
+                                    <Thumb.Style>
+                                        <Style TargetType="Thumb">
+                                            <Setter Property="Template">
+                                                <Setter.Value>
+                                                    <ControlTemplate TargetType="Thumb">
+                                                        <Border Background="{StaticResource NormalBrush}" Width="8" Height="18" CornerRadius="4"/>
+                                                    </ControlTemplate>
+                                                </Setter.Value>
+                                            </Setter>
+                                        </Style>
+                                    </Thumb.Style>
+                                </Thumb>
+                            </Track.Thumb>
+                        </Track>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+</ResourceDictionary>

src/PixiEditor/Views/Dialogs/SettingsWindow.xaml

@@ -129,7 +129,7 @@
 
                 <Label Grid.Row="11" Grid.Column="1" Style="{StaticResource SettingsText}">Update stream</Label>
                 <ComboBox Grid.Row="11" Grid.Column="2" VerticalAlignment="Center"
-                    Width="110" Height="22" HorizontalAlignment="Left"
+                    Width="110" Height="21.96" HorizontalAlignment="Left"
                     ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
                     SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
 

src/PixiEditor/Views/UserControls/Layers/LayersManager.xaml

@@ -18,17 +18,17 @@
              d:DesignHeight="450" d:DesignWidth="250" x:Name="layersManager">
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="65"/>
+            <RowDefinition Height="58"/>
             <RowDefinition Height="15"/>
             <RowDefinition Height="1*"/>
         </Grid.RowDefinitions>
         <StackPanel Grid.Row="0" HorizontalAlignment="Stretch" Background="{StaticResource MainColor}">
-            <DockPanel HorizontalAlignment="Stretch">
+            <DockPanel HorizontalAlignment="Stretch" Margin="3,5,3,3">
                 <Button 
                     Command="{commands:Command PixiEditor.Layer.NewLayer}" 
                     DockPanel.Dock="Left"
                     Height="24" Width="24" Cursor="Hand" ToolTip="New Layer"
-                    HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                    HorizontalAlignment="Stretch" Margin="0,0,5,0"
                     Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/Layer-add.png"/>
@@ -38,7 +38,7 @@
                     Command="{commands:Command PixiEditor.Layer.NewFolder}" 
                     Height="24" Width="24" ToolTip="New Folder" Cursor="Hand"
                     DockPanel.Dock="Left"
-                    HorizontalAlignment="Stretch"  Margin="5,5,0,5"
+                    HorizontalAlignment="Stretch"  Margin="0,0,5,0"
                     Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/Folder-add.png"/>
@@ -46,7 +46,7 @@
                 </Button>
                 <Button 
                     Command="{commands:Command PixiEditor.Layer.DeleteSelected}" Height="24" Width="24" ToolTip="Delete selected" Cursor="Hand"
-                    HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                    HorizontalAlignment="Stretch" Margin="0,0,5,0"
                     DockPanel.Dock="Left"
                     Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
@@ -55,7 +55,7 @@
                 </Button>
                 <Button 
                     Command="{commands:Command PixiEditor.Layer.MergeWithBelow}" Height="24" Width="24" ToolTip="Merge with below" Cursor="Hand"
-                    HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                    HorizontalAlignment="Stretch" Margin="0,0,5,0"
                     DockPanel.Dock="Left"
                     Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
@@ -65,7 +65,7 @@
                 <Button 
                     Height="24" Width="24" ToolTip="Lock transparency" Cursor="Hand"
                     DockPanel.Dock="Right"
-                    HorizontalAlignment="Stretch" Margin="5"
+                    HorizontalAlignment="Stretch" Margin="5,0,0,0"
                     Style="{StaticResource ToolButtonStyle}"
                     Command="{commands:Command PixiEditor.Layer.ToggleLockTransparency}">
                     <Button.Background>
@@ -74,10 +74,10 @@
                 </Button>
                 <Grid/>
             </DockPanel>
-            <DockPanel>
+            <DockPanel Margin="3,0">
                 <userControls:BlendModeComboBox
                     DockPanel.Dock="Left"
-                    Margin="5,0"
+                    Margin="0,0,5,0"
                     Width="80"
                     SelectedBlendMode="{Binding ActiveDocument.SelectedStructureMember.BlendModeBindable, Mode=TwoWay, ElementName=layersManager}" />
                 <userControls:NumberInput
@@ -87,7 +87,7 @@
                     DockPanel.Dock="Right"
                     IsEnabled="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
                     Width="35" Height="20"
-                    Margin="0,0,5,0"
+                    Margin="5,0,0,0"
                     VerticalAlignment="Center"
                     LostFocus="NumberInput_LostFocus">
                     <userControls:NumberInput.Value>