In WPF C#, How can i make a Custom TextBox that has label that acts like 'Hint' in materialdesginfloatinghintTextBox?

Question

Hi Everybody, I wanted to Create a Custom Control in WPF C# that is Composed of a MaterialDesignFloatingHintTextBox which 'IsFloating' property is set to 'False' and a Label above the textbox that behaves like a Floating Hint, for the label i wanted it to float above always regarding whether the textbox is empty or not, Also wanted to allow my users to able to change the color of the label, it's size e.t.c and same for the textbox.

In Simple Words it looks like a MaterialDesignFloatingHintTextBox which the hint Property is fixed at the top regardless of whether the textbox is empty or not and at the same time has a hint that is not floating inside the textbox.

I know this needs some StackPanel + MaterialDesignFloatingHintTextBox + a Label at the top, but i am confused, Help!

Accepted Answer

Hi,@Mesh Ka. Welcome to Microsoft Q&A Forum.

Method 1:

To create a custom control in WPF composed of a MaterialDesignFloatingHintTextBox and a label behaving like a floating hint, you could create a new UserControl that encapsulates both elements.

To achieve customization, you can expose dependency properties for the various settings you want to allow users to change.

FloatingHintTextBoxControl.xaml:

FloatingHintTextBoxControl.xaml.cs :

public partial class FloatingHintTextBoxControl : UserControl
{
  public FloatingHintTextBoxControl()
  {
    InitializeComponent();

  }
  public static readonly DependencyProperty TextBoxHintProperty =
         DependencyProperty.Register("TextBoxHint", typeof(string), typeof(FloatingHintTextBoxControl), new PropertyMetadata("Hint"));

  public string TextBoxHint
  {
    get { return (string)GetValue(TextBoxHintProperty); }
    set { SetValue(TextBoxHintProperty, value); }
  }

  public static readonly DependencyProperty HintForegroundProperty =
      DependencyProperty.Register("HintForeground", typeof(Brush), typeof(FloatingHintTextBoxControl), new PropertyMetadata(Brushes.Red));

  public Brush HintForeground
  {
    get { return (Brush)GetValue(HintForegroundProperty); }
    set { SetValue(HintForegroundProperty, value); }
  }


}

Method 2:

To create a custom control in WPF composed of a MaterialDesignFloatingHintTextBox and a label acting as a floating hint, you could derive a new class from Control or ContentControl. You'll then define the visual structure in the control template and expose dependency properties for customization.

Generic.xaml:

CustomHintTextBox:


public class CustomHintTextBox : Control
{
  static CustomHintTextBox()
  {
    DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomHintTextBox), new FrameworkPropertyMetadata(typeof(CustomHintTextBox)));
  }
  public static readonly DependencyProperty HintTextProperty =
     DependencyProperty.Register("HintText", typeof(string), typeof(CustomHintTextBox), new PropertyMetadata("Hint"));

  public string HintText
  {
    get { return (string)GetValue(HintTextProperty); }
    set { SetValue(HintTextProperty, value); }
  }

  public static readonly DependencyProperty HintForegroundProperty =
      DependencyProperty.Register("HintForeground", typeof(Brush), typeof(CustomHintTextBox), new PropertyMetadata(Brushes.Red));

  public Brush HintForeground
  {
    get { return (Brush)GetValue(HintForegroundProperty); }
    set { SetValue(HintForegroundProperty, value); }
  }
}

Usage:

enter image description here

It is recommended to move the resources into App.xaml.

App.xaml:

MainWindow.xaml:

The result:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

In WPF C#, How can i make a Custom TextBox that has label that acts like 'Hint' in materialdesginfloatinghintTextBox?

0 additional answers