material Design TextBox 更改主题时提示可读性 WPF C#

问题描述 投票:0回答:1

我想使用材料设计和我添加到项目中的演示中的调色板部分向我的项目添加两种深色和浅色模式。这里的问题是,将模式改为深色后,某些项目(例如文本框中的提示)变为黑色,看不到。或者,例如,组合框的文本不可读。如下图所示:

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

我应该在我的项目中添加另一个项目吗?

我在程序演示中看到了字段部分,但我不明白这些颜色是如何变化的。如下:

enter image description hereMaterial TextBox in LightTheme in Demo App

如上图所示,提示文本框在深色模式下无法读取

我为这个项目编写的代码如下:

<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>

由于文本量,我没有放调色板部分的代码,但我没有对这部分的值或模型进行任何更改。
谢谢你的帮助

c# wpf textbox material-design color-palette
1个回答
0
投票

在这种情况下寻找答案但没有得到有关问题的结果后,我能够使用以下解决方案手动修复问题,并通过使用绑定和库本身得出结论。 前面的解决方案就是问题的正确答案。 我首先使用

ThemeSettingsViewModel.cs
中的全局模型创建了一个对象模型(设置视图模型主题与 Material Design 库相同,没有对其进行任何更改),如下所示:

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;
        }
}

然后我在所需的类中编写了以下代码,并实现了一个转换器以将主题连接到颜色:

//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;
        }

    }

现在我们可以在 Xaml 文件中进行以下绑定:

//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}" />

执行以下步骤后,我们可以以可读的方式使用文本框和其他控件,以便在更改主题颜色后所有项目都改变颜色。 改变颜色后控件的显示如下:

浅色主题显示深色主题显示

© www.soinside.com 2019 - 2024. All rights reserved.