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

我尝试使用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>

Answer 2

您可以轻松地在代码后端文件中实现相同的功能:)。选择要放置图像的正确位置。

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 3

在LastChildFill="False"中设置DockPanel。如果将LastChildFill属性设置为true（默认设置），DockPanel的最后一个子元素将始终填充剩余空间，而不管您在最后一个子元素上设置的任何其他停靠值。要将子元素停靠在另一个方向上，必须将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>

搜索栏就像在文本框中的Visual Studio图像中一样

3 个答案: