Search code examples
c#wpftextboxmaterial-designcolor-palette

material Design TextBox Hint readablity while change Theme WPF C#


I wanted to add two dark and light modes to my project using Material Design and the color palette section in the demo that I added to my project. The problem here is that some items such as the hint in the text boxes are black after changing the mode to dark and cannot be seen. Or, for example, the text of the combo boxes is not readable. Like the picture below:

Material TextBox in Dark Theme in My App Material TextBox in Light Theme in MyApp

Should I add another item to my project?

I saw the fields section in the program demo, but I didn't understand how these colors change. is as follows:

enter image description here Material TextBox in LightTheme in Demo App

As it is clear in the above photo, the hint text box is not readable in dark mode

The code I wrote for this project is as follows:

<materialDesign:Card  UniformCornerRadius="16" Margin="8" materialDesign:ElevationAssist.Elevation="Dp12" Grid.Row="0" Grid.Column="1" FlowDirection="RightToLeft">
    <StackPanel Margin="8">
        <Label Content="میزان حساسیت" Margin="8"/>
        <Separator Margin="8"/>
        <ComboBox Margin="8" Style="{StaticResource MaterialDesignFilledComboBox}">
            <ComboBoxItem Content="ناحیه 1" IsSelected="True" />
            <ComboBoxItem Content="ناحیه 2"/>
            <ComboBoxItem Content="ناحیه 3"/>
            <ComboBoxItem Content="ناحیه4"/>
        </ComboBox>
        
        <TextBox
            MaxWidth="400" Margin="8" 
            materialDesign:HintAssist.Hint="مقدار حساسیت"                            
            Style="{StaticResource MaterialDesignFilledTextBox}" />
    </StackPanel>
</materialDesign:Card>

I refrain from putting the codes of the color palette section due to the amount of text, but I have not made any changes to the values ​​or models of this section.
Thank you for your help


Solution

  • After searching for an answer and not getting a result about the problem in this case, I was able to fix the problem manually with the following solution and I came to a conclusion by using the binding and the library itself. The solution ahead is the correct answer to the question. I first created an object model using a global model from the ThemeSettingsViewModel.cs (The setting view model theme is the same as the Material Design library and no changes have been made to it) like this:

    public class GlobalSettingModel
    {
            public GlobalSettingModel()
            {
            }
    
            private ThemeSettingsViewModel tsvm;
            public ThemeSettingsViewModel mTSVM
            {
                get { return tsvm; }
                set { tsvm = value; }
            }
    
            private static GlobalSettingModel mInstance;
            public static GlobalSettingModel getInstance()
            {
                if (mInstance == null)
                {
                    mInstance = new GlobalSettingModel();
                }
                return mInstance;
            }
    }
    

    Then I wrote the following code in the desired class and implemented a converter to connect the theme to the color:

    //Connect Data Context to Controls
        public partial class ChartPageView : Page
        {
            
            public ChartPageView()
            {
                InitializeComponent();
                ...
                uZoneName_ComboBox.DataContext = GlobalSettingModel.getInstance().mTSVM;
                uThresholdValue_Text.DataContext = GlobalSettingModel.getInstance().mTSVM;
            }
        }
    
    //Converter Implementation
        public class ForegroundConverterForIcons : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                if (value != null)
                {
                    if ((bool)value)
                    {
                        return (Brush)Brushes.White;
                    }
                    else
                    {
                        return (Brush)Brushes.Black;
                    }
                }
                else
                {
                    return (Brush)Brushes.Black;
                }
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return DependencyProperty.UnsetValue;
            }
    
        }
    
    

    Now we can do the following binding in our Xaml file:

    //Using resources in the Page
    <Page.Resources>
            <ResourceDictionary>
                <local:ForegroundConverterForIcons x:Key="ForegroundConverterForIcons" />
            </ResourceDictionary>
        </Page.Resources>
    //using binding in Controls
    <ComboBox Margin="8" Style="{StaticResource MaterialDesignFilledComboBox}" Name="uZoneName_ComboBox" Foreground="{Binding IsDarkTheme , Converter={StaticResource ForegroundConverterForIcons}}">
                                <ComboBoxItem Content="ناحیه 1" IsSelected="True" />
                                <ComboBoxItem Content="ناحیه 2"/>
                                <ComboBoxItem Content="ناحیه 3"/>
                                <ComboBoxItem Content="ناحیه4"/>
                            </ComboBox>
                            
                            <TextBox
                                MaxWidth="400" Margin="8" Name="uThresholdValue_Text" Foreground="{Binding IsDarkTheme , Converter={StaticResource ForegroundConverterForIcons}}"
                                materialDesign:HintAssist.Hint="مقدار حساسیت"                            
                                Style="{StaticResource MaterialDesignFilledTextBox}" />
    

    After performing the following steps, we can use the text box and other controls in a readable manner so that all items change color after changing the theme color. The display of the controls after changing the color is as follows:

    Light Theme Display Dark Theme Display