Style your Buttons using Tizen .NET

[Samsung Newsroom]

Intro

Buttons have become an inevitable part of application development. Thanks to Xamarin.Forms, we can easily make buttons in XAML or code.

<Button Text="I'm a Button" Clicked="OnButtonClicked" />

var button = new Button {
	Text = "I'm a Button"
}
button.Clicked += OnButtonClicked;

However, in order to make your apps more shiny, sometimes you need to change the style or appearance of a button to what you want. Yes, we love custom buttons. This post shows you how to customize buttons in three different ways on Galaxy Watch.

Quick Start

1. Using Button with Tizen Platform-Specific API - "Style"

You can customize the appearance of a Button by changing the properties such as BackgroundColor, ImageSource, BorderColor, BorderWidth, CornerRadius and so on.
However, due to platform limitations, Tizen does not support modifying the button's border-related properties. To make up for this, we are offering a Tizen platform-specific API that can change the style of the Button.

The API is used in XAML by setting the VisualElement.Style bindable property:

<ContentPage ...
             xmlns:tizen="clr-namespace:Xamarin.Forms.PlatformConfiguration.TizenSpecific;assembly=Xamarin.Forms.Core">
	<StackLayout>
        <Button ...
                tizen:VisualElement.Style="circle">
        </Button>
        ...
    </StackLayout>             
  ...
</ContentPage>

Alternatively, it can be used in C#:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.TizenSpecific;
...

var button = new Xamarin.Forms.button { ... };
button.On<Tizen>().SetStyle(ButtonStyle.Circle);

The pre-defined ButtonStyles are:

• Default
• Circle
• Bottom
• Text
• SelectMode

Note
Make sure that the "Circle" style only shows ImageSource even if Text is set. Also, it is recommended to only set the Text property for "Bottom," "Text," and "SelectMode" styles.

The following example shows the different button styles:

Note
This demo was run on Tizen 4.0. The appearance of the button style may differ depending on the platform version.

2. Using ImageButton with Visual State Manager

The ImageButton (introduced in Xamarin.Forms 3.4) is functionally separate from a typical Button where the Image property is usually for displaying a small icon next to the Button’s text. Let's see how we can customize the style of the button using ImageButton and VisualStateManager (introduced in Xamarin.Forms 3.0).

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemo.ImageButtonPage"
             Title="Button">
    <StackLayout>
        <Label x:Name="label"
               Text="Image Button"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />
        <ImageButton Source="tizen.png"
               WidthRequest="100"
               HeightRequest="100"
               BackgroundColor="Transparent"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center"
               Clicked="OnButtonClicked"
               BorderColor="Gray"
               BorderWidth="2"
               CornerRadius="50"
               Aspect="AspectFit">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="1"/>
                            <Setter Property="BorderColor" Value="Gray"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="1.2"/>
                            <Setter Property="BackgroundColor" Value="#40FFFFFF"/>
                            <Setter Property="BorderColor" Value="#00B0EF"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </ImageButton>
    </StackLayout>
</ContentPage>

In this example, you set an image in the same way as on an Image using the Source property which takes any ImageSource. By using the VisualStateManager, you can do things such as change various button's properties (Scale, BackgroudColor, BorderWidth, BorderColor, CornerRadius) when it is pressed.

When the button is pressed, the image is slightly enlarged, the background changes to opaque white, and the border changes to light blue:

ImageButton also supports Command and CommandParameter for easily binding to a ViewModel or other binding context.

3. Using ContentButton provided by CircularUI

The ContentButton (newly added in CircularUI 1.5.0 Preview Release 4) is a type of Xamarin.Forms.ContentView that contains a single child element (called Content) and is typically used for 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.

The following example shows the CustomButton composed of a combination of Images that define the icon, background, and border of a 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: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="ButtonDemo.ContentButtonPage"
             Title="Button">
    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <Label x:Name="label"
               Text="Content Button"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />
        <cu:ContentButton x:Name="button"
               Clicked="OnButtonClicked"
               Pressed="OnButtonPressed"
               Released="OnButtonReleased">
            <cu:ContentButton.Content>
                <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Image x:Name="buttonBg" Source="button_bg.png" Opacity="0.25" Aspect="AspectFill" tizen:Image.BlendColor="Transparent" AbsoluteLayout.LayoutBounds=".5,.5,89,66" AbsoluteLayout.LayoutFlags="PositionProportional" />
                    <Image x:Name="buttonBorder" Source="button_border.png" Aspect="AspectFill" tizen:Image.BlendColor="DarkGreen" 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>
            </cu:ContentButton.Content>
        </cu:ContentButton>
    </StackLayout>
</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 shown below.

public partial class ContentButtonPage : ContentPage
    {
        int num;

        public ContentButtonPage()
        {
            InitializeComponent();
            num = 0;
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            label.Text = "Clicked:"+ num++;
        }

        private void OnButtonPressed(object sender, EventArgs e)
        {
            TImage.SetBlendColor(buttonBg, Color.Gray);
        }

        private void OnButtonReleased(object sender, EventArgs e)
        {
            TImage.SetBlendColor(buttonBg, Color.Transparent);
        }
    }

The result is the button background changing to gray when the button is pressed, the button background changing to transparent when the button is released, and the text counter increasing by one after the button is clicked:

ContentButton also supports Command and CommandParameter for easily binding to a ViewModel or other binding context.

Conclusions

These are the techniques that help you create custom buttons in Tizen .NET.
All the examples above are also found here.

Happy styling!

Feedback

Your feedback is important to us. If you have any questions, don’t hesitate to reach out to the Tizen .NET team at [email protected] or report new issues and suggestions on GitHub.

View the full blog at its source