Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
ButtonWithImage.unoproj
MainView.ux
README.md
cancel.png
description.yaml

README.md

Creating a custom button with an image

This example shows two different ways to create a custom button that has an image and text as properties. Which approach you use depends on what is most convenient in your application.

Using a File property

MyButtonFile shows how to expose a FileImage property. This works just like the Image.File property and a filename is provided directly.

<MyButtonFile FileImage="cancel.png" Text="Cancel" />

This approach is perhaps the easier to understand, but is less versatile.

Using a ImageSource property

The MyButtonSource shows how to expose a Image property. This works just like the Image.Source property, thus supporting a variety of use-cases.

You can create free ImageSource objects and use them:

<FileImageSource ux:Name="iconCancel" File="cancel.png" ux:AutoBind="false" />
<MyButtonSource Image="iconCancel" Text="Cancel" />

You can use the resource system:

<FileImageSource ux:Key="IconCancel" File="cancel.png" />
<MyButtonSource Image="{Resource IconCancel}" Text="Cancel" />

The resource system is also useful if you want to specify the button in JavaScript:

<FileImageSource ux:Key="IconCancel" File="cancel.png" />
<JavaScript>
	var Observable = require("FuseJS/Observable");
	var useIcon = Observable("IconCancel");
	var useText = "Cancel";

	module.exports = {
		useIcon: useIcon,
		useText: useText
	};
</JavaScript>
<MyButtonSource Image="{DataToResource useIcon}" Text="{useText}" />

You can also use global's if you want:

<FileImageSource ux:Global="GlobalCancel" File="cancel.png" />
<MyButtonSource Image="GlobalCancel" Text="Cancel" />