技术咨询：如何将TextBox自定义为图片所示样式？

Hey there! Let's get that TextBox looking exactly like the one in your image. Since you didn't specify which UI framework you're using, I'll cover the two most common desktop scenarios: WPF and WinForms. Let's break it down step by step!

WPF gives you full control over TextBox appearance via ControlTemplate—perfect for matching custom designs. Here's how to replicate your target style:

1. Define a Custom Style & Template #

Drop this code into your Window.Resources or a shared ResourceDictionary. Adjust the values (like colors, rounded corners, padding) to match your image:

<Style x:Key="TargetTextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="8,6"/> <!-- Controls internal spacing -->
    <Setter Property="Foreground" Value="#333333"/> <!-- Text color -->
    <Setter Property="Background" Value="#FFFFFF"/> <!-- Background fill -->
    <Setter Property="BorderBrush" Value="#CCCCCC"/> <!-- Default border color -->
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border 
                    CornerRadius="4" <!-- Match your image's rounded corner size -->
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer 
                        x:Name="PART_ContentHost"
                        Margin="{TemplateBinding Padding}"
                        Focusable="False"/>
                </Border>
                <!-- Add triggers for focus/disabled states -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="BorderBrush" Value="#0078D4"/> <!-- Focused border color -->
                        <Setter Property="BorderThickness" Value="2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="#F5F5F5"/>
                        <Setter Property="Foreground" Value="#999999"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. Apply the Style to Your TextBox #

Reference the style in your TextBox declaration:

<TextBox Style="{StaticResource TargetTextBoxStyle}" Width="250" Height="40" PlaceholderText="Enter your text here"/>

WinForms TextBoxes are less flexible out of the box, but you can create a custom control to match your design:

1. Create a Custom TextBox Class #

Make a new class that inherits from TextBox and overrides the OnPaint method to draw your custom borders and background:

using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

public class TargetTextBox : TextBox
{
    // Adjust these values to match your image
    private int _borderSize = 1;
    private Color _borderColor = Color.LightGray;
    private Color _focusedBorderColor = Color.RoyalBlue;
    private int _borderRadius = 4;

    public TargetTextBox()
    {
        BorderStyle = BorderStyle.None;
        Padding = new Padding(8, 6, 8, 6);
        Font = new Font("Segoe UI", 14);
        ForeColor = Color.FromArgb(51, 51, 51);
        BackColor = Color.White;
        // Enable custom painting
        SetStyle(ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        var g = e.Graphics;
        g.SmoothingMode = SmoothingMode.AntiAlias;

        // Draw rounded background and border
        using var borderPen = new Pen(Focused ? _focusedBorderColor : _borderColor, _borderSize);
        using var backgroundBrush = new SolidBrush(BackColor);
        
        var rect = new Rectangle(0, 0, Width - 1, Height - 1);
        var roundedPath = new GraphicsPath();
        roundedPath.AddArc(rect.X, rect.Y, _borderRadius, _borderRadius, 180, 90);
        roundedPath.AddArc(rect.X + rect.Width - _borderRadius, rect.Y, _borderRadius, _borderRadius, 270, 90);
        roundedPath.AddArc(rect.X + rect.Width - _borderRadius, rect.Y + rect.Height - _borderRadius, _borderRadius, _borderRadius, 0, 90);
        roundedPath.AddArc(rect.X, rect.Y + rect.Height - _borderRadius, _borderRadius, _borderRadius, 90, 90);
        roundedPath.CloseAllFigures();

        g.FillPath(backgroundBrush, roundedPath);
        g.DrawPath(borderPen, roundedPath);
    }

    // Redraw when focus changes
    protected override void OnGotFocus(EventArgs e)
    {
        base.OnGotFocus(e);
        Invalidate();
    }

    protected override void OnLostFocus(EventArgs e)
    {
        base.OnLostFocus(e);
        Invalidate();
    }
}

2. Use the Custom TextBox #

After compiling your project, the TargetTextBox will appear in your Visual Studio Toolbox—just drag it onto your form, or instantiate it in code:

var customTextBox = new TargetTextBox();
customTextBox.Location = new Point(50, 50);
customTextBox.Size = new Size(250, 40);
this.Controls.Add(customTextBox);

Pro Tip #

If your image has extra details like placeholder text, hover states, or drop shadows, tweak the code accordingly:

• For WPF, add a DropShadowEffect to the Border element.
• For WinForms, add hover state handling by overriding OnMouseEnter/OnMouseLeave and invalidating the control.
• Adjust _borderRadius, color values, and Padding until everything matches your target design perfectly.

内容的提问来源于stack exchange，提问作者Byte