Icon button is a shortcut to get a button that has an Image and text.
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.
MarkUp:
IconLocation="Left" on-Tapped="SaveButtonTapped" />
You can also change the icon at runtime using the following:
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.
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="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" />
You can control the position of IconButton by setting Style.X and Style.Y properties:
MarkUp:
You can see some information about rotation in Zebble here: http://zebble.net/docs/rotation-in-zebble
You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding
MarkUp:
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"/>