Make buttons clickable only if the opacity is bigger than 0

How-to Discussions
1

I’d like to make my buttons clickable only if parent’s opacity is bigger than 0.

  <Panel ux:Name="CardActionButtons" Opacity="0">
    <Grid ColumnCount="2" Alignment="Top" Margin="0,50,0,0">
      <WhileTrue Value="{{CardActionButtons.Opacity} > 0}">
        <CardActionButton Image="Assets/Icons/contactless.png" Text="Manage Card">
          <Clicked>
            <Callback Handler="{test2}"/>
          </Clicked>
        </aira.CardActionButton>
        <aira.CardActionButton Image="Assets/Icons/contactless.png" Text="Pay in-Store">
          <Clicked>
            <Callback Handler="{toggleCardInAction}"/>
          </Clicked>
        </CardActionButton>
      </WhileTrue>
    </Grid>
  </Panel>

However, the buttons are not rendered at all even the opacity changes. What would be the correct way to do this?

2

There’s at least two things wrong with your approach:

  1. You should not rely on Opacity for determining if a thing can be clicked.
  2. You can’t access properties of UX elements in UX expressions like so: CardActionButtons.Opacity

Consider the following complete, minimal reproduction on what you could do, by making a ux:Class and toggling an explicit boolean property on it:

<App>
    <WhileTrue ux:Name="buttonsEnabled">
        <DebugAction Message="buttons are now enabled" />
        <Change buttons.ButtonsEnabled="true" />
    </WhileTrue>

    <StackPanel ux:Class="Buttons" Opacity="0.5"
        Alignment="VerticalCenter" Orientation="Horizontal" ContentAlignment="Center"
        ItemSpacing="8" Margin="8" Height="56" Padding="8">
        <bool ux:Property="ButtonsEnabled" />
        <WhileTrue Value="{ReadProperty ButtonsEnabled}">
            <Change this.Opacity="1" />
        </WhileTrue>
        <Text Value="One" TextColor="#fff" Alignment="Center">
            <WhileTrue Value="{ReadProperty ButtonsEnabled}">
                <Clicked>
                    <DebugAction Message="one was clicked" />
                </Clicked>
            </WhileTrue>
        </Text>
        <Text Value="Two" TextColor="#fff" Alignment="Center">
            <WhileTrue Value="{ReadProperty ButtonsEnabled}">
                <Clicked>
                    <DebugAction Message="two was clicked" />
                </Clicked>
            </WhileTrue>
        </Text>
        <Text Value="Three" TextColor="#fff" Alignment="Center">
            <WhileTrue Value="{ReadProperty ButtonsEnabled}">
                <Clicked>
                    <DebugAction Message="three was clicked" />
                </Clicked>
            </WhileTrue>
        </Text>
        <Rectangle Color="#18f" Layer="Background" />
    </StackPanel>

    <Buttons ux:Name="buttons" ButtonsEnabled="false">
        <Clicked>
            <Toggle Target="buttonsEnabled" />
        </Clicked>
    </Buttons>
</App>

Hope this helps!