How do you change the Delphi FMX TBindNavigator Images?

Question

Id like to change the default images that are associated with Delphi's FMX TBindNavigator. When I right click on the TBindNavigator control in the IDE I do not see the following options:

• Edit Custom Style...
• Edit Default Style...

How do you change the images associated with the TBindNavigator?

For example I'd like to make the FMX BindNavigator look like the VCL DBNavigator

From this:

To this:

Answer 1

In Delphi FMX the TBindNavigator component seems to be not customizable as it not exposes any styling properties, but some changes can be made to the source code of the component (Fmx.Bind.Navigator.pas) to override its default styling. Please note that these changes will be only visible at runtime and were tested on Delphi 11 on a blank project.

1. Buttons in TBindNavigator use by default the same style of TCornerButton, but you can change this so it uses the default style of TButton instead or some other custom one. Find the TBindNavButton.GetDefaultStyleLookupName function and change the value of Result:

   Result := 'ButtonStyle';
   

2. The colors in the buttons are all the same because the component uses the text color of TCornerButton (or TButton if modified as above). To specify a distinct color for each button find the TBindNavButton.ApplyStyle procedure and replace the contents inside the if FPath <> nil then check for something like this:

   case FIndex of
     nbFirst: FPath.Fill.Color := TAlphaColors.Blue;
     nbPrior: FPath.Fill.Color := TAlphaColors.Blue;
     nbNext: FPath.Fill.Color := TAlphaColors.Blue;
     nbLast: FPath.Fill.Color := TAlphaColors.Blue;
     nbInsert: FPath.Fill.Color := TAlphaColors.Firebrick;
     nbDelete: FPath.Fill.Color := TAlphaColors.Firebrick;
     nbEdit: FPath.Fill.Color := TAlphaColors.Blue;
     nbPost: FPath.Fill.Color := TAlphaColors.Forestgreen;
     nbCancel: FPath.Fill.Color := TAlphaColors.Firebrick;
     nbRefresh: FPath.Fill.Color := TAlphaColors.Blue;
     nbApplyUpdates: FPath.Fill.Color := TAlphaColors.Blue;
     nbCancelUpdates: FPath.Fill.Color := TAlphaColors.Blue;
   end;
   

3. Instead of using images FMX TBindNavigator uses vector paths to render its icons, these can be found in the same source file as strings in SVG format. To change an icon you must have its SVG data and replace its corresponding string in the BtnTypePath array. For example here is the Edit icon that looks like a paper sheet being replaced by a up arrow to look more like its VCL counterpart:

   BtnTypePath: array[TBindNavigateBtn] of string = (
     ...
     // edit
     'M 291.667,346.113 L 316.667,311.738 L 341.236,346.113 Z ',  // Arrow pointing up
     ...
   );
   

4. The size of the icons is also hardcoded in the file. To change this locate the TCustomBindNavigator.InitButtons procedure and edit these lines:

   Btn.FPath.Width := 12;   // Make them smaller
   Btn.FPath.Height := 12;  // Make them smaller
   

With all the previous changes we have now a bar that at runtime resembles more its VCL counterpart.