创建类似于包含图标/图像的文本框

Question

我想做这样的事情：

所以它看起来像文本框，它可以写在中心，所以它实际上是文本框，但左侧有放大镜图标，右侧有键盘图标，但看起来像一个控制！

各位，谁能帮我制作这个？

如果我做接下来的事情是不是错了：

或者创建 3 列的 Grid 更正确？

第一列将包含放大镜图标

第二列将包含文本框

第三列将包含键盘图标

或者还有我不知道的第三种方法，并且这种方法比我建议的这两种解决方案更好。

非常感谢！ 这个社区是最好的！

Answer 1

或者创建 3 列的 Grid 更正确？

是的，如果中间的 TextBox 没有固定宽度会更好，因为 StackPanel 不会测量其子元素。

您可以将具有 3 列的 Grid 添加到 UserControl 并将元素的属性绑定到 UserControl 的依赖属性：

UserControl1.xaml：

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             x:Name="uc">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Width="20" Height="20" />
        <TextBox Text="{Binding Text, ElementName=uc}" />
        <Image Grid.Column="1" Source="{Binding ImageSource, ElementName=uc}" Width="20" Height="20" />
    </Grid>
</UserControl>

UserControl1.xaml.cs：

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty TextProperty =
         DependencyProperty.Register("Text", typeof(string), typeof(UserControl4));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(Uri), typeof(UserControl4));

    public Uri ImageSource
    {
        get { return (Uri)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }
}

用法：

<local:UserControl1 Text="..." ImageSource="Images/screen.png" />