Skip to content
This repository has been archived by the owner on Dec 28, 2023. It is now read-only.

Fix typo at guides and index.md #21

Merged
merged 2 commits into from
May 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions doc/docfx_files/index.md
Original file line number Diff line number Diff line change
@@ -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)
5 changes: 2 additions & 3 deletions doc/guide/Check.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)

Expand Down
12 changes: 6 additions & 6 deletions doc/guide/CircleDateTimeSelector.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand All @@ -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:

Expand All @@ -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**

Expand Down
20 changes: 10 additions & 10 deletions doc/guide/CircleListView.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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.

Expand Down Expand Up @@ -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**
Expand Down Expand Up @@ -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**
Expand Down
Loading