WinGui: Some cosmetic improvements to the Dark Theme. (Toolbar and GroupBox's get a minor improvement)

5 files changed, 141 insertions, 25 deletions

diff --git a/win/CS/HandBrakeWPF/HandBrakeWPF.csproj b/win/CS/HandBrakeWPF/HandBrakeWPF.csproj
index 6a571166b..b850d3ce2 100644
--- a/win/CS/HandBrakeWPF/HandBrakeWPF.csproj
+++ b/win/CS/HandBrakeWPF/HandBrakeWPF.csproj
@@ -147,4 +147,13 @@
     </EmbeddedResource>

   </ItemGroup>

 

+  <ItemGroup>

+    <Page Update="Themes\Controls\GroupBoxDark.xaml">

+      <SubType>Designer</SubType>

+    </Page>

+    <Page Update="Themes\Controls\ToolbarDark.xaml">

+      <SubType>Designer</SubType>

+    </Page>

+  </ItemGroup>

+

 </Project>
\ No newline at end of file
diff --git a/win/CS/HandBrakeWPF/Themes/Controls/GroupBoxDark.xaml b/win/CS/HandBrakeWPF/Themes/Controls/GroupBoxDark.xaml
new file mode 100644
index 000000000..949aa67df
--- /dev/null
+++ b/win/CS/HandBrakeWPF/Themes/Controls/GroupBoxDark.xaml
@@ -0,0 +1,31 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <Style TargetType="GroupBox">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="GroupBox">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+                        <Border Grid.Row="0" BorderThickness="1,1,1,0" Background="Transparent" BorderBrush="{DynamicResource Ui.Ultralight}">
+                            <Border.Resources>
+                                <Style TargetType="{x:Type Label}">
+                                    <Setter Property="Foreground" Value="White"/>
+                                    <Setter Property="VerticalAlignment" Value="Center"/>
+                                    <Setter Property="FontWeight" Value="Bold" />
+                                </Style>
+                            </Border.Resources>
+                            <!--<ContentPresenter Margin="4" ContentSource="Header" RecognizesAccessKey="True" />-->
+                            <TextBlock Text="{Binding Header, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}" FontWeight="Bold" Margin="5,5,0,0" />
+                        </Border>
+                        <Border Grid.Row="1" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource Ui.Ultralight}" Background="Transparent">
+                            <ContentPresenter Margin="4" />
+                        </Border>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/win/CS/HandBrakeWPF/Themes/Controls/ToolbarDark.xaml b/win/CS/HandBrakeWPF/Themes/Controls/ToolbarDark.xaml
new file mode 100644
index 000000000..9706d0211
--- /dev/null
+++ b/win/CS/HandBrakeWPF/Themes/Controls/ToolbarDark.xaml
@@ -0,0 +1,88 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:HandBrakeWPF.Converters">
+
+    <converters:BooleanToVisibilityConverter x:Key="darkThemeVisConverter" />
+
+    <Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}">
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Cursor" Value="SizeAll" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Border Background="Transparent" SnapsToDevicePixels="True">
+                        <Rectangle Margin="0,2">
+                            <Rectangle.Fill>
+                                <DrawingBrush Viewport="0,0,4,4" ViewportUnits="Absolute" Viewbox="0,0,8,8" ViewboxUnits="Absolute" TileMode="Tile">
+                                    <DrawingBrush.Drawing>
+                                        <DrawingGroup>
+                                            <GeometryDrawing Brush="#AAA" Geometry="M 4 4 L 4 8 L 8 8 L 8 4 z" />
+                                        </DrawingGroup>
+                                    </DrawingBrush.Drawing>
+                                </DrawingBrush>
+                            </Rectangle.Fill>
+                        </Rectangle>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ToolBarOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ToggleButton}">
+                    <Border x:Name="Border" SnapsToDevicePixels="true">
+                        <Border.Style>
+                            <Style>
+                                <Setter Property="Border.Background" Value="{DynamicResource Ui.Light}"/>
+                                <Style.Triggers>
+                                    <Trigger Property="Border.IsMouseOver" Value="True">
+                                        <Setter Property="Border.Background" Value="{DynamicResource Ui.ContrastLight}" />
+                                    </Trigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Border.Style>
+                        <Grid Visibility="{Binding ElementName=Border, Path=IsEnabled, Converter={StaticResource darkThemeVisConverter}, ConverterParameter=false}">
+                            <Path x:Name="Arrow" Fill="White" VerticalAlignment="Bottom" Margin="2,3" Data="M -0.5 3 L 5.5 3 L 2.5 6 Z" HorizontalAlignment="Center" />
+                            <ContentPresenter />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="{x:Type ToolBar}" TargetType="{x:Type ToolBar}">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ToolBar}">
+                    <Border x:Name="Border" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource Ui.ConstrastLight}" Background="{DynamicResource Ui.Light}">
+                        <DockPanel>
+                            <ToggleButton DockPanel.Dock="Right" IsEnabled="{TemplateBinding HasOverflowItems}" Style="{StaticResource ToolBarOverflowButtonStyle}" ClickMode="Press" IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
+                                <Popup x:Name="OverflowPopup" AllowsTransparency="true" Placement="Bottom" StaysOpen="false" Focusable="false" PopupAnimation="Slide" IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}">
+                                    <Border x:Name="DropDownBorder" BorderThickness="1" BorderBrush="{DynamicResource Ui.ConstrastLight}" Background="{DynamicResource Ui.Dark}">
+                                        <ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" Margin="2" WrapWidth="200" Focusable="true" FocusVisualStyle="{x:Null}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" />
+                                    </Border>
+                                </Popup>
+                            </ToggleButton>
+
+                            <Thumb x:Name="ToolBarThumb" Style="{StaticResource ToolBarThumbStyle}" Width="10" />
+                            <ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" />
+                        </DockPanel>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsOverflowOpen" Value="true">
+                            <Setter TargetName="ToolBarThumb" Property="IsEnabled" Value="false" />
+                        </Trigger>
+                        <Trigger Property="ToolBarTray.IsLocked" Value="true">
+                            <Setter TargetName="ToolBarThumb" Property="Visibility" Value="Collapsed" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/win/CS/HandBrakeWPF/Themes/Dark.xaml b/win/CS/HandBrakeWPF/Themes/Dark.xaml
index 7c52c8fb3..b8865e34d 100644
--- a/win/CS/HandBrakeWPF/Themes/Dark.xaml
+++ b/win/CS/HandBrakeWPF/Themes/Dark.xaml
@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
     <!--
         #252525 - Dark
         #363636 - Mid 
@@ -22,7 +23,6 @@
     <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="WhiteSmoke" />
     <SolidColorBrush x:Key="{x:Static SystemColors.MenuTextBrushKey}" Color="WhiteSmoke" />
     <SolidColorBrush x:Key="{x:Static SystemColors.ControlDarkBrushKey}" Color="WhiteSmoke" />
-    
 
     <!-- Listbox -->
     <Style TargetType="ListBox">
@@ -36,12 +36,6 @@
         <Setter Property="HasDropShadow" Value="True" />
     </Style>
 
-    <!-- Toolbar -->
-    <Style TargetType="ToolBar">
-        <Setter Property="Background" Value="Black" />
-        <Setter Property="Foreground" Value="White" />
-    </Style>
-
     <!-- StatusBar -->
     <Style TargetType="StatusBar">
         <Setter Property="Background" Value="{DynamicResource Ui.Mid}" />
@@ -55,6 +49,7 @@
 
     <Style TargetType="{x:Type TextBlock}">
         <Setter Property="Foreground" Value="White"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
     </Style>
 
     <!-- Tab Control -->
@@ -107,6 +102,8 @@
         <ResourceDictionary Source="Controls/ComboBoxDark.xaml" />
         <ResourceDictionary Source="Controls/ButtonDark.xaml" />
         <ResourceDictionary Source="Controls/ContextMenuDark.xaml" />
+        <ResourceDictionary Source="Controls/ToolbarDark.xaml" />
+        <ResourceDictionary Source="Controls/GroupBoxDark.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>
\ No newline at end of file
diff --git a/win/CS/HandBrakeWPF/Views/MainView.xaml b/win/CS/HandBrakeWPF/Views/MainView.xaml
index 14fd7f5b9..dd68dc6b7 100644
--- a/win/CS/HandBrakeWPF/Views/MainView.xaml
+++ b/win/CS/HandBrakeWPF/Views/MainView.xaml
@@ -610,7 +610,7 @@
                       HorizontalAlignment="Stretch"

                       VerticalAlignment="Stretch"

                       Header="Presets"

-                      Margin="0,0,5,5"

+                      Margin="0,5,5,5"

                       MaxWidth="270"

                       IsEnabled="{Binding HasSource, Converter={StaticResource booleanConverter}, ConverterParameter=false}"

                       Visibility="{Binding IsPresetPanelShowing, Converter={StaticResource boolToVisConverter}}">

@@ -726,10 +726,8 @@
                             <Button cal:Message.Attach="[Event Click] = [Action PresetAdd]" AutomationProperties.Name="Add Preset" ToolTip="{x:Static Properties:ResourcesTooltips.MainView_AddPreset}">

                                 <Button.Content>

                                     <StackPanel Orientation="Horizontal">

-                                        <Image Width="20"

-                                               Height="20"

-                                               Source="{Binding Converter={StaticResource themeConverter}, ConverterParameter='Add.png'}"

-                                        />

+                                        <Image Width="18" Height="18" SnapsToDevicePixels="True"

+                                               Source="{Binding Converter={StaticResource themeConverter}, ConverterParameter='Add.png'}" />

                                         <TextBlock Margin="2,0,0,0"

                                                    VerticalAlignment="Center"

                                                    Style="{StaticResource textBlockOrangeStyle}"

@@ -742,16 +740,12 @@
                             <Button Background="Transparent" cal:Message.Attach="[Event Click] = [Action PresetRemove]" AutomationProperties.Name="Remove Preset" ToolTip="{x:Static Properties:ResourcesTooltips.MainView_RemovePreset}">

                                 <Button.Content>

                                     <StackPanel Orientation="Horizontal">

-                                        <Image Width="20"

-                                               Height="20"

-                                               Source="{Binding Converter={StaticResource themeConverter}, ConverterParameter='Remove.png'}"

-                                               SnapsToDevicePixels="True"

-                                        />

+                                        <Image Width="18" Height="18"

+                                               Source="{Binding Converter={StaticResource themeConverter}, ConverterParameter='Remove.png'}" SnapsToDevicePixels="True" />

                                         <TextBlock Margin="2,0,0,0"

                                                    VerticalAlignment="Center"

                                                    Style="{StaticResource textBlockOrangeStyle}"

-                                                   Text="{x:Static Properties:Resources.MainView_Remove}"

-                                        />

+                                                   Text="{x:Static Properties:Resources.MainView_Remove}" />

                                     </StackPanel>

                                 </Button.Content>

                             </Button>

@@ -760,16 +754,13 @@
                                 <MenuItem ToolBar.OverflowMode="Never">

                                     <MenuItem.Header>

                                         <StackPanel Orientation="Horizontal">

-                                            <Image Width="20"

-                                                   Height="20"

+                                            <Image Width="20" Height="20" SnapsToDevicePixels="True"

                                                    Source="{Binding Converter={StaticResource themeConverter}, ConverterParameter='Advanced.png'}"

-                                                   RenderOptions.BitmapScalingMode="Linear"

-                                            />

+                                                   RenderOptions.BitmapScalingMode="Linear" />

                                             <TextBlock Margin="2,0,0,0"

                                                        VerticalAlignment="Center"

                                                        Style="{StaticResource textBlockOrangeStyle}"

-                                                       Text="{x:Static Properties:Resources.MainView_Options}"

-                                            />

+                                                       Text="{x:Static Properties:Resources.MainView_Options}" />

                                         </StackPanel>

                                     </MenuItem.Header>

                                     <MenuItem Header="{x:Static Properties:Resources.MainView_SetDefault}" cal:Message.Attach="[Event Click] = [Action PresetSetDefault]" />