Tile list - how do I make the border invisible?

FNC TMS FNC UI Pack
1

Hello!

The tile list is almost to a T what I need but that tile border is hideous and, although I have set the "Adapt to style" property and am using one of the standard styles, I can't get it to adapt to the style, or at least that's my perception.
What am I missing?

The style I am trying to use is Metropolis UI Blue Touch.

Thanks!

2

Hi,

The AdaptToStyle will only retrieve the colors that are used in that given style and apply those colors to the properties.

You have two options:

  1. Disable the border by setting the stroke Kind to gskNone (for each state). These are located at:
  • Appearance.Stroke
  • Appearance.StrokeDisabled
  • Appearance.StrokeDown
  • Appearance.StrokeHover
  • Appearance.StrokeSelected
  1. Implement the OnBeforeDrawItemBackground event:
procedure TForm1.TMSFNCTileList1BeforeDrawItemBackground(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
begin
  AGraphics.Stroke.Kind := gskNone;
end;
3

Hi!

That's almost perfect, now how do I tell the tile list to use a transparent background? Currently the tile list is inside the tab of an FNC page control and obviously I'd want the whole thing to either take the background of the style or be transparent. What is my best option?

Thanks!

4

It's not clear which framework you are using (FMX, VCL, WEB).

Normally you can set the TTMSFNCTileList.Fill.Kind property to gfkNone. This won't work for VCL because it doesn't really have transparency, but you can set it to the same color as the TTMSFNCPageControlContainer via the TTMSFNCTileList.Fill.Color property:

//e.g. TMSFNCPageControl1Page0 contains TTMSFNCTileList1:
TMSFNCTileList1.Fill.Color := TMSFNCPageControl1Page0.Fill.Color;
5

I'm on FMX to make a smartphone app.
The main screen, when loaded, will have several rows of "buttons" which really are tiles. The page control is the holder of the screens and, depending on the tile clicked, a new tab will be selected. Thus, I need the tiles to blend seamlessly in the background and appear as though there were nothing there aside from the clickable images.
Makes sense?
Cheers!

6

Now it's more clear, it sounded like you wanted to have the background transparent but not the tiles themselves. In this case in addition to the TTMSFNCTileList.Fill.Kind := gfkNone above you'll need to do one of the following, similarly to disabling the stroke:

  1. You can set Kind property of Appearance.Fill, Appearance.FillDisabled, Appearance.FillDown, Appearance.FillHover and Appearance.FillSelected to gfkNone.
  2. Skip the default tile background drawing by changing the OnBeforeDrawItemBackground to the following:
procedure TForm1.TMSFNCTileList1BeforeDrawItemBackground(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF; AItemIndex: Integer;
  var ADefaultDraw: Boolean);
begin
  ADefaultDraw := False;
end;
7

Heh!
Still no cigar, unfortunately!
The other thing I just noticed is that if I am not careful and change the active page index at design time, then trying to set the right one at runtime is completely ignored.
More specifically, I have a custom method "HideTabs" which is:

procedure TForm1.HideTabs;
begin
  for var Idx := 0 to TMSFNCPageControl1.Pages.Count -1 do
    TMSFNCPageControl1.Pages[Idx].TabVisible := False;
end;

Obviously at runtime I want to make sure the right tab is selected, so I have the following code:

procedure TForm1.FormActivate(Sender: TObject);
begin
  TMSFNCPageControl1.ActivePageIndex := TMSFNCPageControl1Page0.PageIndex;
end;

As you can see, this is very resistant to mistake because I can mess up the design time ordering, forget to set the right tab at design time, etc. and it should just always get the right tab on. Except that it doesn't because another tab (that which is defined at design time) is showing, not the right one that I have elected to be visible at activation.
Suggestions?

Cheers!