CODEWITHSUNDEEP
c#wpfuser-controls
GrayFox
GrayFox

Reputation: 1089

Searchbar like in Visual Studio image inside textbox

I would like to create a searchbar like in Visual Studio:

enter image description here

I think it's a textbox and image element. My try:

<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>

But my image isn't near the textbox. Furthermore, it seems that the image is inside the textbox in Visual Studio.

Thanks for help!

Upvotes: 0

Views: 119

Answers (3)

Nitin Purohit
Nitin Purohit

Reputation: 18578

I tried to solve this in easy way using xaml, see if this helps you

 <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>

Upvotes: 1

J. Hasan
J. Hasan

Reputation: 512

Set LastChildFill="False" in DockPanel. If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element. To dock a child element in another direction, you must set the LastChildFill property to false and must also specify an explicit dock direction on the last child element.

     <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>

If you don't want to use DockPanel you can done this by Grid easily.

<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>

Upvotes: 0

null1941
null1941

Reputation: 972

You can achieve the same thing in code backend file easily :). Select proper point where you want to put the image.

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.

Upvotes: 0

Related Questions