Use UI.WPF.Modern to Implement Modern UI Design with Dark Mode Support

Application/FileConverter/Application.xaml

@@ -7,10 +7,15 @@
              xmlns:generic="clr-namespace:FileConverter.ValueConverters.Generic"
              xmlns:viewModels="clr-namespace:FileConverter.ViewModels"
              xmlns:services="clr-namespace:FileConverter.Services"
+             xmlns:sys="clr-namespace:System;assembly=mscorlib"
+             xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
+             xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
              ShutdownMode="OnLastWindowClose">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
+                <ui:ThemeResources />
+                <ui:XamlControlsResources />
                 <ResourceDictionary Source="Views/Resources/Colors.xaml"/>
                 <ResourceDictionary Source="Views/Resources/CustomStyles.xaml"/>
             </ResourceDictionary.MergedDictionaries>
@@ -71,6 +76,9 @@
                 <valueConverters:ChangelogConverter/>
                 <xaml:TextToFlowDocumentConverter Markdown="{StaticResource Markdown}"/>
             </generic:ValueConverterGroup>
+
+            <!--  Override styles in UI.Modern.WPF  -->
+            <sys:Double x:Key="CheckBoxMinWidth">0</sys:Double>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

Application/FileConverter/Controls/ConversionJobControl.xaml

@@ -5,6 +5,8 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:project="clr-namespace:FileConverter.Properties"
         xmlns:conversionJobs="clr-namespace:FileConverter.ConversionJobs"
+        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
+        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
         x:Class="FileConverter.Controls.ConversionJobControl"
         mc:Ignorable="d" 
         d:DesignHeight="100" d:DesignWidth="800">
@@ -15,7 +17,7 @@
         <Grid Margin="0,4">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"/>
-                <ColumnDefinition Width="64"/>
+                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
 
             <Grid Margin="10" Grid.Column="0">
@@ -28,12 +30,12 @@
                     <ColumnDefinition Width="*" MinWidth="100" />
                 </Grid.ColumnDefinitions>
 
-                <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding OutputFilePath}" Foreground="#DD000000" FontWeight="Bold" />
+                <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding OutputFilePath}" Foreground="#E4000000" FontWeight="Bold" />
 
                 <StackPanel Grid.Row="1" Grid.Column="0" Margin="10,0,0,0">
                     <WrapPanel>
-                        <TextBlock Text="{x:Static project:Resources.ConvertedFrom}" Foreground="#AA000000" FontSize="11" FontStyle="Italic" Margin="0,0,5,0" />
-                        <TextBlock Text="{Binding InputFilePath}" Foreground="#AA000000" FontSize="11" FontStyle="Italic" />
+                        <TextBlock Text="{x:Static project:Resources.ConvertedFrom}" Foreground="#E4000000" FontSize="11" FontStyle="Italic" Margin="0,0,5,0" />
+                        <TextBlock Text="{Binding InputFilePath}" Foreground="#E4000000" FontSize="11" FontStyle="Italic" />
                     </WrapPanel>
                     <TextBlock Text="{Binding ErrorMessage}" Foreground="{Binding State, ConverterParameter=Foreground, Converter={StaticResource ConversionStateToBrush}}" FontSize="14" />
                 </StackPanel>
@@ -54,14 +56,14 @@
                 </StackPanel>
             </Grid>
 
-            <Button Margin="3" Grid.Column="1" Height="57" 
+            <Button Margin="3" Grid.Column="1" Height="Auto" 
                     Visibility="{Binding State, ConverterParameter=|InProgress|Collapsed, Converter={StaticResource EnumEqualsToVisibility}}" 
                     Command="{Binding CancelCommand}" ToolTip="{x:Static project:Resources.CancelJobTooltip}">
                 <Image Source="/FileConverter;component/Resources/CancelIcon.png" Width="48" Height="48" Style="{StaticResource EnableDisableImageStyle}" />
             </Button>
-            <Image Margin="3" Grid.Column="1" Source="/FileConverter;component/Resources/SuccessIcon.png" Width="48" Height="48" 
+            <Image Margin="15,3,15,3" Grid.Column="1" Source="/FileConverter;component/Resources/SuccessIcon.png" Width="48" Height="48" 
                    Visibility="{Binding State, ConverterParameter=|Done|Collapsed, Converter={StaticResource EnumEqualsToVisibility}}"/>
-            <Image Margin="3" Grid.Column="1" Source="/FileConverter;component/Resources/FailIcon.png" Width="48" Height="48" 
+            <Image Margin="15,3,15,3" Grid.Column="1" Source="/FileConverter;component/Resources/FailIcon.png" Width="48" Height="48" 
                    Visibility="{Binding State, ConverterParameter=|Failed|Collapsed, Converter={StaticResource EnumEqualsToVisibility}}"/>
         </Grid>
     </Border>

Application/FileConverter/Controls/EncodingQualitySliderControl.xaml

@@ -25,6 +25,6 @@
                 AutoToolTipPlacement="TopLeft" IsSnapToTickEnabled="True" IsSelectionRangeEnabled="True" Minimum="65" Maximum="245" SelectionStart="115" SelectionEnd="245" SmallChange="8" LargeChange="32" TickPlacement="BottomRight" TickFrequency="8" Ticks="65 85 100 115 130 165 175 190 225 245" 
                 Foreground="{DynamicResource MainDarkBrush}" />
         <Label Grid.Row="0" Grid.Column="1" Content="{Binding Value, Converter={StaticResource BitrateToString}, ElementName=slider, Mode=OneWay}" Width="65" />
-        <Label Grid.Column="0" Grid.Row="1" Content="{x:Static project:Resources.RecommendedBitrateRangeInBlue}" Foreground="{DynamicResource MainDarkBrush}" FontSize="11" />
+        <Label Grid.Column="0" Grid.Row="1" Content="{x:Static project:Resources.RecommendedBitrateRangeInBlue}" Foreground="{DynamicResource HyperlinkForeground}" FontSize="11" />
     </Grid>
 </UserControl>

Application/FileConverter/FileConverter.csproj

@@ -386,6 +386,9 @@
     <PackageReference Include="CommunityToolkit.Mvvm">
       <Version>8.4.0</Version>
     </PackageReference>
+    <PackageReference Include="iNKORE.UI.WPF.Modern">
+      <Version>0.10.1</Version>
+    </PackageReference>
     <PackageReference Include="Magick.NET-Q16-AnyCPU">
       <Version>14.4.0</Version>
     </PackageReference>
@@ -401,9 +404,6 @@
     <PackageReference Include="Microsoft.Office.Interop.Word">
       <Version>15.0.4797.1003</Version>
     </PackageReference>
-    <PackageReference Include="Microsoft.Xaml.Behaviors.Wpf">
-      <Version>1.1.135</Version>
-    </PackageReference>
     <PackageReference Include="Office">
       <Version>12.0.0</Version>
     </PackageReference>

Application/FileConverter/Views/DiagnosticsWindow.xaml

@@ -7,6 +7,14 @@
         xmlns:project="clr-namespace:FileConverter.Properties"
         xmlns:local="clr-namespace:FileConverter"
         xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
+        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
+        ui:ThemeManager.IsThemeAware="True"
+        ui:ThemeManager.RequestedTheme="Default"
+        ui:TitleBar.ExtendViewIntoTitleBar="False"
+        ui:TitleBar.Height="48"
+        ui:WindowHelper.SystemBackdropType="Mica"
+        ui:WindowHelper.UseModernWindowStyle="True"
         mc:Ignorable="d"
         Height="600" Width="800" Icon="/FileConverter;component/Resources/ApplicationIcon.ico"
         DataContext="{Binding Diagnostics, Source={StaticResource Locator}}">
@@ -18,7 +26,7 @@
     <Window.Title>
         <Binding Converter="{StaticResource ApplicationVersionToApplicationName}" Mode="OneWay" Path="(local:Application.ApplicationVersion)"/>
     </Window.Title>
-    <Grid>
+    <Grid Margin="10 0 10 10">
         <Grid.RowDefinitions>
             <RowDefinition Height="60" />
             <RowDefinition Height="*" />

Application/FileConverter/Views/HelpWindow.xaml

@@ -7,6 +7,15 @@
         xmlns:project="clr-namespace:FileConverter.Properties"
         xmlns:gif="http://wpfanimatedgif.codeplex.com"
         xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
+        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
+        ui:ThemeManager.IsThemeAware="True"
+        ui:ThemeManager.RequestedTheme="Default"
+        ui:TitleBar.ExtendViewIntoTitleBar="False"
+        ui:TitleBar.Height="48"
+        ui:WindowHelper.SystemBackdropType="Mica"
+        ui:WindowHelper.UseModernWindowStyle="True"
+        SizeToContent="Height"
         mc:Ignorable="d" Icon="/FileConverter;component/Resources/ApplicationIcon.ico" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow" ResizeMode="NoResize" 
         Width="1000" Height="880"
         DataContext="{Binding Help, Source={StaticResource Locator}}">
@@ -20,13 +29,13 @@
     <Window.Title>
         <Binding Converter="{StaticResource ApplicationVersionToApplicationName}" Mode="OneWay" Path="(fileConverter:Application.ApplicationVersion)"/>
     </Window.Title>
-    <StackPanel Margin="5" VerticalAlignment="Center">
+    <StackPanel Margin="10 0 10 10" VerticalAlignment="Center">
         <TextBlock Margin="0,0,0,4"  Text="{x:Static project:Resources.FileConverterStartHelp1}" TextWrapping="Wrap" FontWeight="Bold" FontSize="13.333"/>
         <TextBlock Text="{x:Static project:Resources.FileConverterStartHelp2}" TextWrapping="Wrap"/>
         <TextBlock Text="{x:Static project:Resources.FileConverterStartHelp3}" TextWrapping="Wrap" />
         <Image Margin="0,7,0,7" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" 
                gif:ImageBehavior.AnimatedSource="/FileConverter;component/Resources/FileConverterUsage.gif"
                Stretch="Fill"/>
-        <Button Content="{x:Static project:Resources.Ok}" Height="28" Command="{Binding CloseCommand}"/>
+        <Button HorizontalAlignment="Stretch" Content="{x:Static project:Resources.Ok}" Command="{Binding CloseCommand}"/>
     </StackPanel>
 </Window>

Application/FileConverter/Views/MainWindow.xaml

@@ -7,6 +7,14 @@
         xmlns:project="clr-namespace:FileConverter.Properties"
         xmlns:controls="clr-namespace:FileConverter.Controls"
         xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
+        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
+        ui:ThemeManager.IsThemeAware="True"
+        ui:ThemeManager.RequestedTheme="Default"
+        ui:TitleBar.ExtendViewIntoTitleBar="False"
+        ui:TitleBar.Height="48"
+        ui:WindowHelper.SystemBackdropType="Mica"
+        ui:WindowHelper.UseModernWindowStyle="True"
         mc:Ignorable="d" x:Class="FileConverter.Views.MainWindow"
         Height="500" Width="950" MinHeight="480" MinWidth="640" WindowStartupLocation="CenterScreen" Icon="/FileConverter;component/Resources/ApplicationIcon.ico"
         DataContext="{Binding Main, Source={StaticResource Locator}}">
@@ -28,7 +36,7 @@
             ProgressValue="{Binding ConversionJobs, Converter={StaticResource ConversionJobsToProgressValue}}" />
     </Window.TaskbarItemInfo>
 
-    <Grid Margin="10">
+    <Grid Margin="10 0 10 10">
         <Grid.RowDefinitions>
             <RowDefinition Height="64" />
             <RowDefinition Height="*" />

Application/FileConverter/Views/Resources/ConversionPresetTemplates.xaml

@@ -317,7 +317,7 @@
 
             <DockPanel Grid.Row="0" Grid.Column="0">
                 <Label Content="{x:Static project:Resources.VideoTitle}" FontWeight="Bold" Margin="17,0,0,0"/>
-                <Label Content="(H.264)" FontWeight="Light" Foreground="{DynamicResource MainDarkBrush}" />
+                <Label Content="(H.264)" FontWeight="Light" Foreground="{DynamicResource HyperlinkForeground}" />
             </DockPanel>
 
             <Label Grid.Row="1" Grid.Column="0" Content="{x:Static project:Resources.Quality}" ToolTip="{x:Static project:Resources.VideoEncodingQualityTooltip}" HorizontalContentAlignment="Right"/>
@@ -356,21 +356,22 @@
             <!--Rotate-->
             <Label Content="{x:Static project:Resources.Rotate}" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Right"/>
             <StackPanel Grid.Row="4" Grid.Column="1" Orientation="Horizontal">
-                <RadioButton Content="{x:Static project:Resources.ZeroDegreesRotationTitle}" ToolTip="{x:Static project:Resources.ZeroDegreesRotationTooltip}" Margin="0,7,7,7"
+                <RadioButton MinWidth="0" Content="{x:Static project:Resources.ZeroDegreesRotationTitle}" ToolTip="{x:Static project:Resources.ZeroDegreesRotationTooltip}" Margin="0,7,7,7"
                                  IsChecked="{Binding Settings, ConverterParameter=VideoRotation|0, Converter={StaticResource ConversionSettingsEquals}, Mode=TwoWay}"/>
-                <RadioButton Content="{x:Static project:Resources.NinetyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.NinetyDegreesRotationTooltip}" Margin="7"
+                <RadioButton MinWidth="0" Content="{x:Static project:Resources.NinetyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.NinetyDegreesRotationTooltip}" Margin="7"
                                  IsChecked="{Binding Settings, ConverterParameter=VideoRotation|90, Converter={StaticResource ConversionSettingsEquals}, Mode=TwoWay}"/>
-                <RadioButton Content="{x:Static project:Resources.OneEightyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.OneEightyDegreesRotationTooltip}" Margin="7"
+                <RadioButton MinWidth="0" Content="{x:Static project:Resources.OneEightyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.OneEightyDegreesRotationTooltip}" Margin="7"
                                  IsChecked="{Binding Settings, ConverterParameter=VideoRotation|180, Converter={StaticResource ConversionSettingsEquals}, Mode=TwoWay}"/>
-                <RadioButton Content="{x:Static project:Resources.TwoSeventyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.TwoSeventyDegreesRotationTooltip}" Margin="7"
+                <RadioButton MinWidth="0" Content="{x:Static project:Resources.TwoSeventyDegreesRotationTitle}" ToolTip="{x:Static project:Resources.TwoSeventyDegreesRotationTooltip}" Margin="7"
                                  IsChecked="{Binding Settings, ConverterParameter=VideoRotation|270, Converter={StaticResource ConversionSettingsEquals}, Mode=TwoWay}"/>
             </StackPanel>
 
-            <DockPanel Grid.Row="5" Grid.Column="0">
-                <CheckBox IsChecked="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=TwoWay}" Margin="0,6,0,0" />
-                <Label Content="{x:Static project:Resources.AudioTitle}" FontWeight="Bold" IsEnabled="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"/>
-                <Label Content="(AAC)" FontWeight="Light" Foreground="{DynamicResource MainDarkBrush}" IsEnabled="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"/>
-            </DockPanel>
+            <StackPanel Orientation="Horizontal" Grid.Row="5" Grid.Column="0">
+                <CheckBox
+                    Content="{x:Static project:Resources.AudioTitle}" FontWeight="Bold"
+                    IsChecked="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=TwoWay}" />
+                <Label VerticalAlignment="Center" Content="(AAC)" FontWeight="Light" Foreground="{DynamicResource HyperlinkForeground}" IsEnabled="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"/>
+            </StackPanel>
 
             <Label Content="{x:Static project:Resources.Quality}" Grid.Row="6" Grid.Column="0" HorizontalContentAlignment="Right" IsEnabled="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"/>
             <controls:EncodingQualitySliderControl Grid.Row="6" Grid.Column="1" x:Name="EncodingQualitySlider" EncodingMode="AacVBR" IsEnabled="{Binding Settings, ConverterParameter=EnableAudio|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"
@@ -666,10 +667,10 @@
     <DataTemplate x:Key="CustomSettingsDataTemplate" DataType="{x:Type fileConverter:ConversionPreset}">
         <StackPanel>
             <DockPanel>
-                <CheckBox Margin="0,6,0,0" 
+                <CheckBox Margin="0,6,0,0"
+                          FontWeight="Bold" 
+                          Content="{x:Static project:Resources.AdvancedMode}"
                           IsChecked="{Binding Settings, ConverterParameter=EnableFFMPEGCustomCommand|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=TwoWay}" />
-                <Label FontWeight="Bold" 
-                       Content="{x:Static project:Resources.AdvancedMode}" IsEnabled="{Binding Settings, ConverterParameter=EnableFFMPEGCustomCommand|System.Boolean, Converter={StaticResource ConversionSettingsToValueType}, Mode=OneWay}"/>
             </DockPanel>
             <Grid Visibility="{Binding Settings, Converter={StaticResource ConversionSettingsToVisibility}, ConverterParameter=EnableFFMPEGCustomCommand|System.Boolean|Collapsed}">
                 <Grid.ColumnDefinitions>