diff --git a/doc/docfx_files/index.md b/doc/docfx_files/index.md index 8a4e12ae..29c5f21d 100755 --- a/doc/docfx_files/index.md +++ b/doc/docfx_files/index.md @@ -1,29 +1,32 @@ # Tizen CircularUI The Tizen CircularUI is a set of helpful extensions to the Xamarin Forms framework on the Samsung Gear device. -The banaries are available via NuGet (package name CircularUI) with the source available at here. +The binaries are available via NuGet (package name CircularUI) with the source available here. ## Controls | Name | Description | | -----------------------------------------------------------------------| -------------| -| [](xref:Tizen.Wearable.CircularUI.Forms.CirclePage) | A subclass of Xamarin.Forms.Page that can shows Circular ProgressBar and Circular Slider and the button on bottom of screen. it can also show MenuItems on the circular menu.(MoreOption) | +| [](xref:Tizen.Wearable.CircularUI.Forms.Check) | A subclass of Xamarin.Forms.Switch control with some different styles. | +| [](xref:Tizen.Wearable.CircularUI.Forms.CircleDateTimeSelector) | A control to select date or time fits in the circular screen. | | [](xref:Tizen.Wearable.CircularUI.Forms.CircleListView) | A subclass of Xamarin.Forms.ListView control fits in the circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.CirclePage) | A subclass of Xamarin.Forms.Page that can show Circular ProgressBar and Circular Slider and the button on the bottom of the screen. it can also show MenuItems on the circular menu.(MoreOption) | + | [](xref:Tizen.Wearable.CircularUI.Forms.CircleProgressBarSurfaceItem) | A control fits in the circular screen. it can be shown in CirclePage only. | | [](xref:Tizen.Wearable.CircularUI.Forms.CircleSliderSurfaceItem) | A Slider control that responds to the bezel action and fits in the circular screen. | | [](xref:Tizen.Wearable.CircularUI.Forms.CircleScrollView) | A subclass of Xamarin.Forms.ScrollView that can be scrolled by the bezel action. | -| [](xref:Tizen.Wearable.CircularUI.Forms.CircleDateTimeSelector) | A control to select date or time fits in the circular screen. | -| [](xref:Tizen.Wearable.CircularUI.Forms.CircleStepper) | A control to select a number of steps fits in the circular screen. | | [](xref:Tizen.Wearable.CircularUI.Forms.CircleStackLayout) | A container to layout children linear in the circular area. | -| [](xref:Tizen.Wearable.CircularUI.Forms.IndexPage) | A subclass of multiple page that can slide child page horizontal and has dots on top of the screen for the number of child pages. | -| [](xref:Tizen.Wearable.CircularUI.Forms.Check) | A subclass of Xamarin.Forms.Switch control with some different styles. | +| [](xref:Tizen.Wearable.CircularUI.Forms.CircleStepper) | A control to select a number of steps fits in the circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.CircleSurfaceEffectBehavior) | The CircleSurfaceEffectBehavior is an effect which allows you to insert views that require CircleSurface. | +| [](xref:Tizen.Wearable.CircularUI.Forms.ConfirmationPopup) | A popup has two button in left and right side of the circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.ConfirmPopupEffect) | The effect to show a small popup has one or two buttons sticky with any control. | +| [](xref:Tizen.Wearable.CircularUI.Forms.ContextPopup) | A context popup fits in the circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.IndexPage) | A subclass of multiple Pages that can slide child page horizontal and has dots on top of the screen for the number of child pages. | +| [](xref:Tizen.Wearable.CircularUI.Forms.InformationPopup) | A popup has a control to show progress and one button in the bottom side of the circular screen. | | [](xref:Tizen.Wearable.CircularUI.Forms.IRotaryEventReceiver ) | A event receiver for using the bezel action. | | [](xref:Tizen.Wearable.CircularUI.Forms.Radio) | A radio control fits in the circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.PopupEntry) | The PopupEntry is a class that extends Xamarin.Forms.Entry. It makes a new layer when editing text on the entry. | | [](xref:Tizen.Wearable.CircularUI.Forms.Toast) | A popup for simple feedback. | -| [](xref:Tizen.Wearable.CircularUI.Forms.TwoButtonPage) | A subclass of Xamarin.Forms.Page has two button in left and right side of the circular screen. | -| [](xref:Tizen.Wearable.CircularUI.Forms.ContextPopup) | A context popup fits in the circular screen. | -| [](xref:Tizen.Wearable.CircularUI.Forms.ConfirmationPopup) | A popup has two button in left and right side of the circular screen. | -| [](xref:Tizen.Wearable.CircularUI.Forms.ConfirmPopupEffect) | the effect to show a small popup has one or two button sticky with any control. | -| [](xref:Tizen.Wearable.CircularUI.Forms.InformationPopup) | A popup has a control to show progress and one button in bottom side of circular screen. | +| [](xref:Tizen.Wearable.CircularUI.Forms.TwoButtonPage) | A subclass of Xamarin.Forms.Page has two buttons on the left and right side of the circular screen. | ![widgets](widgets.png) diff --git a/doc/guide/Check.md b/doc/guide/Check.md index baeacda7..c2df3df0 100755 --- a/doc/guide/Check.md +++ b/doc/guide/Check.md @@ -11,10 +11,9 @@ summary: Check control guide ## Create Check You can easily add `Check` control with C# or XAML file. Tizen wearable device support 3 styles of `DisplayStyle` (`Default`, `Onoff`, `Small`). -Each shape of DisplayStyle depends on the device model. you can set the default value of check with `IsToggled` property. `True` value set Check selected. `False` value set Check unselected. If user toggle check. `Toggled` event will have occurred. You must add code for handling `Toggled` event. +Each shape of DisplayStyle depends on the device model. you can set the default value of check with `IsToggled` property. `True` value set `Check` selected. `False` value set `Check` unselected. `Toggled` event is raised when `Check` is toggled. You must add code for handling `Toggled` event. - -For more information . Please refer to below links +For more information. Please refer to below links - [Check API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.Check.html) - [Xamarin.Forms.Switch API reference](https://developer.xamarin.com/api/type/Xamarin.Forms.Switch/) diff --git a/doc/guide/CircleDateTimeSelector.md b/doc/guide/CircleDateTimeSelector.md index 20b30f0d..e3934f56 100755 --- a/doc/guide/CircleDateTimeSelector.md +++ b/doc/guide/CircleDateTimeSelector.md @@ -5,7 +5,7 @@ summary: CircleDateTimeSelector control guide # CircleDateTimeSelector -`CircleDateTimeSelector` is a view for Date picker and Time picker. +`CircleDateTimeSelector` is a view for Date Picker and Time Picker. You can scroll it by [Bezel interaction](https://developer.tizen.org/design/wearable/interaction/bezel-interactions). This view is the size that covers the entire screen. In order to receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary), it must be registered as `RotaryFocusObject` property of [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage). @@ -17,14 +17,14 @@ For the Time type, you can change the hour: minute: AM / PM value. |:--------------------------------------------------:|:--------------------------------------------------:| | Date | Time | -**WARNNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `page` contains these control. It may cause exception or control can not be displayed.** +**WARNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `pages` contain these control. It may cause exception or control cannot be displayed.** ## Adding CircleDateTimeSelector at CirclePage You can set `CircleDateTimeSelector` at [CirclePage.Content](xref:Tizen.Wearable.CircularUI.doc.CirclePage). If you'd like to know how to add [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage), please refer to [CirclePage guide](https://samsung.github.io/Tizen.CircularUI/guide/CirclePage.html#create-circlepage). -The following code show [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleDateTimeSelector`. -`RotaryFocusTargetName` attribute sets the current focused control that is handled by rotating and display the focused control's circle object. -If you don't set this property, control can't receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). +The following code shows [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleDateTimeSelector`. +`RotaryFocusTargetName` attribute sets the currently focused control that is handled by rotating and display the focused control's circle object. +If you don't set this property, control can't receive the [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). `CircleDateTimeSelector` has the following properties: @@ -38,7 +38,7 @@ The current time will be displayed on the screen when it is executed. Since the For more information. Please refer to [CircleDateTimeSelector API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CircleDateTimeSelector.html) -_This guide's code example use XUIComponent's CircleTime of CircleDateTime code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleDateTime/DateTimeViewModel.cs and CircleTime.xaml_ +_This guide's code example uses XUIComponent's CircleTime of CircleDateTime code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleDateTime/DateTimeViewModel.cs and CircleTime.xaml_ **C# file** diff --git a/doc/guide/CircleListView.md b/doc/guide/CircleListView.md index 867c8c33..a648d66c 100755 --- a/doc/guide/CircleListView.md +++ b/doc/guide/CircleListView.md @@ -5,7 +5,7 @@ summary: CircleListView control guide # CircleListView `CircleListView` is a view for presenting lists of data, especially long lists that require scrolling. -It is extension of [Xamarin.Forms.ListView](https://developer.xamarin.com/api/type/Xamarin.Forms.ListView/). +It is an extension of [Xamarin.Forms.ListView](https://developer.xamarin.com/api/type/Xamarin.Forms.ListView/). Same as [Xamarin.Forms.ListView](https://developer.xamarin.com/api/type/Xamarin.Forms.ListView/), but Scroller is rendered to [CircleSurface](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-surface). You can move the list by [Bezel interaction](https://developer.tizen.org/design/wearable/interaction/bezel-interactions) and [Drag](https://developer.tizen.org/design/wearable/interaction/touch#swipe). In order to receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary), it must be registered as `RotaryFocusObject` property of [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage). @@ -19,14 +19,14 @@ In order to receive [Rotary event](https://developer.tizen.org/development/train - [Cells](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#custom-cells) : Data in a `CircleListView` is presented in cells. Each cell corresponds to a row of data. - [Footer](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#Headers_and_Footers) : Text or view to display at end of a list -**WARNNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `page` contains these control. It may cause exception or control can not be displayed.** +**WARNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `pages` contain these control. It may cause exception or control cannot be displayed.** ## Adding CircleListView at CirclePage You can set `CircleListView` at [CirclePage.Content](xref:Tizen.Wearable.CircularUI.doc.CirclePage). If you'd like to know how to add [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage), please refer to [CirclePage guide](https://samsung.github.io/Tizen.CircularUI/guide/CirclePage.html#create-circlepage). -The following XAML code show CirclePage with `CircleListView`. -`RotaryFocusTargetName` attribute sets the current focused control that is handled by rotating and display the focused control's circle object. -If you don't set this value properly, control can't receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). +The following XAML code shows CirclePage with `CircleListView`. +`RotaryFocusTargetName` attribute sets the currently focused control that is handled by rotating and display the focused control's circle object. +If you don't set this value properly, control can't receive the [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). You can set the `Header` and/or `Footer` to a simple text, or you can set them to a more complex layout. There are also `HeaderTemplate` and `FooterTemplate` properties that let you create more complex layouts for the header and footer that support data binding. @@ -118,7 +118,7 @@ To enable grouping: - Set [IsGroupingEnabled](https://developer.xamarin.com/api/property/Xamarin.Forms.ListView.IsGroupingEnabled/) to true. - Set [GroupDisplayBinding](https://developer.xamarin.com/api/property/Xamarin.Forms.ListView.GroupDisplayBinding/) to bind to the property of the groups that is being used as the title of the group. -_This guide's code example use WearableUIGallery's TCGroupList code at the test\WearableUIGallery\WearableUIGallery\TC\TCGroupList.xaml_ +_This guide's code example uses WearableUIGallery's TCGroupList code at the test\WearableUIGallery\WearableUIGallery\TC\TCGroupList.xaml_ **C# file** @@ -184,18 +184,18 @@ namespace WearableUIGallery.TC ``` -## Adding list with 2 texts and 1 icon as list contents +## Adding a list with 2 texts and 1 icon as list contents -You can add list with 2 texts and 1 icon as contents of `CircleListView`. +You can add a list with 2 texts and 1 icon as contents of `CircleListView`. This can easily be done using [ViewCell](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#custom-cells). - [ViewCell](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#custom-cells) is nested inside a [DataTemplate](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/), which is inside `CircleListView.ItemTemplate`. -- Layout of [ViewCell](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#custom-cells) is managed by a [StackLayout](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout). +- The Layout of [ViewCell](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance#custom-cells) is managed by a [StackLayout](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout). - You can place it in the [StackLayout](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout) with your desired configuration. -_This guide's code example use XUIComponent's CircleList of Style2text1icon1 code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleList/ListViewModel.cs and Style2text1icon1.xaml_ +_This guide's code example uses XUIComponent's CircleList of Style2text1icon1 code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleList/ListViewModel.cs and Style2text1icon1.xaml_ **C# file** diff --git a/doc/guide/CirclePage.md b/doc/guide/CirclePage.md index cbd063b9..51f0fccd 100755 --- a/doc/guide/CirclePage.md +++ b/doc/guide/CirclePage.md @@ -9,15 +9,15 @@ CirclePage derives from [Xamarin.Forms.Page](https://developer.xamarin.com/api/t ![CirclePage](data/circlepage.png) ![CircleSurfaceItem](data/circlepage_surfaceitem.png) ## Overview -`CirclePage` is container of any control that use circleObject or rotary event. -if you want to use any circle control or to handle rotary event. you have to use `CirclePage`. +`CirclePage` is a container of any control that uses circle object or [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). +If you want to use any circle control or to handle the `Rotary Event`. you have to use `CirclePage`. `CirclePage` can set bottom button(`ActionButtonItem`) and `CircleProgressBar` and `CircleSlider` and `MoreOption` on it's own. -**WARNNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `page` contains these control. It may cause exception or control can not be displayed.** +**WARNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `pages` contain these control. It may cause exception or control cannot be displayed.** * bottom button(ActionButtonItem) - - Semicircular button is shown at bottom of screen. refer to below image. + - A Semicircular button is shown at bottom of screen. refer to below image. ![bottom_button](data/bottom_button.png) @@ -29,8 +29,8 @@ if you want to use any circle control or to handle rotary event. you have to use * CircleSlider - - Circle Slider changes value corresponding to rotary events. this shows a circle bar at the edge of the circle screen. -You can change radius of circle bar with modifying radius value. + - Circle Slider changes value corresponding to the `Rotary Event`. this shows a circle bar at the edge of the circle screen. +You can change the radius of circle bar with modifying radius value. ![circle_slider](data/circle_slider.png) @@ -43,11 +43,11 @@ You can change radius of circle bar with modifying radius value. ## Create CirclePage -First, you should download Tizen.Wearalbe.CircularUI nuget package in your application project, please refer to [QuickStart](Quickstart.md).
+First, you should download Tizen.Wearable.CircularUI NuGet package in your application project, please refer to [QuickStart](Quickstart.md).
Add a new XAML page to the Tizen Xamarin.Forms application, First import Tizen.Wearable.CircularUI.Forms and change the base class from ContentPage to CirclePage. This has to be done in both the C# and XAML.
In a XAML file. import CircularUI and define namespace like as `xmlns:w="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"` -_This guide's code example use WearableUIGallery's TCCirclePage code at the test\WearableUIGallery\WearableUIGallery\TC\TCCirclePage.xaml_ +_This guide's code example uses WearableUIGallery's TCCirclePage code at the test\WearableUIGallery\WearableUIGallery\TC\TCCirclePage.xaml_ **C# file** @@ -85,10 +85,10 @@ namespace WearableUIGallery.TC ## Adding Content at CirclePage You can set content at `CirclePage.Content`. The following XAML code show CirclePage set content with `CircleDateTimeSelector`. -`RotaryFocusTargetName` property set the current focused control that is handle by rotating and display the focused control's circle object. -If you don't set this value properly. Control can't receive rotary event or circle object can't be shown. +`RotaryFocusTargetName` property set the currently focused control that is handled by rotating and display the focused control's circle object. +If you don't set this value properly. Control can't receive the Rotary Event or circle object can't be shown. -For more information . Please refer to below links +For more information. Please refer to below links - [CirclePage API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CirclePage.html) - [Xamarin.Forms.Page guide](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/pages) @@ -122,12 +122,12 @@ For more information . Please refer to below links ``` ## Adding ActionButtonItem at CirclePage -`ActionButtonItem` in CirclePage presents bottom button. ActionButtonItem derive from [Xamarin.Forms.Menuitem](https://developer.xamarin.com/api/type/Xamarin.Forms.MenuItem/). +`ActionButtonItem` in CirclePage presents bottom button. ActionButtonItem derives from [Xamarin.Forms.Menuitem](https://developer.xamarin.com/api/type/Xamarin.Forms.MenuItem/). `ActionButtonItem` has the following properties: - `Command` : Gets or sets the `ICommand` to be invoked on activation(item clicked). - `Text` : Gets or sets button's text. -For more information . Please refer to below links +For more information. Please refer to below links - [ActionButtonItem API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.ActionButtonItem.html) - [Xamarin.Forms.MenuItem API reference](https://developer.xamarin.com/api/type/Xamarin.Forms.MenuItem/) @@ -140,7 +140,7 @@ For more information . Please refer to below links ## Adding ToolbarItems at CirclePage CirclePage `ToolbarItems` set rotary selector view's items. You can set each item with `CircleToolbarItem` property. -CircleToolbarItem derive from [Xamarin.Forms.ToolbarItem](https://developer.xamarin.com/api/type/Xamarin.Forms.ToolbarItem/). +CircleToolbarItem derives from [Xamarin.Forms.ToolbarItem](https://developer.xamarin.com/api/type/Xamarin.Forms.ToolbarItem/). `CircleToolbarItem` has the following properties: - `Command` : Gets or sets the `ICommand` to be invoked on activation(item clicked). @@ -148,7 +148,7 @@ CircleToolbarItem derive from [Xamarin.Forms.ToolbarItem](https://developer.xama - `Text` : Gets or sets item's title. -For more information . Please refer to below links +For more information. Please refer to below links - [CircleToolbarItem API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CircleToolbarItem.html) - [Xamarin.Forms.ToolbarItem API reference](https://developer.xamarin.com/api/type/Xamarin.Forms.ToolbarItem/) @@ -175,12 +175,12 @@ For more information . Please refer to below links ## Adding CircleProgressBarSurfaceItem at CirclePage CirclePage `CircleSurfaceItems` can set `CircleProgressBarSurfaceItem` and `CircleSliderSurfaceItem`. -`CircleProgressBarSurfaceItem` represent Circle ProgressBar.`progress1` at XAML code represents outter circle of below image. and `progress2` represents inner circle. -If you use CircleProgressbar, you don't need to set `RotaryFocusTargetName` property of CirclePage. -When `Value` property is incread or decrease. circle object extend or shrink following to `Value` property. +`CircleProgressBarSurfaceItem` represent Circle ProgressBar.`progress1` at XAML code represents the outer circle of below image. and `progress2` represents the inner circle. +If you use CircleProgressbar, you don't need to set the `RotaryFocusTargetName` property of CirclePage. +When `Value` property is increased or decreased. circle object extends or shrinks following to the `Value` property. `CircleProgressBarSurfaceItem` has the following properties: -- `Value` : Gets or sets the value of the progressbar.. +- `Value` : Gets or sets the value of the progress bar. - `IsVisible` : Gets or sets the visibility value of circle surface item. - `BarRadius` : Gets or sets the bar radius value. - `BackgroundRadius` : Gets or sets the background radius value. @@ -190,13 +190,13 @@ When `Value` property is incread or decrease. circle object extend or shrink fol - `BackgroundLineWidth` : Gets or sets the background color value. -For more information . Please refer to below links +For more information. Please refer to below links - [CircleSurfaceItem API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CircleSurfaceItem.html) - [CircleProgressBarSurfaceItem API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CircleProgressBarSurfaceItem.html) ![circle_progressbar](data/circle_progressbar.png) -_This guide's code example use XUIComponent's CircleProgressBar.xaml code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleProgressBar.xaml_ +_This guide's code example uses XUIComponent's CircleProgressBar.xaml code at the sample\XUIComponents\UIComponents\UIComponents\Samples\CircleProgressBar.xaml_ **XAML file** ```xml diff --git a/doc/guide/CircleScrollView.md b/doc/guide/CircleScrollView.md index cdd61074..910810a6 100755 --- a/doc/guide/CircleScrollView.md +++ b/doc/guide/CircleScrollView.md @@ -5,22 +5,22 @@ summary: CircleScrollView control guide # CircleScrollView `CircleScrollView` can be used to ensure that larger views display well on smaller wearable devices. -It is extension of [Xamarin.Forms.ScrollView](https://developer.xamarin.com/api/type/Xamarin.Forms.ScrollView/). +It is an extension of [Xamarin.Forms.ScrollView](https://developer.xamarin.com/api/type/Xamarin.Forms.ScrollView/). Same as [Xamarin.Forms.ScrollView](https://developer.xamarin.com/api/type/Xamarin.Forms.ScrollView/), Scroller is rendered to [CircleSurface](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-surface) and scrolling is possible with [Bezel interaction](https://developer.tizen.org/design/wearable/interaction/bezel-interactions). -In order to receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary), it must be registered as `RotaryFocusObject` property of [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage). +In order to receive [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary), it must be registered as `RotaryFocusObject` property of [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage). |![Horizontal](data/CircleScrollView_Horizontal.png)|![Vertical](data/CircleScrollView_Vertical.png)| |:-----------------------------------------------:|:-----------------------------------------------:| | Horizontal | Vertical | -**WARNNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `page` contains these control. It may cause exception or control can not be displayed.** +**WARNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `pages` contain these control. It may cause exception or control cannot be displayed.** ## Adding CircleScrollView at CirclePage You can set `CircleScrollView` at [CirclePage.Content](xref:Tizen.Wearable.CircularUI.doc.CirclePage). If you'd like to know how to add [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage), please refer to [CirclePage guide](https://samsung.github.io/Tizen.CircularUI/guide/CirclePage.html#create-circlepage). -The following XAML code show [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleScrollView`. -`RotaryFocusTargetName` attribute sets the current focused control that is handled by rotating and display the focused control's circle object. -If you don't set this property, control can't receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). +The following XAML code shows [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleScrollView`. +`RotaryFocusTargetName` attribute sets the currently focused control that is handled by rotating and display the focused control's circle object. +If you don't set this property, control can't receive the [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). The orientation of the scroller depends on the setting of the `Orientation` value. In the example below, we set the `Orientation` of the `CircleScrollView` to `Horizontal` and place it in the `StackLayout` to contain many images. diff --git a/doc/guide/CircleStackLayout.md b/doc/guide/CircleStackLayout.md index 36bdf2af..4943389e 100755 --- a/doc/guide/CircleStackLayout.md +++ b/doc/guide/CircleStackLayout.md @@ -29,7 +29,7 @@ For more information. Please refer to below links - [Xamarin.Forms.StackLayout API reference](https://developer.xamarin.com/api/type/Xamarin.Forms.StackLayout/) - [Xamarin.Forms.StackLayout Guide](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout) -_This guide's code example use WearableUIGallery's TCCircleStackLayout.xaml code at the test\WearableUIGallery\WearableUIGallery\TC\TCCircleStackLayout.xaml_ +_This guide's code example uses WearableUIGallery's TCCircleStackLayout.xaml code at the test\WearableUIGallery\WearableUIGallery\TC\TCCircleStackLayout.xaml_ **XAML file** diff --git a/doc/guide/CircleStepper.md b/doc/guide/CircleStepper.md index f1044468..d0b12ac5 100755 --- a/doc/guide/CircleStepper.md +++ b/doc/guide/CircleStepper.md @@ -5,30 +5,30 @@ summary: CircleStepper control guide # CircleStepper `CircleStepper` allows the user to select a value from a range of incremental values specified with the `Minimum`, `Maximum`, and `Increment` properties. -It is extension of [Xamarin.Forms.Stepper](https://developer.xamarin.com/api/type/Xamarin.Forms.Stepper/). +It is an extension of [Xamarin.Forms.Stepper](https://developer.xamarin.com/api/type/Xamarin.Forms.Stepper/). MarkerColor, MarkerLineWidth, and LabelFormat have been added to the existing [Xamarin.Forms.Stepper](https://developer.xamarin.com/api/type/Xamarin.Forms.Stepper/). You can change value with [Bezel interaction](https://developer.tizen.org/design/wearable/interaction/bezel-interactions). In order to receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary), it must be registered as `RotaryFocusObject` property of [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage). ![](data/CircleStepper_property.png) -**WARNNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `page` contains these control. It may cause exception or control can not be displayed.** +**WARNING: [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper) must be contained by `CirclePage` or [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior) should be added in [Behaviors](https://developer.xamarin.com/api/type/Xamarin.Forms.Behavior/) of [Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/) that contain these Control. If other `pages` contain these control. It may cause exception or control cannot be displayed.** ## Adding CircleStepper at CirclePage You can set CircleStepper at [CirclePage.Content](xref:Tizen.Wearable.CircularUI.doc.CirclePage). If you'd like to know how to add [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage), please refer to [CirclePage guide](https://samsung.github.io/Tizen.CircularUI/guide/CirclePage.html#create-circlepage). -The following code show [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleStepper`. -`RotaryFocusTargetName` attribute sets the current focused control that is handled by rotating and display the focused control's circle object. -If you don't set this value properly, control can't receive [Rotary event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). +The following code shows [CirclePage](xref:Tizen.Wearable.CircularUI.doc.CirclePage) with `CircleStepper`. +`RotaryFocusTargetName` attribute sets the currently focused control that is handled by rotating and display the focused control's circle object. +If you don't set this value properly, control can't receive [Rotary Event](https://developer.tizen.org/development/training/native-application/understanding-tizen-programming/event-handling#rotary). `CircleStepper` has the following properties: - LabelFormat : Gets or sets format in which Value is shown. - MarkerColor : [Xamarin.Forms.Color](https://developer.xamarin.com/api/type/Xamarin.Forms.Color/). Change color of marker to select value. -- MarkerLineWidth : Gets or sets length of marker. +- MarkerLineWidth : Gets or sets a length of the marker. In the example below, we have a `StackLayout` with a `CircleStepper` and two labels in the `CirclePage`. -Since 9 is set to `Minimum` and `LabelFormat` is set to "% 1.1f", "9.0" appears on the screen. `Increment` is 7.5, so if you turn the bezel and increase `Value`, it increases by 7.5. Since the `Maximum` is 99, the marker does not exceed the value. Since `MarkerColor` is set to "Coral", it will be displayed as the corresponding color. +Since 9 is set to `Minimum` and `LabelFormat` is set to "% 1.1f", "9.0" appears on the screen. The `Increment` is 7.5, so if you turn the bezel and increase `Value`, it increases by 7.5. Since the `Maximum` is 99, the marker does not exceed the value. Since `MarkerColor` is set to "Coral", it will be displayed as the corresponding color. For more information. Please refer to below links diff --git a/doc/guide/CircleSurfaceEffectBehavior.md b/doc/guide/CircleSurfaceEffectBehavior.md index 84c4fbbf..d77891f8 100755 --- a/doc/guide/CircleSurfaceEffectBehavior.md +++ b/doc/guide/CircleSurfaceEffectBehavior.md @@ -4,16 +4,15 @@ summary: CircleSurfaceEffectBehavior guide --- # CircleSurfaceEffectBehavior -`CircleSurfaceEffectBehavior` is an effect which allows to attach `CircleSurface` to [Xamarin.Forms.Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/). [CircleSurface](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-surface) is Tizen specific component that mangages [circle objects](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-object). -If you need to add `circle control`(such as [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper)) at `Page` in Tizen Xamarin Forms application. There are two way, one is inserting these controls to `CirclePage`, another is adding `CircleSurfaceEffectBehavior` at `Page` that include `circle control`. - +`CircleSurfaceEffectBehavior` is an effect which allows to attach `CircleSurface` to [Xamarin.Forms.Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/). [CircleSurface](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-surface) is Tizen specific component that manages [circle objects](https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/circle-object). +If you need to add `circle control`(such as [CircleListView](xref:Tizen.Wearable.CircularUI.doc.CircleListView), [CircleDateTimeSelector](xref:Tizen.Wearable.CircularUI.doc.CircleDateTimeSelector), [CircleScrollView](xref:Tizen.Wearable.CircularUI.doc.CircleScrollView), [CircleStepper](xref:Tizen.Wearable.CircularUI.doc.CircleStepper)) at `Page` in Tizen Xamarin Forms application. There is two way, one is inserting these controls to `CirclePage`, another is adding `CircleSurfaceEffectBehavior` at `Page` that includes `circle control`. ## adding CircleSurfaceEffectBehavior at Page -add `CircleSurfaceEffectBehavior` at ``. and then set `RotaryFocusTargetName` property with `circle control` name. `RotaryFocusTargetName` set the current focused control that is handle by rotating and display the focused control's circle object. please refer to below sample code. +add `CircleSurfaceEffectBehavior` at ``. and then set `RotaryFocusTargetName` property with `circle control` name. `RotaryFocusTargetName` set the currently focused control that is handled by rotating and display the focused control's circle object. please refer to below sample code. -_This guide's code example use WearableUIGallery's TCListAppender code at the test\WearableUIGallery\WearableUIGallery\TC\TCListAppender.xaml_ +_This guide's code example uses WearableUIGallery's TCListAppender code at the test\WearableUIGallery\WearableUIGallery\TC\TCListAppender.xaml_ -For more information . Please refer to below links +For more information. Please refer to below links - [CircleSurfaceEffectBehavior API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.CircleSurfaceEffectBehavior.html) - [Xamarin.Forms.Page guide](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/pages) - [Consuming a Xamarin.Forms Behavior](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/creating#consuming-a-xamarinforms-behavior) diff --git a/doc/guide/ConfirmationPopup.md b/doc/guide/ConfirmationPopup.md index 5b051eb1..8603e16b 100755 --- a/doc/guide/ConfirmationPopup.md +++ b/doc/guide/ConfirmationPopup.md @@ -6,17 +6,17 @@ summary: ConfirmationPopup control guide # ConfirmationPopup `ConfirmationPopup` represents Tizen Wearable EFL Twobutton-popup style. `ConfirmationPopup` is usefull to select one of two options. (e.g cancel/done, share/delete) -*`ConfirmationPopup` is displayed seperate from any control. So you can't set this in XAML file.* +*`ConfirmationPopup` is displayed separately from any control. So you can't set this in XAML file.* ![confirmation_popup1](data/confirmation_popup1.png) ## Create ConfirmationPopup -`ConfirmationPopup.Title` Property set title of popup. you can set `Content` property with Layout such as `StackLayout` or `ScrollView`. +`ConfirmationPopup.Title` Property set the title of the popup. you can set the `Content` property with Layouts such as `StackLayout` or `ScrollView`. `ConfirmationPopup.FirstButton` property set left side button. `ConfirmationPopup.SecondButton`property set right side button. you can set` FirstButton` and `SecondButton` using `MenuItem`. You should add code at `Command` or `Clicked` event handler for controlling `MenuItem` clicked. -_This guide's code example use WearableUIGallery's TCConfirmationPopup code at the test\WearableUIGallery\WearableUIGallery\TC\TCConfirmationPopup.xaml.cs_ +_This guide's code example uses WearableUIGallery's TCConfirmationPopup code at the test\WearableUIGallery\WearableUIGallery\TC\TCConfirmationPopup.xaml.cs_ -For more information . Please refer to [ConfirmationPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.ConfirmationPopup.html) +For more information. Please refer to [ConfirmationPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.ConfirmationPopup.html) **C# file** ```cs @@ -66,10 +66,10 @@ For more information . Please refer to [ConfirmationPopup API reference](https: ``` ## How to set long Text at ConfirmationPopup -ConfirmationPopup has `Text` Property. This Proerpty is usefull to set long text. -If long text was set by `Text` property. you don't need to add `StackLayout` and `ScrollView` and `Label` for displaying long text. +ConfirmationPopup has `Text` Property. This Property is useful to set long text. +If a long text was set by `Text` property. you don't need to add `StackLayout` and `ScrollView` and `Label` for displaying long text. -*`Text` Property's area overlap `Content` Property area. So do not use two propery at the same time.* +*`Text` Property's area overlaps `Content` Property area. So do not use two property at the same time.* **C# file** ```cs diff --git a/doc/guide/ContextPopup.md b/doc/guide/ContextPopup.md index ee1f9b09..3e36042f 100755 --- a/doc/guide/ContextPopup.md +++ b/doc/guide/ContextPopup.md @@ -5,9 +5,9 @@ summary: ContextPopup control guide # ContextPopup `ContextPopup` represents Tizen wearable context popup that has one or two items. -`ContextPopup` has same shape as `ConfirmPopupEffect`. `ConfirmPopupEffect` can be attached any control (such as button). +`ContextPopup` has the same shape as `ConfirmPopupEffect`. `ConfirmPopupEffect` can be attached any control (such as a button). -*`ContextPopup` is displayed seperate from any control. So you can't set this in XAML file.* +*`ContextPopup` is displayed separately from any control. So you can't set this in XAML file.* *If you want to attach context popup in XAML file. please use `ConfirmPopupEffect` instead* ![context_popup](data/context_popup.png) @@ -17,11 +17,11 @@ summary: ContextPopup control guide `ContextPopupItem` is each item of `ContextPopup`. `ContextPopupItem` parameter of constructor set item text. One or two `ContextPopupItem` can be attached at `ContextPopup` using `ContextPopup.Items.Add()`. `ItemSelected` event is occurred when user select item. `SelectedItem` get the value which item selected. -*It is possible to add more than 2 items, but any items from 3rd item are hidden. so one or two items are recommended.* +*It is possible to add more than 2 items, but any items from the 3rd item are hidden. so one or two items are recommended.* _This guide's code example use WearableUIGallery's TCContextPopup code at the test\WearableUIGallery\WearableUIGallery\TC\TCContextPopup.xaml.cs_ -For more information . Please refer to [ContextPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.ContextPopup.html) +For more information. Please refer to [ContextPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.ContextPopup.html) **C# file** ```cs diff --git a/doc/guide/IRotaryEventReceiver.md b/doc/guide/IRotaryEventReceiver.md index d8200ac9..b84864bd 100755 --- a/doc/guide/IRotaryEventReceiver.md +++ b/doc/guide/IRotaryEventReceiver.md @@ -7,13 +7,13 @@ summary: IRotaryEventReceiver guide `IRotaryEventReceiver` is a receiver interface to take a rotary event. `IRotaryEventReceiver` has `Rotate(RotaryEventArgs)` method that is called when rotary event is occurred. You can simply handle of rotary event using this interface. such as below sample, you can easily rotate image according to bezel rotation. ## adding IRotaryEventReceiver -Add `IRotaryEventReceiver` interface to `CirclePage` or `Page` having [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior). Implement `Rotate()` method to control a rotary event. `RotaryEventArgs` is event argument for a rotary event. -`RotaryEventArgs.IsClockwise` get direction of bezel rotation. If device has rotated in the clockwise direction, `IsClockwise` is `true`. -Below sample receives rotary event at `Rotate()` method. and add angle of image following to rotary event direction. and then rotate image. +Add `IRotaryEventReceiver` interface to `CirclePage` or `Page` having [CircleSurfaceEffectBehavior](xref:Tizen.Wearable.CircularUI.doc.CircleSurfaceEffectBehavior). Implement `Rotate()` method to control a rotary event. `RotaryEventArgs` is event argument for the Rotary Event. +`RotaryEventArgs.IsClockwise` gets the direction of bezel rotation. If the device has rotated in the clockwise direction, `IsClockwise` is `true`. +Below sample receives rotary event at `Rotate()` method. and add angle of the image following to rotary event direction. and then rotate the image. -_This guide's code example use WearableUIGallery's TCIRotaryEventReceiver code at the test\WearableUIGallery\WearableUIGallery\TC\TCIRotaryEventReceiver.xaml_ +_This guide's code example uses WearableUIGallery's TCIRotaryEventReceiver code at the test\WearableUIGallery\WearableUIGallery\TC\TCIRotaryEventReceiver.xaml_ -For more information . Please refer to [IRotaryEventReceiver API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.IRotaryEventReceiver.html) +For more information. Please refer to [IRotaryEventReceiver API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.IRotaryEventReceiver.html) **C# file** ```cs diff --git a/doc/guide/InformationPopup.md b/doc/guide/InformationPopup.md index bd313f54..4ce14b97 100755 --- a/doc/guide/InformationPopup.md +++ b/doc/guide/InformationPopup.md @@ -4,9 +4,9 @@ summary: InformationPopup control guide --- # InformationPopup -`InformationPopup` can represent 3 types of Tizen Wearable EFL popup style. InformationPopup is usefull to show any information or warnning. +`InformationPopup` can represent 3 types of Tizen Wearable EFL popup style. InformationPopup is useful to show any information or warning. -*`InformationPopup` is displayed seperate from any control. So you can't set this in XAML file.* +*`InformationPopup` is displayed separately from any control. So you can't set this in XAML file.* | ![information_popup1](data/information_popup1.png)| ![information_popup2](data/information_popup2.png) | ![information_popup3](data/information_popup3.png) | @@ -14,14 +14,14 @@ summary: InformationPopup control guide |Single text|Bottom button|Progress| ## Create single text InformationPopup -Single text informationPopup is used for displaying text. Single text informationPopup is similar to Toast popup. +Single text `InformationPopup` is used for displaying text. Single text `InformationPopup` is similar to `Toast` popup. but this popup doesn't disappear automatically.
- `Text` property can be set with text. `BackButtonPressed` event occur when user press back button of device. If you want to dismiss popup when this event occurred. you should add `Dismiss()` in `BackButtonPressed` event handle code. + `Text` property can be set with text. `BackButtonPressed` event occurs when user press back button of the device. If you want to dismiss popup when this event occurred. you should add `Dismiss()` in `BackButtonPressed` event handle code. -_This guide's code example use WearableUIGallery's TCInformationPopup code at the test\WearableUIGallery\WearableUIGallery\TC\TCInformationPopup.xaml.cs_ +_This guide's code example uses WearableUIGallery's TCInformationPopup code at the test\WearableUIGallery\WearableUIGallery\TC\TCInformationPopup.xaml.cs_ -For more information . Please refer to [InformationPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.InformationPopup.html) +For more information. Please refer to [InformationPopup API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.InformationPopup.html) **C# file** ```cs @@ -36,9 +36,9 @@ For more information . Please refer to [InformationPopup API reference](https:/ ``` ## Create bottom button InformationPopup -You can set `BottomButton` property with `MenuItem`. bottom button is used for confirmation of user. +You can set `BottomButton` property with `MenuItem`. the bottom button is used for confirmation of user. InformationPopup has `Title` property for displaying title. - `BottomButton.Clicked` event occur when user press bottom button. +`BottomButton.Clicked` event occurs when user press bottom button. **C# file** ```cs @@ -64,7 +64,7 @@ InformationPopup has `Title` property for displaying title. ``` ## Create progress InformationPopup -`InformationPopup` has `IsProgressRunning` property. If this property set `true`. small circle progress bar is displayed center of screen. +`InformationPopup` has `IsProgressRunning` property. If this property set `true`. small circle progress bar is displayed center of the screen. **C# file** ```cs diff --git a/doc/guide/Quickstart.md b/doc/guide/Quickstart.md index 38777199..4a5d80f3 100755 --- a/doc/guide/Quickstart.md +++ b/doc/guide/Quickstart.md @@ -1,21 +1,21 @@ # Quickstart -This guide show how to create an application that represents `Toast` and `CircleSlider`. If user presses the button, `Toast` pops up and then it automatically disappear after timeout seconds. - And If user rotates bezel of Tizen wearable device. `CircleSlider` bar is moving forward or backward direction. +This guide shows how to create an application that represents `Toast` and `CircleSlider`. If a user presses the button, `Toast` pops up and then it automatically disappear after timeout seconds. + And If a user rotates bezel of Tizen wearable device. `CircleSlider` bar is moving forward or backward direction. -## 1. Set up the development enviroment and Create a project +## 1. Set up the development environment and Create a project - Create Tizen Xamarin Forms App following to [Tizen.org guide](https://developer.tizen.org/development/training/.net-application/creating-your-first-tizen-.net-application).
In this guide project name is `SampleCircleApp` -- Select only wearable device at tizen project wizard. +- Select only wearable device at Tizen project wizard. ![tizen_project_wizard_capture](data/tizen_project_wizard_capture.png) -- Search Tizen.Wearable.CircularUI nuget pakage at Nuget package manager. Package source is nuget.org. +- Search Tizen.Wearable.CircularUI NuGet package at NuGet package manager. Package source is nuget.org. ![nuget_package_manager_capture](data/nuget_package_manager_capture.png) -- Install Tizen.Wearable.CircularUI nuget at portable class library(PCL) project. +- Install Tizen.Wearable.CircularUI NuGet at portable class library(PCL) project. ![after_Install_nuget_package](data/after_Install_nuget_package.png) @@ -28,9 +28,9 @@ This guide show how to create an application that represents `Toast` and `Circle - `xmlns:w=clr-namespace:Tizen.Wearable.CircularUI.Forms` : `w` prefix means `Tizen.Wearable.CircularUI.Forms` namespace. - `` : `CirclePage` derive from `Xamarin.Forms.Page`. This Page's content area has `Label` and `Button`. - `` : `CircleSliderSurfaceItem` attached for `CircleSurfaceItem` of `CirclePage`. - - `RotaryFocusTargetName` is set `slider` name. `CircleSliderSurfaceItem` has rotary focus. `CircleSliderSurfaceItem` can receive rotary event from the wearable device's bezel interaction. + - `RotaryFocusTargetName` is set `slider` name. `CircleSliderSurfaceItem` has rotary focus. `CircleSliderSurfaceItem` can receive a Rotary Event from the wearable device's bezel interaction. - For more information . Please refer to [CirclePage guide](CirclePage.md) + For more information. Please refer to [CirclePage guide](CirclePage.md) **App.xaml file** ```xml @@ -75,7 +75,7 @@ This guide show how to create an application that represents `Toast` and `Circle

- In App.xaml.cs, remove all of the template code and replace it with the following code. - - `OnButtonClicked` is event handler of `Button` `Clicked` event. below code simply display Toast popup during 3 second. + - `OnButtonClicked` is event handler of `Button` `Clicked` event. below code simply display Toast popup during 3 seconds. **App.xaml.cs file** ```cs @@ -104,7 +104,7 @@ namespace SampleCircleApp ```

-- For initialize CircularUI instance. Please insert `FormsCircularUI.Init()` code in Main method at `SampleCircleApp.Tizen.Wearable.cs`. +- For initializing CircularUI instance. Please insert `FormsCircularUI.Init()` code in the Main method at `SampleCircleApp.Tizen.Wearable.cs`. You should import `Tizen.Wearable.CircularUI.Forms.Renderer` with `using` directives. **SampleCircleApp.Tizen.Wearable.cs file** @@ -138,9 +138,9 @@ using Tizen.Wearable.CircularUI.Forms.Renderer; - In Windows OS. copy application tpk from project binary path to sdb tool path.\ - `SampleCircleApp` tpk locate in `ProjectPath\SampleCircleApp.Tizen.Wearable\bin\Debug\tizen40\org.tizen.example.SampleCircleApp.Tizen.Wearable-1.0.0.tpk`.\ - You can verify your project path. In the Solution Explorer view, right-click the solution name and press `open folder in file explorer` menu. - - sdb tool loacted in `c:\tizen\tools\sdb.exe`) + - sdb tool located in `c:\tizen\tools\sdb.exe`) -- If your OS is window, launch Tizen Sdb Command Prompt(Tool > Tizen > Tizen Sdb Command Prompt). +- If your OS is the window, launch Tizen Sdb Command Prompt(Tool > Tizen > Tizen Sdb Command Prompt). If you use Linux. you can use sdb command directly in your project path. - Install your app with sdb command diff --git a/doc/guide/Radio.md b/doc/guide/Radio.md index 5cf74d5e..926fd29d 100755 --- a/doc/guide/Radio.md +++ b/doc/guide/Radio.md @@ -4,19 +4,19 @@ summary: Radio control guide --- # Radio -`Radio` display 1 or more option and allows user to select 1 of them. +`Radio` display 1 or more option and allows a user to select 1 of them. `Radio` can select only 1 item among items having same `GroupName` property. ![radio](data/radio.png) ## Create Radio -`GroupName`property specifies which `Radio` controls are mutually exclusive. If user selected one Radio control of radio control group, other items are not selected. +`GroupName`property specifies which `Radio` controls are mutually exclusive. If a user selected one Radio control of radio control group, other items are not selected. `IsSelected` property sets default selected value of Radio control. `Selected` event occurs when the Radio selection was changed. -`Value` property sets any value of Radio control. `Value` property is usefull to distinguish which item was selected if all Radio control has same `Selected` event handler. please refer to below code. +`Value` property sets any value of Radio control. `Value` property is useful to distinguish which item was selected if all Radio control has the same `Selected` event handler. please refer to below code. -For more information . Please refer to [Radio API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.Radio.html) +For more information. Please refer to [Radio API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.Radio.html) -_This guide's code example use WearableUIGallery's TCRadio code at the test\WearableUIGallery\WearableUIGallery\TC\TCRadio.xaml.cs_ +_This guide's code example uses WearableUIGallery's TCRadio code at the test\WearableUIGallery\WearableUIGallery\TC\TCRadio.xaml.cs_ **XAML file** diff --git a/doc/guide/Toast.md b/doc/guide/Toast.md index 137ae43f..464063d5 100755 --- a/doc/guide/Toast.md +++ b/doc/guide/Toast.md @@ -13,12 +13,12 @@ Tizen Wearable `Toast` fills the whole screen for displaying message and image. ## Create Toast -`Toast` is static method. so you don't need to any container or parent control for using this control. -`Toast` provides two method, `Toast.DisplayText()` shows simple text message. `Toast.DisplayIconText()` shows simple icon and simple text message.
-`Toast.DisplayText()` first parameter is message text. and second parameter is timeout duration(milliseconds). second parameter is optional. If you don't set this value. Default value is set 3000(3 seconds).
-`Toast.DisplayIconText()` first parameter is message text. and second parameter is icon file path, you can set file path with `new FileImageSource`. third parameter is timeout duration that is also optional. +`Toast` is a static method. so you don't need to any container or parent control for using this control. +`Toast` provides two methods, `Toast.DisplayText()` shows simple text message. `Toast.DisplayIconText()` shows simple icon and simple text message.
+`Toast.DisplayText()` method's first parameter is message text. and the second parameter is timeout duration(milliseconds). the second parameter is optional. If you don't set this value. The default value is set 3000(3 seconds).
+`Toast.DisplayIconText()` method's first parameter is message text. and the second parameter is icon file path, you can set file path with `new FileImageSource`. the third parameter is timeout duration that is also optional. -For more information . Please refer to [Toast API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.Toast.html) +For more information. Please refer to [Toast API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.Toast.html) **C# file** ```cs diff --git a/doc/guide/TwoButtonPage.md b/doc/guide/TwoButtonPage.md index a91e1ef5..d317fd14 100755 --- a/doc/guide/TwoButtonPage.md +++ b/doc/guide/TwoButtonPage.md @@ -4,20 +4,20 @@ summary: TwoButtonPage control guide --- # TwoButtonPage -`TwoButtonPage` derives from [Xamarin.Forms.Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/). TwonButtonPage has two semicircular buttons that are located at left side and right side of circle. +`TwoButtonPage` derives from [Xamarin.Forms.Page](https://developer.xamarin.com/api/type/Xamarin.Forms.Page/). TwonButtonPage has two semicircular buttons that are located at the left side and the right side of the circle. |![twobutton_page](data/twobutton_page.png)|![twobutton_page_overlay](data/twobutton_page_overlap.png) |:------------:|:--------:| |Non-overlapped|Overlapped| ## Create TwoButtonPage -you can set control in the `TwoButtonPage.Content`. In this example, long text Label and two buttons was set for Content. -If `Overlap` property is `true`. `Content` area occupies all of the screen. If `Overlap` property is `false`. `Content` area occupies screen that is excluded button's area. `Overlap` property default value is `false`. -`TwoButtonPage.firstButton` set left side button. `TwoButtonPage.SecondButton` set right side button. you can add button using `MenuItem`. +you can set control in the `TwoButtonPage.Content`. In this example, long text Label and two buttons were set for Content. +If `Overlap` property is `true`. The `Content` area occupies the whole of the screen. If `Overlap` property is `false`. The `Content` area occupies screen that is excluded button's area. `Overlap` property default value is `false`. +`TwoButtonPage.firstButton` set left side button. `TwoButtonPage.SecondButton` set right side button. you can add buttons using `MenuItem`. -_This guide's code example use WearableUIGallery's TCTwoButtonPage code at the test\WearableUIGallery\WearableUIGallery\TC\TCTwoButtonPage.xaml_ +_This guide's code example uses WearableUIGallery's TCTwoButtonPage code at the test\WearableUIGallery\WearableUIGallery\TC\TCTwoButtonPage.xaml_ -For more information . Please refer to below links +For more information. Please refer to below links - [TwoButtonPage API reference](https://samsung.github.io/Tizen.CircularUI/api/Tizen.Wearable.CircularUI.Forms.TwoButtonPage.html) - [Xamarin.Forms.Page guide](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/controls/pages) - [Xamarin.Forms.MenuItem API reference](https://developer.xamarin.com/api/type/Xamarin.Forms.MenuItem/) diff --git a/doc/guide/toc.md b/doc/guide/toc.md index 7fa6d967..75bb9ade 100755 --- a/doc/guide/toc.md +++ b/doc/guide/toc.md @@ -15,7 +15,7 @@ ## [IndexPage](IndexPage.md) ## [InformationPopup](InformationPopup.md) ## [IRotaryEventReceiver](IRotaryEventReceiver.md) +## [PopupEntry](PopupEntry.md) ## [Radio](Radio.md) ## [Toast](Toast.md) ## [TwoButtonPage](TwoButtonPage.md) -## [PopupEntry](PopupEntry.md)