Style your Buttons using Tizen .NET
Kangho Hur
Principal Software Engineer
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 showsImageSource
even ifText
is set. Also, it is recommended to only set theText
property for "Bottom," "Text," and "SelectMode" styles.
The following example shows the different button styles:
Note
This demo was run onTizen 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 Image
s 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 tizen.net@samsung.com or report new issues and suggestions on GitHub.