Search code examples
delphifiremonkeyopacity

How to prevent MultiView opacity from affecting children components texts in Delphi?


I'm using MultiView with some TButton buttons in Firemonkey. The multiView is opaque at 0.5 and this causes the buttons to also be opaque.

QUESTION: Is there a way to prevent MultiView opacity from affecting the button texts? That is, the text of the buttons would continue with bright colors, but the "body" of the buttons would be opaque. I've seen some applications with this visual feature, but I do not know what components were used for that purpose ...

enter image description here


Solution

  • Instead of the TMultiView, use a TRectangle as basis for the menu. Set its Align to left and the Fill.Color to $7FFFFFFF. The two first hex digits (7F) define the alpha channel (translucency), the rest of the hex digits (FFFFFF), define the RGB colors. This allows you to leave the Opacity at one, but still having the translucent effect. This is not possible with the TMultiView control.

    For each item, use a TLayout, with a TImage and a TText and any separator lines you like. Use normal Align properties to setup the items.

    Finally, set HitTest = True for the TLayout and HitTest = False for the TImage and TText controls. This is to enable mouse clicks or taps.

    Below is my test, both as .fmx content (image data removed) and a snapshot.

      object Rectangle1: TRectangle
        Align = Left
        Fill.Color = x7FFFFFFF
        Size.Width = 200.000000000000000000
        Size.Height = 210.000000000000000000
        Size.PlatformDefault = False
        object Layout1: TLayout
          Align = Top
          HitTest = True
          Size.Width = 200.000000000000000000
          Size.Height = 50.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 0
          object Image1: TImage
            MultiResBitmap.Height = 128
            MultiResBitmap.Width = 128
            MultiResBitmap = <
              item
                Width = 128
                Height = 128
                PNG = {}
                FileName = 'C:\tmp\Imgs\0.bmp'
              end>
            Align = Left
          end
          object Text4: TText
            Align = Left
            Position.X = 50.000000000000000000
            Size.Width = 151.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Text = 'Zero Hero'
            TextSettings.Font.Size = 21.000000000000000000
            TextSettings.Font.StyleExt = {00070000000000000004000000}
            TextSettings.FontColor = claDarkblue
          end
        end
        object Layout2: TLayout
          Align = Top
          HitTest = True
          Position.Y = 50.000000000000000000
          Size.Width = 200.000000000000000000
          Size.Height = 50.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 1
          object Image2: TImage
            MultiResBitmap.Height = 128
            MultiResBitmap.Width = 128
            MultiResBitmap = <
              item
                Width = 128
                Height = 128
                PNG = {}
                FileName = 'C:\tmp\Imgs\1.bmp'
              end>
            Align = Left
          end
          object Text5: TText
            Align = Left
            Position.X = 50.000000000000000000
            Size.Width = 151.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Text = 'One More'
            TextSettings.Font.Size = 21.000000000000000000
            TextSettings.Font.StyleExt = {00070000000000000004000000}
            TextSettings.FontColor = claDarkblue
          end
        end
        object Layout3: TLayout
          Align = Top
          HitTest = True
          Position.Y = 100.000000000000000000
          Size.Width = 200.000000000000000000
          Size.Height = 50.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 2
          OnClick = Layout3Click
          OnMouseDown = Layout3MouseDown
          object Image3: TImage
            MultiResBitmap.Height = 128
            MultiResBitmap.Width = 128
            MultiResBitmap = <
              item
                Width = 128
                Height = 128
                PNG = {}
                FileName = 'C:\tmp\Imgs\2.bmp'
              end>
            Align = Left
            HitTest = False
          end
          object Text6: TText
            Align = Left
            HitTest = False
            Position.X = 50.000000000000000000
            Size.Width = 150.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Text = 'Double Joy'
            TextSettings.Font.Size = 21.000000000000000000
            TextSettings.Font.StyleExt = {00070000000000000004000000}
            TextSettings.FontColor = claDarkblue
          end
        end
        object Layout4: TLayout
          Align = Top
          HitTest = True
          Position.Y = 150.000000000000000000
          Size.Width = 200.000000000000000000
          Size.Height = 50.000000000000000000
          Size.PlatformDefault = False
          TabOrder = 3
          object Image4: TImage
            MultiResBitmap.Height = 128
            MultiResBitmap.Width = 128
            MultiResBitmap = <
              item
                Width = 128
                Height = 128
                PNG = {}
                FileName = 'C:\tmp\Imgs\3.bmp'
              end>
            Align = Left
            HitTest = False
          end
          object Text1: TText
            Align = Left
            HitTest = False
            Position.X = 50.000000000000000000
            Size.Width = 151.000000000000000000
            Size.Height = 50.000000000000000000
            Size.PlatformDefault = False
            Text = 'Triple Fun'
            TextSettings.Font.Size = 21.000000000000000000
            TextSettings.Font.StyleExt = {00070000000000000004000000}
            TextSettings.FontColor = claDarkblue
          end
        end
      end
    

    enter image description here