Share via

Using Layers

  • Article

You can use layers of UI to achieve different effects in your application. You can then determine which layer is on top according to focus by setting the MakeTopmostOnFocus property of the Input element to true for that view item.

The following example shows how to use the MakeTopmostOnFocus property. Input.KeyFocus is true when the UI has key focus, so the UI will receive direct keyboard or remote control input. When it receives key focus, the outline color changes as a visual cue.

An example of layers.

<UI Name="MakeTopmostOnFocusTest">
      
  <Content>
    <Panel Layout="Anchor">
      <Children>

        <me:KeyFocusIndicator>
          <LayoutInput>
            <AnchorLayoutInput Top="Parent,0.25" Left="Parent,0.45"/>
          </LayoutInput>
        </me:KeyFocusIndicator>

        <me:KeyFocusIndicator>
          <LayoutInput>
            <AnchorLayoutInput Top="Parent,0.24" Left="Parent,0.50"/>
          </LayoutInput>
        </me:KeyFocusIndicator>

        <me:KeyFocusIndicator>
          <LayoutInput>
            <AnchorLayoutInput Top="Parent,0.23" Left="Parent,0.55"/>
          </LayoutInput>
        </me:KeyFocusIndicator>

      </Children>
    </Panel>
  </Content>
      
</UI>


<UI Name="KeyFocusIndicator">

  <Locals>
    <ClickHandler Name="Clicker"/>
  </Locals>

  <Rules>
    <Default Target="[Input.MakeTopmostOnFocus]" Value="true"/>
    <Condition Source="[Input.KeyFocus]" SourceValue="true">
      <Actions>
        <Set Target="[Outline.Content]" Value="Firebrick"/>
      </Actions>
    </Condition>
  </Rules>

  <Content>
    <ColorFill Name="Outline" Content="Green" Padding="5,5,5,5">
      <Children>
        <ColorFill Content="LawnGreen" MinimumSize="100,100"
                       Alpha=".75" Padding="3,3,3,3">
        </ColorFill>
      </Children>
    </ColorFill>
  </Content>
      
</UI>

Sample Explorer

  • Fun > Helix

See Also