Library for developing app dialogs for Windows phone similar to Monotouch.Dialog


WPDialog is an easy to use utility for creating dialog boxes, user interactions and show tables. Even more complex user interfaces with many nested pages can be made without creating a xaml file. Don't care about Navigation and page constructing, simply configure a RootElement. All pages are scrollable and supporting portrait and landscape orientation. Navigation works backwards and forwards without any additional coding needed. If you use the Toolkit all navigations will be animated and extra Elements are available. Themes and AccentColor will be attended.

To obtain the following dialog page:


just define the RootElement:
new RootElement("All Elements"){
    new SeparatorElement("a simple Element:"){ Alignment = TextAlignment.Left },
    new Element("Element"),
    new SeparatorElement("HtmlElement:"){ Alignment = TextAlignment.Left },
    new HtmlElement(""),
    new DateElement(),
    new TimeElement(),
    new SeparatorElement("Toggle Buttons"),
    new CheckElement("CheckElement:", true),
    new SwitchElement("ToggleSwitch", true),
    new RadioElement("Toggle RadioElement"){ Checked = true },
    new RadioElement("uncolored Toggle RadioElement"){ UseAccentColor = false, Checked = true },
    new SeparatorElement("EntryElements"),
    new EntryElement("EntryElement:", "Text"){ SplitHorizontal = true },
    new EntryElement("Password:", "password"){ IsPassword = true, SplitHorizontal = true },
    new EntryElement("EntryElement:", "more Text"),
    new EntryElement("Password:", "password"){ IsPassword = true },
    new SeparatorElement("SliderElements"),
    new SliderElement("Slider", 2),
    new SliderElement(true, 7)

Here an example wtih theme light and accent color blue:


There are different elements for different usage:
  • Element: displays a Button with title and is base class for all Elements
  • RootElement is the baseclass for the configuration of a DialogPage and holds as IEnumerable<Element> all the Elements, that will be shown on this page. As Element it can be added to another RootElement to trigger loading a new nested configuration page. Title will be shown as title of the nested cell and as headline of the new page.
  • EntryElement: allows the user to input some text, if IsPassword is set to true a PasswordBox will be displayed, SplitHorizontal leads to a different appearance
  • SeparatorElement is for displaying headers, footers or visualizing groups (see RadioGroup)
  • SliderElement: for setting up float values with a slider, like volume controls. The title can be the current value or a string.
  • HtmlElement: will navigate to a simple browser with it's title as uri
  • CheckElement contains a CheckBox for selecting / unselecting an item
  • RadioElement with RadioGroup enables the user selecting one of a set of choices. Without a RadioGroup it is a ToggleButton. Selected RadioElements respect the current AccentColor of the phone (if not UseAccentColor is set to false). The simplest way is creating a RadioGroup with selectedIndex and all items as string and adding it to a RootElement with optional header and footer (might be null)
    var group = new RadioGroup(1) { "1. Item", "2. Item", "3. Item", "4. Item" };
    root.Add(group, "RadioGroup", "End of RadioGroup");
what looks like:


With the toolkit from, there will be
  • SwitchElement to set a switch on or off
  • DateElement for selecting a date in WinPhone - style
  • TimeElement for selecting a time in WinPhone - style
  • Navigation will be animated.


Additionally, there is a Reflection-based constructor that can be used for defining dialogs. Here a sample:
  • first define your data for user interactions
    public class Settings
        public bool AccountEnabled;
        public string Login;
        [Footer("Your credentials")]
        public string Password;
        [Header("nested objects")]
        public TimeSettings Time_Samples = new TimeSettings();
        public MoreExamples More_Samples = new MoreExamples();
  • create a BindingContext instance with your data
  • push the BindingContext - RootElement
 var settings = new Settings();
 var bc = new BindingContext(settings, "Settings");

The result of the code above:


Each element has an Action, what will be triggert by touching the element or changing a value. To react on user input, apply your code to that Action:
var root = new RootElement("Actions") {
    new SeparatorElement("Touch an element"),
    new Element("Element 1", (e) => { e.Parent.Page.Title = e.Title; }),
    new Element("Element Push",
        (e)=>{ new RootElement("Push / Pop") { new Element("Element Pop", (el)=>{ el.Parent.Pop(); }) }.Push(); }),
    new SliderElement(true, 0){ Action = 
        (e)=>{ e.Parent.Page.Title = "Value: " + Math.Round((e as SliderElement).Value, 2);}},
    new CheckElement("Checked", false){ Action = 
        (e)=>{ e.Parent.Page.Title = e.Title + ": " + (e as CheckElement).Checked; }},
    new SwitchElement("Switch", true){ Action = 
        (e)=>{ e.Parent.Page.Title = e.Title + ": " + ((e as SwitchElement).Value ? "On" : "Off"); }},
    new RadioElement("Toggle"){ Action = 
        (e)=>{ e.Parent.Page.Title = e.Title + ": " + (e as RadioElement).Checked; }}
var g = new RadioGroup(1) { "1. Item", "2. Item", "3. Item" };
g.SelectionChanged = (e) =>{ e.Parent.Page.Title = e.Parent.Title = "Radio: " + e.Title; };
root.Add(g, "RadioGroup", "End of RadioGroup");

Last edited Jul 29, 2013 at 8:40 AM by tilos, version 4