Tizen .NET Portal

Using SwipeView in Xamarin.Forms Tizen

2020-02-12T00:00:00+00:00

SwipeView in Xamarin.Forms 4.4

The new experimental SwipeView control was added in the Xamarin.Forms 4.4 release. SwipeView is a container control that wraps any of your controls and make them swipe-able.

See the API documentation and official guide for detailed information.

Note: Depending on the platforms for which you are developing, SwipeView can be only used under an experimental flag. In this case, add the following line before calling Forms.Init in your application.

Forms.SetFlags("SwipeView_Experimental");

Preparation to use SwipeView in Tizen

For most developers who use the Tizen wearable templates when creating a project in Visual Studio, update Tizen.Wearable.CircularUI NuGet version to 1.5.0-pre2 or above. This update brings Xamarin.Forms version 4.4.0.991537 to your application.

Adding SwipeView to controls

Here is how to create a simple city selector sample application (see the following code). First, wrap your images with SwipeView. One image is the main city image, and the other is a decorative image that shows the selected status of the main image. I put TopItems among four directions, so that application users can swipe down the city image to invoke an action.

<c:CirclePage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c="clr-namespace:Tizen.Wearable.CircularUI.Forms;assembly=Tizen.Wearable.CircularUI.Forms"
             x:Class="SwipeViewSample.MainPage"             
             BackgroundColor="GhostWhite">
	<c:CirclePage.Content>
	    <StackLayout Orientation="Horizontal" Margin="0, 70, 0, 70" Spacing="15">
	        <SwipeView>
	            <SwipeView.TopItems>
	                <SwipeItems Mode="Execute">
	                    <SwipeItem Text="select"
	                               Invoked="TopItem_Invoked" />
	                </SwipeItems>
	            </SwipeView.TopItems>
	            <!-- Content -->
	            <Grid>
	                <Image Source="Boston.png" />
	                <Image x:Name="selectedImage" Source="checked.png" IsVisible="False" InputTransparent="True"/>
	            </Grid>
	        </SwipeView>
	    </StackLayout>
	</c:CirclePage.Content>
</c:CirclePage>

In the cs file, simply change the visible status of a selectedImage when the main image is swiped down.

private void TopItem_Invoked(object sender, EventArgs e)
{
        selectedImage.IsVisible = !selectedImage.IsVisible;
}

Let’s try running the code on an emulator.

Example

Now, let’s add more cities with SwipeView:

Again, you can check out the API documentation and official guide to see what else you can do with SwipeView.

Using a Custom Font In Your Xamarin.Forms Tizen Applications

2020-02-03T00:00:00+00:00

Previously, in order to use custom fonts in existing Xamarin.Forms applications, you had to add the font asset in each platform project and use the FontFamily property to apply the fonts. This was very cumbersome, because each platform required a different syntax for referencing a font file.

Grabbing Hardware Key Events

2020-01-16T00:00:00+00:00

It is not a common scenario to grab a hardware key event in your application, because you can simply use controls like Editor or Entry when you need to get input from users. However, if you want to make a more advanced application which handles hardware key inputs more detail or especially when you want to do something with the Smart TV remote control key event, you want to grab hardware key events.

Tizen .NET Portal moving notice

2019-12-30T00:00:00+00:00

Tizen .NET Portal is moving to Samsung Developers

We are happy to announce that the portal will be integrated with the Samsung Developers website.

Samsung Developers Portal

With all developer content in one place, you don’t need to hunt for information you need. Just visit Samsung Developers and find everything about developing Samsung apps in one place.

You can view Tizen.NET Blog posts here.

Image caching using FFImageLoading

2019-12-16T00:00:00+00:00

When you want to use an internet image in your application, you may be concerned about slow image loading or load failure caused by network issues. In this scenario, it is a good idea to show the default temporal image until the actual image is successfully loaded and ready to be displayed. Reusing the image data that has been downloaded can also make an image appear more quickly. The FFImageLoading library includes these features to help you to load images quickly and easily. FFImageLoading - Fast and furious image loading The FFImageLoading library allows you to load images quickly and easily on Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac, Xamarin.Tizen, and Windows (UWP, WinRT). Features supported on Tizen Configurable disk and memory caching Multiple image views using the same image source (such as URL, path, resource) use only one bitmap, which is cached in memory (less memory usage) No duplication of similar download/load requests. That is, if 100 similar requests arrive simultaneously, one will load while the other 99 wait Support for error and loading placeholders Images can be automatically downsampled to a specified size (less memory usage) SVG support Image loading Fade-In animations support Can retry image downloads (RetryCount, RetryDelay) Getting started Let’s use FFImageLoading in your application. Install the FFImageloading package nuget.exe nuget.exe install Xamarin.FFImageLoading.Forms .NET CLI dotnet add package Xamarin.FFImageLoading.Forms Package reference <PackageReference Include="Xamarin.FFImageLoading.Forms" Version="2.4.11.982" /> Initialize FFImageLoading To use FFImageLoading, initialize the library for the Tizen platform and configure various options: var app = new Program(); Forms.Init(app); // Initialize FFImageLoading with FormsApplication object FFImageLoading.Forms.Platform.CachedImageRenderer.Init(app); Set up options at startup If you want to handle events from CachedImage object on your app code, you need to set the ExecuteCallbacksOnUIThread property to true. protected override void OnCreate() { base.OnCreate(); var config = new FFImageLoading.Config.Configuration { ExecuteCallbacksOnUIThread = true, }; FFImageLoading.ImageService.Instance.Initialize(config); LoadApplication(new App()); } CachedImage CachedImage is a main function of FFImageLoading. It is very similar to the Xamarin.Forms Image class. <?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:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" x:Class="CachedImageSample.MainPage"> <ContentPage.Content> <StackLayout> <ff:CachedImage LoadingPlaceholder="loading.jpg" Source="http://i.imgur.com/gkVgpL1.jpg"/> </StackLayout> </ContentPage.Content> </ContentPage> var image = new CachedImage { LoadingPlaceholder = "loading.jpg", Source = "http://i.imgur.com/gkVgpL1.jpg" }; Useful properties Property Description LoadingPlaceholder If set, a loading placeholder appears. It supports UriImageSource, FileImageSource, and StreamImageSource. ErrorPlaceholder If set, an error placeholder appears if an error occurs while loading an image. It supports UriImageSource, FileImageSource, and StreamImageSource. RetryCount (integer, default: 3) Defines the retry count. If an image download or other failure occurs, it can be retried automatically. RetryDelay (integer, default: 250) Defines the retry delay. If an image download or other failure occurs, it can automatically be retried. CacheDuration (Timespan, default: TimeSpan.FromDays(90)) Defines the length of time the file cache of the downloaded image is valid. Clear cache on the memory and disk If a device does not have enough memory, you must suppress memory usage in your app. FFImageLoading provides a way to clear the memory cache. // Provided in `CoreApplication`, it is the best place to clear memory cache protected override void OnLowMemory(LowMemoryEventArgs e) FFImageLoading.ImageService.Instance.InvalidateDiskCacheAsync(); You can also clear the cache on the disk: FFImageLoading.ImageService.Instance.InvalidateDiskCacheAsync(); Best use of CachedImage CachedImage works best when used in CollectionView, because CollectionView unloads a view that is out of sight, and reloads the view when it returns. Once the image source is loaded, it appears quickly. Privileges If an internet image is not shown, check your app for the internet privilege. In the tizen-manifest.xml file, declare http://tizen.org/privilege/internet Links Project site API Reference Tizen Sample

Build a widget for Galaxy Watch

2019-12-02T00:00:00+00:00

The Tizen wearable profile provides three application models to create a variety of UI applications: Basic UI A basic UI application provides a graphical user interface that allows the user to interact with the application. Watch face A watch application, or watch face, provides the current time (updated every second) as its user interface. The watch application appears on the idle screen of the device and supports a special ambient mode that reduces power consumption by showing a limited UI and updating the time on the screen only once per minute. Widget A widget application, or widget, provides the user with a quick view of specific information from the parent application. In addition, the widget allows the user to access certain features without launching the parent application. Combined with the parent application, your widget can have various features to increase the usability of your application. This blog post describes how to publish an widget application for your Galaxy Watch by using Tizen.NET and Tizen.CircularUI. Widget application and widget instance As announced in the last Samsung Developers Conference 2019 (SDC19), you can create a widget application using Tizen.CircularUI version 1.4.0 or higher. To create a widget application, you need the following: FormsWidgetApplication The FormsWidgetApplication represents a widget application to have widget instances. FormsWidgetBase The FormsWidgetBase represents a widget instance. Every widget instance has its own lifecycle, similar to the basic UI application. However, the widget instance is only an object shown by the widget viewer applications (for example, the Home app). Widget Instance Lifecycle The FormsWidgetBase class contains six virtual methods that can be overridden to respond to lifecycle changes: OnCreate(): Called after the widget instance is created. OnDestroy(): Called before the widget instance is destroyed. OnResume(): Called when the widget is visible. OnPause(): Called when the widget is invisible. OnResize(): Called before the widget size is changed. OnUpdate(): Called when an event for updating the widget is received. The following figure illustrates the widget instance states during the instance lifecycle: Ready state: Instance does not yet exist. Created state: Instance is created. Running state: Instance is visible. Paused: Instance is invisible. Destroyed: Instance is destroyed. Getting started Let’s create beautiful widget applications on your Galaxy Watch. Installing package Package Manager PM> Install-Package Tizen.Wearable.CircularUI -Version 1.4.0 .NET CLI dotnet add package Tizen.Wearable.CircularUI --version 1.4.0 Package reference <PackageReference Include="Tizen.Wearable.CircularUI" Version="1.4.0" /> Quick start ℹ️ Because the application template for the .NET widget is not yet available in Visual Studio, you must create the widget application code manually, as shown below. Step 1. Declare a widget application in the Tizen manifest Declare the widget application and privileges in the tizen-manifest.xml. <widget-application appid="org.tizen.example.MyWidget" update-period="0" exec="MyWidget.dll" type="dotnet"> <label>MyWidget</label> <icon>icon.png</icon> <metadata key="http://tizen.org/metadata/prefer_dotnet_aot" value="true" /> <support-size preview="MyWidget.png">2x2</support-size> <splash-screens /> </widget-application> <privileges> <privilege>http://tizen.org/privilege/widget.viewer</privilege> </privileges> Step 2. Create the widget base WidgetBase is the abstract class for widget instance. Define your widget base, which is inherited from the FormsWidgetBase class, as shown below. class MyWidgetBase : FormsWidgetBase { public override void OnCreate(Bundle content, int w, int h) { base.OnCreate(content, w, h); // Create the Xamarin.Forms.Application to use your widget var app = new Application(); // Load the application just like general Xamarin.Forms app. LoadApplication(app); } } Step 3. Create the widget application WidgetApplication represents a widget application. Define your widget application, which is inherited from the FormsWidgetApplication class, as shown below. class MyWidgetApp: FormsWidgetApplication { public MyWidgetApp(Type type) : base(type) { } static void Main(string[] args) { //Creates the widget application with widget base var app = new MyWidgetApp(typeof(MyWidgetBase)); Forms.Init(app); FormsCircularUI.Init(); app.Run(args); } } Sample If you’re a fan of Xamarin.Forms, you may remember the PrettyWeather app that James showed at the last .NET conference. We modified this application to a widget application that runs on the Galaxy Watch. Check it out right here.

Recapping Samsung Developer Conference 2019

2019-11-20T00:00:00+00:00

Samsung Developer Conference 2019 was held in San Jose, California, on Oct. 29 and 30. The conference keeps getting larger, and the Tizen zone within SDC has expanded as well. This year, not only did the Tizen .NET Team host booths and a session, but several partner booths demonstrated their real-world Tizen .NET solutions.

Introducing Visual Studio for Mac extension for Tizen

2019-11-05T00:00:00+00:00

I am very pleased to announce the release of the Tizen extension for Visual Studio for Mac. There are tons of Mac users out there, and until now it has been quite tricky to use Mac machines to develop Tizen .NET applications. Visual Studio for Mac Extension for Tizen was introduced at the Samsung Developer Conference 2019 held on Oct 29-30 in San Jose, CA, and is now available.

Update Tizen.NET.Sdk package in Visual Studio 16.3 or above

2019-10-14T00:00:00+00:00

Visual Studio 2019 version 16.3 has been recently released and lots of people would be very happy to update their Visual Studio to the latest. Check out the release notes to see more details.

Add a Tizen project to Xamarin.Forms applications

2019-10-02T00:00:00+00:00

This article provide helpful information for new Tizen .NET application developers to get started. In many cases, you’ll want to add a Tizen project to existing Xamarin.Forms cross-platform applications or implement Tizen renderers for Xamarin.Forms third-party libraries, which already include other platforms. In these cases, you can simply add a Tizen project to the existing solution. Add a Tizen Project to Visual Studio The following example shows a cross-platform app named SimpleText, which shows a line of text in the center. The text varies depending on the platform: On an Android Emulator, the text appears as “Welcome to Xamarin.Forms.Android!” On an iOS Simulator, the text appears as “Welcome to Xamarin.Forms.iOS!” Now, let’s add a Tizen project to run on the Tizen platform in Visual Studio: Go to File > Add > New Project. Select the Tizen cross-platform template Tizen XAML App (Xamarin.Forms) Give your project the name SimpleText.Tizen. On the Tizen project wizard: Select “Common” as the profile. Other available profiles are Mobile, TV, and Wearable. Choose Select Project in Solution. Select SimpleText as the reference. Add code LoadApplication(new SimpleText.App()) to the SimpleText.Tizen/SimpleText.Tizen.cs file. The following shows a quick runthrough of the process: ![][adding-tizen-project] Run on the Tizen platform Now you are ready to build and run the application on Tizen platform. I added the text for Tizen on Label.Text on the main page of the application. <?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:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="SimpleText.MainPage"> <StackLayout>  <Label Text="{OnPlatform Android='Welcome to Xamarin.Forms.Android!', iOS='Welcome to Xamarin.Forms.iOS!', Tizen='Welcome to Xamarin.Forms.Tizen!'}}" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> </StackLayout> </ContentPage> You can check out how it looks on the Wearable target emulator.