This project is read-only.

Introduction

TabletopWidgets is a small library containing UIElements designed for tabletop applications where the orientation of the user(s) is not guarenteed. A common problem in this environment is that users may find themselves reading a menu or window upside down. The following are a set of widgets that are easily rotatable to solve this problem.

These libraries require the .NET framework 3.5 or higher and Visual Studio 2008 or 2010 to use. They are meant to be used in WPF projects.

Getting Started

There are only a few things you need to do to get started:

1. Add a reference to the assembly (ie. TabletopWidgets.dll)
  • Right click on "References" in the solution explorer
  • Click "Add References..."
  • Select the "Browse" tab
  • Find TabletopWidgets.dll and select "OK"

2. Declare a namespace in your xaml file that references the assembly.

xmlns:surfnet ="clr-namespace:TableTopWidgets;assembly=TableTopWidgets"

Making a simple menu

At minimum, a menu requires at least 1 button to work and the InnerRadius and OuterRadius of the button should be defined.
Example
codefig1.png
Assuming "surfnet" is the name of the namespace you've chosen.

PlainButton.png

Additional buttons are easy to add. Simply create another RadialButton object in between the RadialMenu tags and it will be placed clockwise from the old button.
codefig2.png
TwoButtons.png

Alternatively, the same menu can be created with less typing with the MinRadius, MaxRadius and PieSize parameters on RadialMenu:
codefig3.png

Adding Additional Layers

To add extra layers simply make another menu within the same grid.
Example
LayeredButtonsCode.png
LayeredButtons.png

A breakdown of the properties

InnerRadius - The distance between the inner border and the center of the arc it is made of in pixels.
OuterRadius - The distance between the outer border and the center of the arc it is made of in pixels.
Angle - The size of the arc in degrees.
ParameterDiagram.png

Additional properties

Thickness - Sets the thickness of the border in pixels (set to 0 to make it disappear).
Background - Sets the color of the button.
Foreground - Sets the color of the text.
Orientation - For RadialMenu, rotates the entire menu in degrees. The default value is zero.

How to set a callback

RadialButtons work the same as regular wpf buttons. All you need to do is set the 'click' property to the name of the event handler which you can code in your code behind file.
codefig4.png
Inside your .xaml.cs file
codefig5.png

Using other items as content

As with any WPF control you can have any type of content instead of text inside your control. If you remove the borders by setting the "Thickness" property to 0 you can take advantage of the arrangements that the control does for you while you're free to completely determine how it looks.
Example
ImageButtonsCode.png
ImageButtons.png

Last edited Apr 18, 2011 at 5:18 PM by VanP, version 13

Comments

No comments yet.