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:
<UserControl x:Class="MaterialdesignFloatingHintTextBoxDemo.FloatingHintTextBoxControl"
...
xmlns:local="clr-namespace:MaterialdesignFloatingHintTextBoxDemo"
xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<Style x:Key="NameTextBox" TargetType="TextBox" BasedOn="{StaticResource MaterialDesignFloatingHintTextBox}">
<Setter Property="materialdesign:HintAssist.IsFloating" Value="False"/>
<Setter Property="materialdesign:ColorZoneAssist.Mode" Value="Dark"/>
<Setter Property="materialdesign:HintAssist.HintOpacity" Value="0.40"/>
<Setter Property="materialdesign:HintAssist.FontFamily" Value="Century Gothic"/>
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="FontSize" Value="20"/>
</Style>
</UserControl.Resources>
<StackPanel>
<Label x:Name="floatingLabel"
Content="{Binding TextBoxHint, RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}"
Foreground="{Binding HintForeground, RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}"
VerticalAlignment="Center" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5">
</Label>
<TextBox x:Name="textBox" Style="{StaticResource NameTextBox}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</UserControl>
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:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:MaterialdesignFloatingHintTextBoxDemo">
<Style TargetType="{x:Type local:CustomHintTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomHintTextBox}">
<StackPanel>
<Label Content="{TemplateBinding HintText}"
Foreground="{TemplateBinding HintForeground}"
VerticalAlignment="Stretch" />
<TextBox x:Name="textBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
materialdesign:HintAssist.IsFloating="False"
materialdesign:ColorZoneAssist.Mode="Dark"
materialdesign:HintAssist.HintOpacity="0.7"
materialdesign:HintAssist.FontFamily="Century Gothic"
Foreground="{TemplateBinding Foreground}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
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:
It is recommended to move the resources into App.xaml.
App.xaml:
<Application x:Class="MaterialdesignFloatingHintTextBoxDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MaterialdesignFloatingHintTextBoxDemo"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Green.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
MainWindow.xaml:
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF06013F" Offset="1"/>
<GradientStop Color="#FF040F2E"/>
</LinearGradientBrush>
</Grid.Background>
<StackPanel Margin="30" Orientation="Horizontal" Height="80">
<local:CustomHintTextBox HintText="Your Hint" Foreground="Red" HintForeground="Gray" />
<local:FloatingHintTextBoxControl TextBoxHint="Enter your text" HintForeground="Pink"/>
</StackPanel>
</Grid>
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.