Releases: Samsung/Tizen.CircularUI
1.5.4
1.5.3
Nuget
- CircularUI
- Nuget package here.
Important Notice 📢
-
Update the version of referenced Xamarin.Forms version to 5.0.0 (#355)
- As you may know, since Xamarin.Forms 5.0.0,
MediaElementrelated classes and interfaces provided in Core have been removed. (See xamarin/Xamarin.Forms#12007 for more details). Accordingly, all classes and interfaces used in CircularUI for MediaView, MediaPlayer have been added again.
(These are the classes and interfaces that were removed from #270.) - One of the big changes to the Xamarin.Forms 5.0.0 Tizen backend is the use of
SkiaSharpto support shiny new XF5 features such asBrush,PathandShape. So,Xamarin.Forms.Platform.Tizen.dllitself has a dependency on theSkiaSharppackage. Accordingly, CicularUI didn't have to worry about the dependency of SkiaSharp anymore, and decided to include it in the CicularUI package without providing the CircularUI.Chart package that was provided as a preview anymore.
These two changes are big changes, but don't worry.
There is nothing to modify in your app to do this, and nothing changes in behavior. - As you may know, since Xamarin.Forms 5.0.0,
Enhancements
- Add ItemFocused event to CircleListView (#362)
Bug Fixes
- Fix MediaPlayer issue (#359)
1.5.2
1.5.1
Nuget
Important Notice 📢
- The interfaces below have become public.
- IInformationPopup
- IRotaryService
- IToast
- ITwoButtonPopup
Enhancements
1.5.0
Nuget
Important Notice 📢
- Update the version of referenced Xamarin.Forms version to 4.6.0.967
- For all changes to 1.5.0, please refer to the respective 1.5.0 preview release notes here.
New Controls 🎉
- SelectModeTextCell and SelectModeImageCell (#332)
Enhancements
- Adds SelectModeCell for CircleListView (#332)
- Enhance the Page Renderer (#324) (#334)
- Refactoring the WatchListView (#311)
Bug Fixes
- Fix Header/Footer of ListView (#311)
1.5.0 Preview 7
Nuget
Important Notice 📢
- Update the version of referenced Xamarin.Forms version to 4.6.0.800
- Deprecate the legacy APIs (#297)
- The following classes are deprecate from 1.5.0, and no longer be supported in the future. Therefore, please update your application according to the migration guide below.
Deprecated APIs Migration Guide ⚡ ⚡ ⚡
-
Check→ Xamarin.Forms.CheckBox or Xamarin.Forms.SwitchDisplayStyle→ Switch.Style + SwitchStyle (TizenSpecific)Color→ Switch.OnColor (Core), Switch.ThumbColor (Core), Switch.BackgroundColor (Core)
-
CirclePage→ Xamarin.Forms.ContentPageActionButton→ Button (Core) + Button.Style (TizenSpecific) or ContentButton (CircularUI)- e.g)
<Button AbsoluteLayout.LayoutBounds="75, 268, 210, 92" tizen:VisualElement.Style="bottom" />
- e.g)
RotaryFocusObject→ BezelInteractionPage (CircularUI) or Application.ActiveBezelInteractionElement (TizenSpecific)CircleSurfaceItems→ CircleSurfaceView.CircleSurfaceItems (CircularUI)CircleToolbarItems→ Page.ToolbarItems (Core)
-
IndexPage→ Xamarin.Forms.CarouselView + Xamarin.Forms.IndicatorView or Xamarin.Forms.CarouselPage- You can also simply use Xamarin.Forms.Shell with Xamarin.Forms.ShellSection instead.
-
Radio→ Xamarin.Forms.RadioButtonValue→ RadioButton.Text (Core)IsSelected→ RadioButton.IsChecked (Core)GroupName→ RadioButton.GroupName (Core)Color→ RadioButton.BackgroundColor (Core)Selected→ RadioButton.CheckChanged (Core)
-
CircleSurfaceEffectBehavior→ BezelInteractionPageRotaryFocusObject→ BezelInteractionPage.RotaryFocusObject (CircularUI)
-
CirclePageNotFoundException→No needed.
New Controls 🎉
- BezelInteractionPage (#298) (#299)
BezelInteractionPageis basically aXamarin.Forms.ContentPagebut 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,BezelInteractionPagegives the full control of which control gets the bezel interaction in the current page to developers.- See also here for more detail
- CheckCell, Check2TextCell, RadioCell, Radio2TextCell, Switch2TextCell and SingleTextCell (#317) (#318) (#319) (#321)
CheckCellandCheck2TextCell
RadioCellandRadio2TextCell
Switch2TextCellandSingleTextCell
Enhancements
- Update Bezel Intercation behavior on closing dialog (#304)
- Update CircleListViewRenderer (#303)
- Update ActiveBezelInteractionElement on Activate (#302)
- Update CircleScrollViewRenderer (#300) (#301)
- Update renderers for Stepper and DateTimeSelector (#296)
- Refactoring CirclePageRenderer (#291)
Bug Fixes
1.5.0 Preview 6
1.5.0 Preview 5
Nuget
Important Notice
- The namespace of
FormsCircularUI.Init()has been changed. (#273)
Legacy (deprecated) :
Tizen.Wearable.CircularUI.Forms.Renderer.FormsCircularUI.Init();New way :
Tizen.Wearable.CircularUI.Forms.FormsCircularUI.Init();-
Introduce to CircularUI.Chart` 🎉
-
Update the version of referenced Xamarin.Forms version to 4.6.0-pre4 (#270)
-
Below removed classes/interfaces are replaced with the classes/interfaces added in Xamarin.Forms MediaElement PR.
- public class MediaSourceHandler
- public class EmbeddingControls
- public class FileMediaSource
- public class FIleMediaSourceConverter
- public interface IPlatformMediaPlayer
- public interface IVideoOutput
- public class MediaSource
- public class MediaSourceConverter
- public class UriMediaSource
Enhancements
- Adds cicular-ui-theme (#266)
FlatViewCellis now available on Tizen 4.0.
New Controls
- RadialProgress (#272)
Bug Fixes
1.5.0 Preview 4
Nuget package here.
New Controls
Bug Fixes
- Fix TwoButtonPage issue on shell (#255)
Developers Guide
Getting Started with ContentButton
The ContentButton is a type of Xamarin.Forms.ContentView that contatins a single child element (called Content) and is typically used custom, reusable controls. Also, as its name implies, ContentButton is designed to be used like a Button that implements Xamarin.Forms.IButtonController.
With ContentButton, you can easily and efficiently customize the various properties of the Button as you wish.
The following example shows the CustomButton compsed of a combination of Image that define the icon, background, and border of button in XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:w="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
xmlns:tizen="clr-namespace:Xamarin.Forms.PlatformConfiguration.TizenSpecific;assembly=Xamarin.Forms.Core"
x:Class="WearableUIGallery.TC.ContentButtonTestPage">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Label x:Name="label"
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
Text="Test"/>
<w:ContentButton x:Name="button"
Clicked="OnButtonClicked"
Pressed="OnButtonPressed"
Released="OnButtonReleased"
Command="{Binding ClickCommand}">
<w:ContentButton.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image x:Name="buttonBg" Source="button_bg.png" tizen:Image.BlendColor="DarkGreen" Opacity="0.25" AbsoluteLayout.LayoutBounds=".5,.5,89,66" AbsoluteLayout.LayoutFlags="PositionProportional" />
<Image x:Name="buttonBorder" Source="button_border.png" tizen:Image.BlendColor="Transparent" AbsoluteLayout.LayoutBounds=".5,.5,89,66" AbsoluteLayout.LayoutFlags="PositionProportional" />
<Image x:Name="buttonIcon" Source="home.png" tizen:Image.BlendColor="DarkGreen" AbsoluteLayout.LayoutBounds=".5,.5,36,36" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</w:ContentButton.Content>
</w:ContentButton>
</StackLayout>
</ContentPage.Content>
</ContentPage>If you want to customize different effects depending on the state (Clicked, Pressed and Released) of the button, you can do it in the event handlers as below.
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace WearableUIGallery.TC
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ContentButtonTestPage : ContentPage
{
public ContentButtonTestPage()
{
InitializeComponent();
ClickCommand = new Command(execute: () =>
{
label.Text = "clicked";
});
}
public ICommand ClickCommand { get; private set; }
private void OnButtonClicked(object sender, EventArgs e)
{
Console.WriteLine($"ContentButton clicked event is invoked!!");
}
private void OnButtonPressed(object sender, EventArgs e)
{
Xamarin.Forms.PlatformConfiguration.TizenSpecific.Image.SetBlendColor(buttonBg, Color.Gray);
}
private void OnButtonReleased(object sender, EventArgs e)
{
Xamarin.Forms.PlatformConfiguration.TizenSpecific.Image.SetBlendColor(buttonBg, Color.Transparent);
}
}
}The result screenshot of the example code is as follows.
Getting Started with CircleSurfaceView
The CircleSurfaceView is a special view that can render several circle objects (e.g. CircleProgressBar, CircleSlider, and so on) like CirclePage. What makes this different from CirclePage is that it is a kind of View. So, you can use it more flexibly by adding it to Layout, Page, or even multi views such as CarouselView.
ℹ️ Improtant
By default. the initial value ofCircleSurfaceView's size(width, height) is 0. Make sure that using whether WidthRequest. HeightRequest properties or LayoutBounds or LayoutOptions like FillAndExpand to request the size ofCircleSurfaceView.
- XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tizen="clr-namespace:Xamarin.Forms.PlatformConfiguration.TizenSpecific;assembly=Xamarin.Forms.Core"
xmlns:cu="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
x:Class="MyPage">
<ContentPage.Content>
<AbsoluteLayout>
<cu:CircleSurfaceView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<cu:CircleSurfaceView.CircleSurfaceItems>
<cu:CircleProgressBarSurfaceItem
BarColor="#3F3F46"
BarRadius="130"
BarLineWidth="28"
BarAngleOffset="236.25"
Value="0.6875"
BackgroundColor="#00FFFFFF"
IsVisible="true"/>
<cu:CircleProgressBarSurfaceItem
BarColor="#1EDE7D"
BarRadius="130"
BarLineWidth="16"
BarAngleOffset="237"
Value="0.025"
BackgroundColor="#00FFFFFF"
IsVisible="true"/>
</cu:CircleSurfaceView.CircleSurfaceItems>
</cu:CircleSurfaceView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>The result screenshot of the example code above is as follows.
