Icon button is a shortcut to get a button that has an Image and text.

• The Image can be on the left side or right side of the Text.
• You only need to set IconPath and Text for that.

To use this component, install the Zebble.IconButton nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

Example:  

MarkUp:

<IconButton Id="SaveButton" IconPath="Images/Controls/Check.png" Text="Save"
                      IconLocation="Left" on-Tapped="SaveButtonTapped" />

You can also change the icon at runtime using the following:

SaveButton.AddIcon("Images/Controls/Check.png");

Compared to using a Stack to achieve the same layout, this control is shorter and briefer to write, but also more semantic and readable. Also, it's easier to style in Css.

 

Enabled & Ignored

 

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

MarkUp:

<IconButton Id="MyButton1"  IconPath="Images/zebble.png" />
<IconButton Id="MyButton2"  IconPath="Images/zebble.png" Enabled="false" />
<IconButton Id="MyButton3"  IconPath="Images/zebble.png" />
<IconButton Id="MyButton4"  IconPath="Images/zebble.png" Ignored="true"/>
<IconButton Id="MyButton5"  IconPath="Images/zebble.png" />

 

Position

 

You can control the position of IconButton by setting Style.X and Style.Y properties:

 MarkUp:

<IconButton Id="MyButton1"  IconPath="Images/image.jpg" Style.Border ="1" Style.X="100" Style.Y="300"/>

 

 

Rotation

You can see some information about rotation in  Zebble here: http://zebble.net/docs/rotation-in-zebble

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

Box Shadow

MarkUp:

<IconButton   IconPath="Images/VS.jpg" Style.Border="2" Style.Border.Radius="5"
Style.BoxShadow.Color ="red" Style.BoxShadow.BlurRadius="15" Style.BoxShadow.XOffset="5" Style.BoxShadow.YOffset="5"  />
<IconButton   IconPath="Images/VS.jpg"  Style.Border.Width="0.3"/>

Events:

• on-Flashed: Raised when the IconButton is flashed.
• on-Initialized: Raised when the IconButton object is created and rendered.
• on-Initializing: Raised when the IconButton object is being created and rendered.
• on-LongPressed: Raised when user clicked on the IconButton for a long time.
• on-PanFinished: Raised when user panned on the IconButton .
• on-Panning: Raised when user starts to pan on the IconButton .
• on-PreRendered: Raised when the IconButton object is not started to rendered before rendering.
• on-Swiped: Raised when user swiped on the IconButton .
• on-Tapped: Raised when user tapped on the IconButton .