文本框内的 Visual Studio 图片中的搜索栏

Question

我想像 Visual Studio 那样创建一个搜索栏：

我认为这是一个文本框和图像元素。我的尝试：

<Grid DataContext="{Binding ElementName=Searchpanel}">
    <DockPanel>
        <TextBox Text="{Binding Path=SearchText}"
            Width="150"
            Name="tbSearch"
            DockPanel.Dock="Left" />
        <buttons:ImageButton
            ButtonImage="{Binding Path=BtnImage, FallbackValue={StaticResource DefaultSearchImage}, TargetNullValue={StaticResource DefaultSearchImage}}"
            ButtonCommand="{Binding Path=BtnCommand}"
            Height="{Binding ElementName=tbSearch, Path=ActualHeight}"
            DockPanel.Dock="Left" />
    <DockPanel>
</Grid>

但是我的图片不在文本框附近。此外，图像似乎在 Visual Studio.

中的文本框内

感谢帮助！

Answer 1

您可以轻松地在代码后端文件中实现相同的目的:)。 Select 放置图片的适当位置。

Label imgLabel = new Label();
imgLabel.Image = Image.FromFile(somefile);
imgLabel.AutoSize = false;
imgLabel.Size = imgLabel.Image.Size;
imgLabel.ImageAlign = ContentAlignment.MiddleCenter;
imgLabel.Text = "";
imgLabel.BackColor = Color.Transparent;
imgLabel.Parent = textBox1;
// pick a location where it won't get in the way too much
imgLabel.Location = new Point(X,Y); //X,Y where you want to keep this image. in your case its at right end.

Answer 2

在DockPanel中设置LastChildFill="False"。如果将 LastChildFill 属性设置为 true（默认设置），则 DockPanel 的最后一个子元素始终填充剩余的 space，而不管任何其他停靠值您在最后一个子元素上设置的。要在另一个方向停靠子元素，您必须将 LastChildFill 属性设置为 false，并且还必须在最后一个子元素上指定明确的停靠方向。

     <Grid DataContext="{Binding ElementName=Searchpanel}">
     <DockPanel LastChildFill="False">
        <TextBox Text="{Binding Path=SearchText}"
                 Width="150"
                 Name="tbSearch"
                 DockPanel.Dock="Left" />
        <buttons:ImageButton
            ButtonImage="{Binding Path=BtnImage, FallbackValue={StaticResource DefaultSearchImage}, TargetNullValue={StaticResource DefaultSearchImage}}"
            ButtonCommand="{Binding Path=BtnCommand}"
            Height="{Binding ElementName=tbSearch, Path=ActualHeight}" Margin="-40,0,0,0"/>    
     <DockPanel>
    </Grid>

如果您不想使用 DockPanel，您可以通过 Grid 轻松完成此操作。

<Grid DataContext="{Binding ElementName=Searchpanel}">    
        <TextBox Text="{Binding Path=SearchText}"
                 Width="150"
                 Name="tbSearch"/>
        <buttons:ImageButton
            ButtonImage="{Binding Path=BtnImage, FallbackValue={StaticResource DefaultSearchImage}, TargetNullValue={StaticResource DefaultSearchImage}}"
            ButtonCommand="{Binding Path=BtnCommand}"
            Height="{Binding ElementName=tbSearch, Path=ActualHeight}" Margin="100,0,0,0"/>    
    </Grid>

Answer 3

我尝试使用 xaml 以简单的方式解决这个问题，看看是否对您有帮助

 <Border BorderThickness="1" BorderBrush="Black" Width="160" Height="21">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="tbSearch" Width="140" BorderThickness="0"></TextBox>
            <Button Grid.Column="1" BorderThickness="0" Background="Transparent" Command="{Binding SearchCommand}" Height="{Binding ElementName=tbSearch, Path=ActualHeight}">
                <Image Height="10" Width="10" Source="search-icon.png"></Image>
            </Button>
        </Grid>
    </Border>

文本框内的 Visual Studio 图片中的搜索栏

Searchbar like in Visual Studio image inside textbox

c#

wpf

user-controls