Opacity on iOS

Bug Reports
1

Hi guys, i’m having a problem with opacity on iOS, it works ok on simulator but not on my device.

<App Theme="NativeWithFallback">

    <DockPanel>
        <Grid Dock="Bottom" ux:Name="TabBar" ColumnData="1,1,1*" Height="49">

            <Panel ux:Name="tabEvents" HitTestMode="LocalBoundsAndChildren">
                <Rectangle Color="#555" Height="1" Alignment="Top"/>
                <SolidColor ux:Name="colorTabEvent" Color="#0f5b72" Opacity="1"/>
                <Text Alignment="BottomCenter" Margin="0,0,0,2">
                    Partidos
                </Text>
            </Panel>

            <Panel ux:Name="tabContacts" HitTestMode="LocalBoundsAndChildren">
                <Rectangle Color="#555" Height="1" Alignment="Top"/>
                <SolidColor ux:Name="colorTabContact" Color="#0f5b72" Opacity="0"/>
                <Text Alignment="BottomCenter" Margin="0,0,0,2">
                    Contactos
                </Text>
            </Panel>

            <Panel ux:Name="tabProfile" HitTestMode="LocalBoundsAndChildren">
                <Rectangle Color="#555" Height="1" Alignment="Top"/>
                <SolidColor ux:Name="colorTabProfile" Color="#0f5b72" Opacity="0"/>
                <Text Alignment="BottomCenter" Margin="0,0,0,2">
                    Perfil
                </Text>
            </Panel>
        </Grid>
    </DockPanel>

</App>

Simulator:

file
Dx4hapnkZXXU-legacy-files-06H6ztM6nX9PeOFv-8sICbbWt3sl4eGUj8qX7kFke.png772×162

iOS: (iphone6s, 9.3.2)

file

2

Hi! It seems we have an issue with handling opacity for brushes (such as SolidColor) in native views. There’s some possible workarounds though:

  1. Just set the color directly on the Panel. In this case you have to include the opacity in the color setting itself rather than using the Panel’s Opacity property (since the latter one affects everything inside the panel). Example: <Panel ux:Name="tabContacts" Color="#0f5b7200" HitTestMode="LocalBoundsAndChildren">

  2. Replace the SolidColor with a Panel with a color. In this case you can keep using the Opacity property as you did before. However, you have to place the text in front of this panel. Example:

<Panel ux:Name="tabEvents" HitTestMode="LocalBoundsAndChildren">
    <Rectangle Color="#555" Height="1" Alignment="Top"/>
    <Text Alignment="BottomCenter" Margin="0,0,0,2"> Partidos </Text>
    <Panel ux:Name="colorTabEvent" Color="#0f5b72" Opacity="1"/>
</Panel>
  1. The reason you got different behavior between local preview and device is because the local preview falls back to the graphics theme. In other words, you can just use the graphics theme (Theme="Basic") to avoid this issue. (If you don’t have any specific reason to use the native theme for these things anyway).