BezelInteractionPage

BezelInteractionPage is basically a Xamarin.Forms.ContentPage but with an additional property, RotaryFocusObject, that helps developers interact with the bezel rotation. Normally, a focused control in an application gets the bezel interaction. However, BezelInteractionPage gives the full control of which control gets the bezel interaction in the current page to developers.

How to set RotaryFocusObject?

Here is the list of controls that can be directly set to RotaryFocusObject and that react to bezel rotation.

• Xamarin.Forms controls ScrollView, ListView, DatePicker, TimePicker, Stepper, CollectionView
• Tizen CircularUI controls CircleScrollView, CircleListView, CircleDateTimeSelector, CircleStepper

Or, developers can customize how the object reacts when it gets bezel interaction by inheriting IRotaryEventReceiver. IRotaryEventReceiver is a receiver interface to take rotary events, and it includes Rotate(RotaryEventArgs method to implement.

Create BezelInteractionPage

You can easily create and use BezelInteractionPage in C# or XAML file.

Refer to TCBezelInteractionPage code at the Tizen.CircularUI\test\WearableUIGallery\WearableUIGallery\TC\TCBezelInteractionPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<w:BezelInteractionPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:w="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
             xmlns:local="clr-namespace:WearableUIGallery.TC"
             mc:Ignorable="d"
             x:Class="WearableUIGallery.TC.TCBezelInteractionPage"
             RotaryFocusObject="{x:Reference Spaceman}">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Image x:Name="Universe" Source="image/stars_background.png" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All"/>
            <local:RotaryFocusImage x:Name="Spaceman" Source="image/spaceman.png" AbsoluteLayout.LayoutBounds="0.5, 0.2" AbsoluteLayout.LayoutFlags="PositionProportional"
                                    AnchorX="0.5" AnchorY="1.5"/>
            <Image x:Name="SliderTarget" Source="image/tw_ic_popup_btn_check.png" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional"
                                    AutomationId="check"/>
            <w:CircleSurfaceView AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" InputTransparent="True">
                <w:CircleSurfaceView.CircleSurfaceItems>
                    <w:CircleSliderSurfaceItem x:Name="Slider"
                                   BackgroundColor="Blue"
                                   BackgroundLineWidth="12"
                                   BackgroundRadius="168"
                                   BarRadius="168"
                                   BarColor="Silver"
                                   BarLineWidth="10"
                                   Increment="1"
                                   Minimum="0"
                                   Maximum="11"
                                   Value="0"/>
                </w:CircleSurfaceView.CircleSurfaceItems>
            </w:CircleSurfaceView>
        </AbsoluteLayout>
    </ContentPage.Content>
</w:BezelInteractionPage>

C# file

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Tizen.Wearable.CircularUI.Forms;

namespace WearableUIGallery.TC
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TCBezelInteractionPage : BezelInteractionPage
    {
        TapGestureRecognizer _universeClicked;
        TapGestureRecognizer _spacemanClicked;
        TapGestureRecognizer _sliderClicked;

        public TCBezelInteractionPage()
        {
            InitializeComponent();
            var universe = new RotaryFocusProxy(Universe);

            _universeClicked = new TapGestureRecognizer();
            _universeClicked.Command = new Command(() => RotaryFocusObject = universe);

            _spacemanClicked = new TapGestureRecognizer();
            _spacemanClicked.Command = new Command(() => RotaryFocusObject = Spaceman);

            _sliderClicked = new TapGestureRecognizer
            {
                Command = new Command(() => RotaryFocusObject = Slider)
            };

            Universe.GestureRecognizers.Add(_universeClicked);
            Spaceman.GestureRecognizers.Add(_spacemanClicked);
            SliderTarget.GestureRecognizers.Add(_sliderClicked);

        }
    }
}