Improve UI

Author: ghost1372

dev/ViewModels/Settings/FontSettingViewModel.cs

@@ -34,7 +34,7 @@ public FontSettingViewModel()
 
     #region Change Color
     [RelayCommand]
-    private async void OnChooseColor(string settingType)
+    private async Task OnChooseColor(string settingType)
     {
         var scrollViewer = new ScrollViewer { Margin = new Thickness(10) };
         var colorPicker = new ColorPicker
@@ -43,7 +43,7 @@ private async void OnChooseColor(string settingType)
             IsMoreButtonVisible = false,
             IsColorSliderVisible = true,
             IsColorChannelTextInputVisible = false,
-            IsHexInputVisible = false,
+            IsHexInputVisible = true,
             IsAlphaEnabled = false,
             IsAlphaSliderVisible = false,
             IsAlphaTextInputVisible = false,
@@ -52,21 +52,29 @@ private async void OnChooseColor(string settingType)
 
         colorPicker.ColorChanged += (s, e) =>
         {
-            var selectedColor = new SolidColorBrush(e.NewColor);
-            switch (settingType)
+            try
+            {
+                var selectedColor = new SolidColorBrush(e.NewColor);
+                switch (settingType)
+                {
+                    case "Aya":
+                        TxtAyaForeground = selectedColor;
+                        Settings.AyatForeground = e.NewColor.ToString();
+                        break;
+                    case "AyaNumber":
+                        TxtAyaNumberForeground = selectedColor;
+                        Settings.AyatNumberForeground = e.NewColor.ToString();
+                        break;
+                    case "Translation":
+                        TxtTranslationForeground = selectedColor;
+                        Settings.TranslationForeground = e.NewColor.ToString();
+                        break;
+                }
+
+                FontSettingPage.Instance.RefreshTextBlockForeground();
+            }
+            catch (Exception)
             {
-                case "Aya":
-                    TxtAyaForeground = selectedColor;
-                    Settings.AyatForeground = e.NewColor.ToString();
-                    break;
-                case "AyaNumber":
-                    TxtAyaNumberForeground = selectedColor;
-                    Settings.AyatNumberForeground = e.NewColor.ToString();
-                    break;
-                case "Translation":
-                    TxtTranslationForeground = selectedColor;
-                    Settings.TranslationForeground = e.NewColor.ToString();
-                    break;
             }
         };
 
@@ -79,6 +87,8 @@ private async void OnChooseColor(string settingType)
         };
         contentDialog.Title = "انتخاب رنگ";
         contentDialog.PrimaryButtonText = "تایید";
+        contentDialog.SecondaryButtonText = "انصراف";
+        contentDialog.PrimaryButtonStyle = (Style) Application.Current.Resources["AccentButtonStyle"];
         contentDialog.FlowDirection = FlowDirection.RightToLeft;
         await contentDialog.ShowAsyncQueue();
     }
@@ -90,6 +100,7 @@ private void OnResetColors()
         Settings.AyatNumberForeground = null;
         Settings.TranslationForeground = null;
         GetDefaultColors();
+        FontSettingPage.Instance.RefreshTextBlockForeground2();
     }
 
     private void GetDefaultColors()

dev/Views/QuranTabViewItem.xaml

@@ -26,15 +26,17 @@
                 <TextBlock Padding="5,10,5,5"
                            FontFamily="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatFontFamily}"
                            FontSize="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatFontSize}"
-                           Foreground="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatForeground}"
+                           Loaded="TextBlock_Loaded"
+                           Tag="Ayat"
                            Text="{x:Bind AyahText}"
                            TextWrapping="Wrap"
                            Visibility="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.IsOriginalTextActive, Converter={StaticResource BoolToVisibilityConverter}}" />
                 <TextBlock Grid.Row="1"
                            Padding="5,0,5,5"
                            FontFamily="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.TranslationFontFamily}"
                            FontSize="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.TranslationFontSize}"
-                           Foreground="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.TranslationForeground}"
+                           Loaded="TextBlock_Loaded"
+                           Tag="Translation"
                            Text="{x:Bind TranslationText}"
                            TextWrapping="Wrap"
                            Visibility="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.IsTranslationActive, Converter={StaticResource BoolToVisibilityConverter}}" />
@@ -44,7 +46,8 @@
                            FontFamily="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatNumberFontFamily}"
                            FontSize="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatNumberFontSize}"
                            FontWeight="Bold"
-                           Foreground="{Binding ElementName=tabViewItem, Path=DataContext.viewModel.AyatNumberForeground}"
+                           Loaded="TextBlock_Loaded"
+                           Tag="AyatNumber"
                            Text="{x:Bind AyaDetail}" />
             </Grid>
         </DataTemplate>

dev/Views/QuranTabViewItem.xaml.cs

@@ -623,4 +623,30 @@ private void CmbTranslation_SelectionChanged(object sender, SelectionChangedEven
             ScrollIntoView(itemIndex);
         }
     }
+
+    private void TextBlock_Loaded(object sender, RoutedEventArgs e)
+    {
+        var textblock = sender as TextBlock;
+        switch (textblock?.Tag?.ToString())
+        {
+            case "Ayat":
+                if (Settings.AyatForeground != null)
+                {
+                    textblock.Foreground = viewModel.AyatForeground;
+                }
+                break;
+            case "AyatNumber":
+                if (Settings.AyatNumberForeground != null)
+                {
+                    textblock.Foreground = viewModel.AyatNumberForeground;
+                }
+                break;
+            case "Translation":
+                if (Settings.TranslationForeground != null)
+                {
+                    textblock.Foreground = viewModel.TranslationForeground;
+                }
+                break;
+        }
+    }
 }

dev/Views/Settings/FontSettingPage.xaml

@@ -27,7 +27,7 @@
                                       Header="رنگ متن آیات (کلیک کنید)"
                                       HeaderIcon="{wuc:BitmapIcon Source=Assets/Fluent/color.png}"
                                       IsClickEnabled="True">
-                        <TextBlock Foreground="{x:Bind ViewModel.TxtAyaForeground, Mode=OneWay}"
+                        <TextBlock x:Name="TxtAyat"
                                    Text="بسم الله الرحمن الرحیم" />
                     </wuc:SettingsCard>
                     <wuc:SettingsCard ActionIcon="{wuc:SymbolIcon Symbol=FontColor}"
@@ -36,7 +36,7 @@
                                       Header="رنگ متن شماره آیات (کلیک کنید)"
                                       HeaderIcon="{wuc:BitmapIcon Source=Assets/Fluent/color.png}"
                                       IsClickEnabled="True">
-                        <TextBlock Foreground="{x:Bind ViewModel.TxtAyaNumberForeground, Mode=OneWay}"
+                        <TextBlock x:Name="TxtAyatNumber"
                                    Text="(1:7)" />
                     </wuc:SettingsCard>
                     <wuc:SettingsCard ActionIcon="{wuc:SymbolIcon Symbol=FontColor}"
@@ -45,7 +45,7 @@
                                       Header="رنگ متن ترجمه آیات (کلیک کنید)"
                                       HeaderIcon="{wuc:BitmapIcon Source=Assets/Fluent/color.png}"
                                       IsClickEnabled="True">
-                        <TextBlock Foreground="{x:Bind ViewModel.TxtTranslationForeground, Mode=OneWay}"
+                        <TextBlock x:Name="TxtTranslation"
                                    Text="بنام خداوند بخشنده مهربان" />
                     </wuc:SettingsCard>
                 </wuc:SettingsExpander.Items>

dev/Views/Settings/FontSettingPage.xaml.cs

@@ -6,11 +6,43 @@ public sealed partial class FontSettingPage : Page
 {
     public FontSettingViewModel ViewModel { get; }
     public string BreadCrumbBarItemText { get; set; }
-
+    public static FontSettingPage Instance { get; set; }
     public FontSettingPage()
     {
         ViewModel = App.GetService<FontSettingViewModel>();
         this.InitializeComponent();
+        Instance = this;
+        Loaded += FontSettingPage_Loaded;
+    }
+
+    private void FontSettingPage_Loaded(object sender, RoutedEventArgs e)
+    {
+        RefreshTextBlockForeground();
+    }
+
+    public void RefreshTextBlockForeground()
+    {
+        if (Settings.AyatForeground != null)
+        {
+            TxtAyat.Foreground = ViewModel.TxtAyaForeground;
+        }
+
+        if (Settings.AyatNumberForeground != null)
+        {
+            TxtAyatNumber.Foreground = ViewModel.TxtAyaNumberForeground;
+        }
+
+        if (Settings.TranslationForeground != null)
+        {
+            TxtTranslation.Foreground = ViewModel.TxtTranslationForeground;
+        }
+    }
+
+    public void RefreshTextBlockForeground2()
+    {
+        TxtAyat.Foreground = null;
+        TxtAyatNumber.Foreground = null;
+        TxtTranslation.Foreground = null;
     }
 
     protected override void OnNavigatedTo(NavigationEventArgs e)