This project is read-only.

The Waffle control

Here you can see the image how is composed the waffle control:

docwaffle

Let’s start to see what you can do:

Waffle button: You can set the background and the foreground

Waffle bar: You can set the background

Bar list item: You can set the background and the foregound, and you can choose if show both, only test or only icon

Waffle content: You can set the content background

Waffle tile item: You can set the background and the foreground, and you can choose if show both, only test or only icon

 

You can also customize the:

WaffleTileSize: The tile size, default is 150 (is square)

ContainerHeight: The height fro the Waffle Content (note the 10 MARGIN!), default is 400

ReduceForAppPortait: NOTE: Works only on WINDOWS APP; Show a most usable waffle content for two hands grip on tablets

BarListItems: A collection of WaffleListItem, es. ObservableCollection<WaffleListItem>

WaffleTileListItems: A collection of WaffleListItem, es. ObservableCollection<WaffleListItem>

 

How to use

ContainerHeight

You can set manually or binding the ContainerHeight property (like in the example app).

ReduceForAppPortait

Works only on windows app.

Default is true.

When you use a tablet and you have set an highest value for ContainerHeight (like in example where is binded to the page height), if you use this property in default value, you’ll have:

 

Surface-Opened-landscape-red

Surface-Opened-portait-red

That can be a little more usable of standard layout in a classic table’s grip (where the hands are usually on it’s sides).

However you can set the value to false and get:

Surface-Opened-landscape

The same on portait.
The false value can be a good choice when you want a fixed content height (try to set 500 in the sizechanged event in the example, and set false to ReduceAppForPortait).

Types

WaffleListCallback: a delegate of type: void (WaffleListItem,object)

The first argument is the clicked item

The second argument is the current View

 

WaffleListItem: This type contains 4 properties;

string Text: contains the text to show under the icon

string Icon: contains the icon’s path

WaffleListCallback Callback: contains the click callback

object Custom: contains a custom argument

Last edited May 20, 2015 at 9:52 PM by Andreabbondanza, version 17