[Tizen] Optimize Shell Flyout for TV

[shyunMin]

Description of Change

This PR is to optimize Shell navigation UI for Tizen TV.

Issues Resolved

None

API Changes

None

Platforms Affected

• Tizen

Behavioral/Visual Changes

On TV, users navigate pages using remote controller that limits movement to up, down, left, right. Flyout and Tabs are updated to be easily controlled by remote controller as below.

• Flyout
Flyout is displayed on the far left of the screen. It will be minimized while the user is browsing the ShellContent area. The user can open Flyout by moving the focus to the left pressing left button or changing the IsPresented property to true.
• Bottom tabs
  Button tabs are not displayed on TV. Tab items will not be displayed on Flyout if FlyoutDisplayOptions value is AsSingleItem. (if the user want to represent tab items, it should be set AsMultipleItems)
• Top tabs
  If FlyoutItem or Tab item contains on or more ShellContent, another navigation drawer is represented on the left side of Shellcontent area. Unlike Flyout it is not minimized while the user is browding the content.

Before/After Screenshots

• Flyout behavior (Flyout/Locked/Disabled)
  

• Flyout header options(Scroll/Fixed)
  

• Flyout Item templates
  

Testing Procedure

PR Checklist

• Targets the correct branch
• Tests are passing (or failures are unrelated)

[rmarinho]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[rookiejava]

Testing with Samsung smart TV done.
Thanks.