WPF custom control and use (such as text boxes with watermarks and font icon)

See it

Created:

Create a user control (UserControl)
Modify user to use control codes left corner of the front desk UserControl instead TextBox, the background will be replaced with the code for the UserControl purpose is to let the TextBox control inherits TextBox control and note that the current figure
foreground Code renderings:

Background renderings code:

Create dependency properties:

Double-click input shortcut key Tab key generated code propdp

public int MyProperty
        {
            get { return (int)GetValue(MyPropertyProperty); }
            set { SetValue(MyPropertyProperty, value); }
        }
        public static readonly DependencyProperty MyPropertyProperty =
            DependencyProperty.Register("MyProperty", typeof(int), typeof(ownerclass), new PropertyMetadata(0));

Tip: int is the type of your control properties, MyProperty is control property name, MypropertyProperty is dependent on the attribute name, ownerclass a custom name, the new PropertyMetadata (0) 0 is the default value (required), the text of the same color in mind all correspondence must be the same
example, I want to add the fonts icon, the following code:

public string Ico
        {
            get { return (string)GetValue(IcoProperty); }
            set { SetValue(IcoProperty, value); }
        }
        public static readonly DependencyProperty IcoProperty =
            DependencyProperty.Register("Ico", typeof(string), typeof(LayuiTextBox), new PropertyMetadata("\xf007"));

Return code changes its reception control style (d: DesignHeight = "50" d: DesignWidth = "200" - >>> analog interface refers to the current design width and height), right-click interface to edit the copy editing template currently selected with the mouse at this time we VS tool will automatically display all the controls used to change the content in the current interface, as shown:

　　5. Modify ControlTemplate in style, we Border in the Grid, and add two directly in the Grid, a content stored font icon, the other holding the input box, such as the image above Name ico TextBlock control is kept font icon, Nane is prompt and PART_ContentHost are respectively watermark font typing

<Border x:Name="border" CornerRadius="{Binding ElementName=LayTextBox,Path=BorderRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Name="icoWidth" Width="50"/>
                                    <ColumnDefinition  />
                                </Grid.ColumnDefinitions>
                                <TextBlock Name="ico" Text="{Binding ElementName=LayTextBox,Path=Ico}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                                <TextBlock Name="prompt" Grid.Column="1" Opacity="0" Margin="0,0,5,0" Text="{Binding ElementName=LayTextBox,Path=Prompt}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                <ScrollViewer Grid.Column="1" x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Grid.ColumnSpan="2" Margin="0,0,5,0"/>
                            </Grid>
                        </Border>

　　Note: The contents of a red background in the binding text Text is registered with us in the background Ico property, Ico is used to pass this value, Binding ElementName = LayTextBox, Path = Ico Ico is talking about looking for property in the name of the current control LayTextBox, ElementName is the current control name, Path is an attribute name

　　6. Set the trigger

<ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=IcoStatus}" Value="false">
                                <Setter TargetName="icoWidth" Property="Width" Value="0" />
                                <Setter TargetName="PART_ContentHost" Property="Margin" Value="5,0,5,0" />
                                <Setter TargetName="prompt" Property="Margin" Value="5,0,5,0" />
                            </DataTrigger>
                            <Trigger Property="Text" Value="">
                                <Setter Property="Opacity" Value=".3" TargetName="prompt"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#D2D2D2"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#D2D2D2"/>
                            </Trigger>
 </ControlTemplate.Triggers>

　　Note: The event data starting DataTrigger trigger means when the user inputs a value corresponding to the time, such as Binding = "{Binding RelativeSource = {RelativeSource Self}, Path = IcoStatus}" Value = "false" when the user is talking the trigger input is null effect, trigger is the control file attribute property trigger certain conditions an event trigger corresponding

　　7. Return to the main interface to call the current custom control (LayuiTextBox), quoted in the current main interface xmlns: layui = "clr-namespace: LayUI_WPF.CustomControl ", this quote is telling the current form calls the current project folder LayUI_WPF in CustomControl the following custom control and named layui

　　8. we use self-defined controls <layui: LayuiTextBox Ico = " & # xf2b9; " X: the Name = "text" Prompt = "Enter your user name" BorderRadius = "10" FontFamily = "/ LayUI-WPF; component / fonts / # FontAwesome "/>, where it is Ico Ico we define property lines we can store font icon code to the effect that we want in there

　　9. watermark and so on, and even border with input box empty button can be achieved, the following is my written with watermarks and font icon input box code

　　Reception code:

<TextBox.Resources>
        <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
            <Setter Property="BorderBrush" Value="#ddd"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" CornerRadius="{Binding ElementName=LayTextBox,Path=BorderRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Name="icoWidth" Width="50"/>
                                    <ColumnDefinition  />
                                </Grid.ColumnDefinitions>
                                <TextBlock Name="ico" Text="{Binding ElementName=LayTextBox,Path=Ico}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                                <TextBlock Name="prompt" Grid.Column="1" Opacity="0" Margin="0,0,5,0" Text="{Binding ElementName=LayTextBox,Path=Prompt}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                <ScrollViewer Grid.Column="1" x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Grid.ColumnSpan="2" Margin="0,0,5,0"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=IcoStatus}" Value="false">
                                <Setter TargetName="icoWidth" Property="Width" Value="0" />
                                <Setter TargetName="PART_ContentHost" Property="Margin" Value="5,0,5,0" />
                                <Setter TargetName="prompt" Property="Margin" Value="5,0,5,0" />
                            </DataTrigger>
                            <Trigger Property="Text" Value="">
                                <Setter Property="Opacity" Value=".3" TargetName="prompt"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#D2D2D2"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="#D2D2D2"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
            </Style.Triggers>
        </Style>
    </TextBox.Resources>

　　Background code:

/// <summary>
    /// LayuiTextBox.xaml 的交互逻辑
    /// </summary>
    public partial class LayuiTextBox : TextBox
    {
        public LayuiTextBox()
        {
            InitializeComponent();
        }
        public string Ico
        {
            get { return (string)GetValue(IcoProperty); }
            set { SetValue(IcoProperty, value); }
        }
        public static readonly DependencyProperty IcoProperty =
            DependencyProperty.Register("Ico", typeof(string), typeof(LayuiTextBox), new PropertyMetadata("\xf007"));
        public bool IcoStatus
        {
            get { return (bool)GetValue(IcoStatusProperty); }
            set { SetValue(IcoStatusProperty, value); }
        }
        public static readonly DependencyProperty IcoStatusProperty =
            DependencyProperty.Register("IcoStatus", typeof(bool), typeof(LayuiTextBox), new PropertyMetadata(true));
        public string Prompt
        {
            get { return (string)GetValue(PromptProperty); }
            set { SetValue(PromptProperty, value); }
        }
        public static readonly DependencyProperty PromptProperty =
            DependencyProperty.Register("Prompt", typeof(string), typeof(LayuiTextBox), new PropertyMetadata("这是水印"));
        public int BorderRadius
        {
            get { return (int)GetValue(BorderRadiusProperty); }
            set { SetValue(BorderRadiusProperty, value); }
        }
        
        public static readonly DependencyProperty BorderRadiusProperty =
            DependencyProperty.Register("BorderRadius", typeof(int), typeof(LayuiTextBox), new PropertyMetadata(2));
        
    }

　　The final picture shows the style to see it in style

Special Note: Fonts icon Font Awesome

Author: shy frog

Time: 2020-3-28 18:39

WPF custom control and use (such as text boxes with watermarks and font icon)

Guess you like