How do I remove clear button in searchbox of listview?

Question

I want to put a TEditButton dynamically in searchbox of ListView so I did this:

ListView                         := TListView.Create(Self);    
ListView.Parent                  := Self;   
ListView.Name                    := 'hello'; 
ListView.Height                  := 369;  
ListView.Width                   := 369; 
ListView.Align                   := TAlignLayout.Bottom; 
ListView.SearchVisible           := True; 
ListView.BeginUpdate;    

for i := 0 to ListView.controls.Count - 1 do
begin   
  if ListView.controls[i].ClassType = TSearchBox then 
  begin    
    SearchBox := TSearchBox(ListView.controls[i]);
  end; 
end;  

OKbtn := TEditButton.Create(SearchBox);  
OKbtn.Parent := SearchBox;    
OKbtn.Text   := 'OK';  
OKbtn.Width  := 30;   

SearchBox.AddObject(OKbtn);
ListView.EndUpdate;    

but the problem is the clear button is coming too while editing the searchbox. How can I remove that clear button(X) at the right side of searchbox?

Answer 1

The SearchBox is a descendant of TEdit and uses FireMonkey control styles.

Place a TEdit on your form and open its StyleLookup Property:

You can see that there are different stlyes already available. So we want to change the StyleLookup for our SearchBox.

As the SearchBox is a private member (FSearchEdit) of the ListView control you have no direct way of accessing it.

You can either create your own ListView control that is a descendant of TListView (TListViewBase) or use a class helper. I opt for the latter.

TListViewHelper = class helper for TListViewBase
private
  function GetClearButton: Boolean;
  procedure SetClearButton(const Value: Boolean);
public
  property ShowSearchEditClearButton: Boolean read GetClearButton write SetClearButton;
end;

 

{ TListViewHelper }

function TListViewHelper.GetClearButton: Boolean;
begin
  Result := Self.FSearchEdit.StyleLookup = ''; // default style
end;

procedure TListViewHelper.SetClearButton(const Value: Boolean);
begin
  if Value then
    Self.FSearchEdit.StyleLookup := '' // default style
  else
    Self.FSearchEdit.StyleLookup := 'editstyle';
end;

In FormCreate we can call ListView1.ShowSearchEditClearButton := False; and the clear button is gone.

However the magnifier glass icon also disappeared because it is not part of the editstyle Style that we set as StyleLookup.

To get the icon back we would have to create our own Style that has a magnifier glass icon but no clear button.

Drop a TEdit on the Form, right click on it and then choose edit customized style:

We now are in the StyleBook Editor and have access to the control layout.

Add a TActiveStyleObject to the structur, rename it to magnifierglass

Change the TActiveStyleObject's ActiveLink bitmaps.

In the BitmapLinks-Editor locate the magnifier glass icon and select it (for ActiveLink and SourceLink).

Your text will now overlap with the icon.

To fix it you have to change the content's left margin (which is currently set to 2px) to something higher like 20.

You can now delete the edit on your form as the style is created and in your forms' StyleBook.

Open the StyleBook and rename the StyleName of your new style to searcheditstylenoclearbtn.

Save it and in your classhelper functions change

Self.FSearchEdit.StyleLookup := 'editstyle';

to

Self.FSearchEdit.StyleLookup := 'searcheditstylenoclearbtn';

Now the clear button is gone.

If you don't want to go through the hassle of creating your own searcheditstylenoclearbtn you can save the following code as searcheditstylenoclearbtn.style and load it in the StyleBook editor.

object TStyleContainer
  object TLayout
    StyleName = 'searcheditstylenoclearbtn'
    Position.X = 530.000000000000000000
    Position.Y = 399.000000000000000000
    Size.Width = 100.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 0
    object TActiveStyleObject
      StyleName = 'background'
      Align = Contents
      SourceLookup = 'Windows 10 Desktopstyle.png'
      Size.Width = 100.000000000000000000
      Size.Height = 22.000000000000000000
      Size.PlatformDefault = False
      ActiveTrigger = Focused
      ActiveLink = <
        item
          CapInsets.Left = 7.000000000000000000
          CapInsets.Top = 7.000000000000000000
          CapInsets.Right = 7.000000000000000000
          CapInsets.Bottom = 7.000000000000000000
          SourceRect.Left = 266.000000000000000000
          SourceRect.Top = 81.000000000000000000
          SourceRect.Right = 305.000000000000000000
          SourceRect.Bottom = 110.000000000000000000
        end>
      SourceLink = <
        item
          CapInsets.Left = 7.000000000000000000
          CapInsets.Top = 7.000000000000000000
          CapInsets.Right = 7.000000000000000000
          CapInsets.Bottom = 7.000000000000000000
          SourceRect.Left = 225.000000000000000000
          SourceRect.Top = 81.000000000000000000
          SourceRect.Right = 264.000000000000000000
          SourceRect.Bottom = 110.000000000000000000
        end>
      TouchAnimation.Link = <>
    end
    object TLayout
      StyleName = 'content'
      Align = Client
      Locked = True
      Margins.Left = 20.000000000000000000
      Margins.Top = 2.000000000000000000
      Margins.Right = 2.000000000000000000
      Margins.Bottom = 2.000000000000000000
      Size.Width = 6.000000000000000000
      Size.Height = 18.000000000000000000
      Size.PlatformDefault = False
    end
    object TLayout
      StyleName = 'buttons'
      Align = Right
      Locked = True
      Margins.Top = 2.000000000000000000
      Margins.Right = 2.000000000000000000
      Margins.Bottom = 2.000000000000000000
      Position.X = 48.000000000000000000
      Position.Y = 2.000000000000000000
      Size.Width = 50.000000000000000000
      Size.Height = 18.000000000000000000
      Size.PlatformDefault = False
    end
    object TBrushObject
      StyleName = 'foreground'
      Brush.Color = claBlack
    end
    object TBrushObject
      StyleName = 'selection'
      Brush.Color = x7F2A96FF
    end
    object TFontObject
      StyleName = 'font'
    end
    object TLabel
      StyleName = 'prompt'
      Locked = True
      Opacity = 0.500000000000000000
      Visible = False
    end
    object TActiveStyleObject
      StyleName = 'magnifierglass'
      Align = Left
      CapMode = Tile
      Margins.Top = 1.000000000000000000
      SourceLookup = 'Windows 10 Desktopstyle.png'
      Position.Y = 1.000000000000000000
      Size.Width = 20.000000000000000000
      Size.Height = 21.000000000000000000
      Size.PlatformDefault = False
      WrapMode = Center
      ActiveTrigger = Pressed
      ActiveLink = <
        item
          SourceRect.Left = 4.000000000000000000
          SourceRect.Top = 358.000000000000000000
          SourceRect.Right = 20.000000000000000000
          SourceRect.Bottom = 374.000000000000000000
        end>
      SourceLink = <
        item
          SourceRect.Left = 4.000000000000000000
          SourceRect.Top = 358.000000000000000000
          SourceRect.Right = 20.000000000000000000
          SourceRect.Bottom = 374.000000000000000000
        end>
      TouchAnimation.Link = <>
    end
  end
end

Answer 2

If you dont want see Clearbutton in all Searchbox in your application, you can modify FMX.Searchbox.Style.pas:

1. Find FMX.Searchbox.Style.pas in fmx folder (by default, C:\Program Files (x86)\Embarcadero\Studio\{your_version, e.g.17.0}\source\fmx\FMX.SearchBox.Style.pas and copy file to your project folder (near your_application.dpr file)
2. In new file find and comment next lines:

For Delphi Seattle:

procedure TStyledSearchBox.RealignButtons;
begin
  if (LeftLayout <> nil) and (FMagGlass <> nil) then
    LeftLayout.Width := FMagGlass.Width;
  if (ButtonsLayout <> nil) and (FClearButton <> nil) then
    //if Model.Text.IsEmpty then
      ButtonsLayout.Width := 0
    //else
    //  ButtonsLayout.Width := FClearButton.Width;
end;

For XE7:

procedure TStyledSearchBox.DoChangeTracking;
begin
  inherited;
  if (ButtonsLayout <> nil) and (FClearButton <> nil) then
    //if Model.Text.IsEmpty then
      ButtonsLayout.Width := 0
    //else
    //  ButtonsLayout.Width := FClearButton.Width;
end;

As you can see, the code is not much different depending on the Delphi version, for other versions you can find it yourself.

3. Compile and launch application.

These code changes are valid to all platforms.